Chapter 6.5: Grid

The grid layout can be thought of as just a 2D version of the flex box. To indicate that the display type is a grid you use the display: grid; attribute. This works a lot like a table with items being adjusted to fit into the grid slot that corresponds to them. Grids do not have to be a uniform size, but because the grid is flexible, specifying the size of a cell needs to be done in a non-specific way.

To solve this problem, CSS introduces a new unit called a fraction (fr) which takes weights and builds grid based off of weights. To complicate things, you can still use other size units and can mix between them. This works by finding how many pixels are available for the fractions and dividing those pixels up based on the number of fractions each cell has.

To set the size of the rows or of the columns (or both) you simply use the grid-template-columns or grid-template-rows attribute. These are followed by a space separated list of the sizes of the elements. This leads to another problem. Grids can have many columns or rows that need to be set up. To get around this issue a special macro function has been provided, named repeat.

Repeat is an interesting macro as the first value is the number of times to repeat and it is followed by the sequence of sizes to use. If more then 1 size the pattern repeats the specified number of times. For example:

Repeat(5 2fr) would result in 2fr 2fr 2fr 2fr 2fr while repeat(3, 1fr 2fr) would result in 1fr 2fr 1fr 2fr 1fr 2fr.

The repeat macro can be used in-between other size values and can be used multiple times, so something like 1fr repeat(2, 3fr 2fr) repeat(2 2fr) would result in 1fr 3fr 2fr 3fr 2fr 2fr 2fr.

Just like with flex boxes, grids can have gaps. The difference is that both the row gap and the column gap can be significant. The down side is that browsers currently ignore caps that use fragment units. Again, the gap attribute uses the format gap: row col.

Putting all the above together we can create a more flexible table, by using the following:

Each of the columns can have their own different type of components. In my simple example, I just used different colors, but in real layouts changes between tiles can be drastically significant. One of the big things to note is that when you have different sized elements, the row or column will adjust the width/height of that row or column to fit all the elements in that row/column. To demonstrate this, I have my race type have extra padding so all of the rows are higher.

You will notice that in order to make sure everything looks nice, I am using an attribute called align-content. It is used to vertically align content and has three options: start, end, and center.

Making this even more powerful, we can have elements span multiple columns or multiple rows and can skip over rows or columns. This is done by using the attributes grid-column-start and grid-column-end for columns, grid-row-start and grid-row-end for rows. A shorthand form exists by using grid-column start / end or grid-row start / end. Unfortunately, at least for programmers, is that indexing is 1 based so the top left cell is at row 1, column 1.

This is all great, if you know the coordinates you want, but what if you want the current cell you are on to span multiple rows or columns but don’t want to have to track where you are on the grid. CSS has you covered. You simply use the span keyword to indicate the span that you want.

As powerful as all this is, you can go even further with the grid by taking advantage of its templates, which we will discuss next.