Defining a grid

We can define a grid simply by setting the display property to grid. Defining the columns is as simple as specifying the widths to the grid-template-columns property. We can do the same for the rows using the grid-template-rows property. If any more rows are added then we can use the grid-auto-rows property to define these heights. To specify the gap between columns we can use grid-column-gap property and for rows we can use the grid-row-gap property. If instead we want to specify both at once we can use the grid-gap property. In grid layout terminology we use the term track for referring to a row or a column.

See the Pen Defining a grid by Andrew Reeman (@andrewreeman) on CodePen.

Using the fr unit

A problem with the above example is that the columns stay at given fixed pixel size regardless of how large the screen is. We can use the fr unit to address this. The fr unit stands for fractional and represents a fraction of the available space in the grid. If we replaced the grid-template-columns with 1fr 1fr 1fr then each of the three columns will take an equal amount of space. Notice that this time the layout is more responsive. We can view this on different widths and it takes this into account. If we wanted the first column to be larger then we could use something like 2fr 1fr 1fr. We can also mix fr units and standard units so times when we need to display a particular column as a fixed size. For example: 1fr 100px 1fr

See the Pen The fr unit by Andrew Reeman (@andrewreeman) on CodePen.

Repeat notation

Instead of explicitly stating each track we can use repeat notation to repeat a pattern of tracks. We do this by using the repeat function in our grid-template-columns or grid-template-rows. For example: grid-template-columns: repeat(2, 1fr 2fr);. The first argument is how many times we should repeat this pattern. The second argument is the pattern itself.

See the Pen Repeat notation by Andrew Reeman (@andrewreeman) on CodePen.

The minmax function

The minmax function can be used for column or row templates. It determines the minimum and maximum size a track will be. This is useful for contraining a responsive layout.

See the Pen Minmax by Andrew Reeman (@andrewreeman) on CodePen.

Order

We can change the display order of items by using the order keyword. The higher the number the lower the priority. By default everything will have a priority of 0.

See the Pen Order by Andrew Reeman (@andrewreeman) on CodePen.

Auto fill and auto fit

So far we have had to specify how many columns we require. But in many situations it can be difficult to know in advance how many columns we will need especially if we are loading dynamic content. We can use the auto-fill and auto-fit keywords as arguments to the repeat function to create columns to distribute the items evenly. Auto-fill will distribute the items and if there is space left over it will fill it empty items. Auto-fit will do the same but when there is space left over it will grow the items to fit to the space.

See the Pen Autofill and autofit by Andrew Reeman (@andrewreeman) on CodePen.

Using span to auto place items

We can use grid-column-start and grid-column-end to specify which columns an item can take up. Specifying an integer will ensure the start or end will be this specific column. We can use a negative number to specify a column from the end. For example -1 will be the last column and -2 will be the one before this. We can use the span keyword to indicate that the number specified is how many columns should take up instead of a particular column. For instance grid-column-end: span 2 means that the item will be 2 columns from it's start. grid-column-start: 3 means that the item will be 3 columns from it's end. The span keyword also applies to the row versions of this which are grid-row-start and grid-row-end. A shorthand for using grid-column-start and grid-column-end is the grid-column attribute. This one argument for the start and another for the end separated by a forward slash. For example: grid-column: 3 / -1 means start at column 3 and continue until the end. The row version of this is unsurprisingly: grid-row. Now that we can specify the span of rows and columns we may end up with many variable sized items and this can lead to quite a bit of white space. We can use the grid-auto-flow: dense attribute and keyword which will change the order of items to ensure that they are tightly packed into the grid.

See the Pen Span and auto-placement by Andrew Reeman (@andrewreeman) on CodePen.

Named tracks

Tracks can be named by specifying the name in square brackets before the track. For example: grid-template-columns: [sidebar] 100px [content] 300px [ads] auto [ads-end]. In this case the first column is named 'sidebar', the second is named 'content' and the last is named 'ads'. The end of the last column is also named 'ads-end'. The below example shows usage with named rows as well as columns.

See the Pen Names lines by Andrew Reeman (@andrewreeman) on CodePen.

Align and justify

We can use justify-items to align items horizontally and align-items to align items vertically. We can also use justify-self and align-self to perform alignment on specific items

See the Pen Aligning and justifying items by Andrew Reeman (@andrewreeman) on CodePen.

Align and justify grid tracks

Aligning and justifying the grid tracks instead of the items is done by using the justify-content and align-content keywords. Justify-content will align the columns and align-content will align the rows.

See the Pen Aligning and justifying the grid by Andrew Reeman (@andrewreeman) on CodePen.

Grid areas

Grid areas are extremely useful for laying out the grid. We can name a particular area that an item belongs too by using the grid-area attribute. On the grid we can use grid-template-areas to create a layout for all of these named areas.

We lay this out by writing a grid usings strings that visually represent the grid. For example:

This will create a grid with two columns and three rows placing the header over two columns with the main content and an image taking a column each. The footer will take up a single column with an empty item in the second column.

See the Pen Grid areas by Andrew Reeman (@andrewreeman) on CodePen.

Fitting content

We can use content-fitting keywords to control the column and row sizes when using grid-templates.

The below example explains and demonstrates this.

See the Pen Content sizing by Andrew Reeman (@andrewreeman) on CodePen.