CSS Grid

[jondashkyle]

When using gr8 to scaffold out grid layouts I use the provided column (cX) utilities and flexbox. Recently CSS grid has been seeing some action, and has been implemented widely within the big three browsers. So this raises the question; what could gr8 utilities for grid look like?

There are a few properties associated with grid which could be implemented:

• display: grid
• grid-row
• grid-column
• grid-template-rows
• grid-template-columns
• grid-gap
• grid-row-gap
• grid-column-gap

The values for this get somewhat complex, as the grid spec is the first widely implemented use of css functions, such as:

• repeat()
• minmax()
• fitcontent()

These enable you to assign values such as grid-template-columns: repeat(3, 1fr).

It seems obvious we could simply implement the existing 12 column grid as default as a starting point, and consider how some of these more complex values could be introduced down the line.