CSS Grid

• Parts of the grid
• Simple grid
• Grid tracks
  • Explicit grid examples
• The fr unit
• minmax()
• auto-fill and auto-fit
• Placing items
  • Grid lines
    • Named grid lines
  • Template areas
  • Interaction between named lines and areas
  • Automatic placement with the implicit grid
• Aligning items and tracks

Parts of the grid

Simple grid

Grid tracks

Grid tracks define where content in the grid can be placed, essentially the rows and columns of the grid. There are two types of grid:

• Explicit grid: Grid tracks that are specifically defined. They will always take up their defined space.
• Implicit grid: Grid tracks that are created on demand when the explicit grid is full.

The following things can be configured for grid tracks:

Explicit grid examples

The fr unit

The fr unit's behaviour is a little more complicated than just 1 fraction of the space of the grid. The important details are:

1. The fraction of the grid given by 1fr isn't a fraction of the grid's total space, but a fraction of the available space. This means if there's a fixed with column in there, any fractional units will divide up the remaining space between themselves, rather than using a fractional size of the entire grid.

2. Grid items can grow beyond their fractional size. If the min-content size of a grid item is greater than the configured fractional amount for a column then the column size will expand to fit that content. In this case the defined fractional amount will be different than actual columns size.

   Note you can fix this by using the minmax(0, 1fr) function to set the minimum width of a column to 0. This basically causes the grid to ignore min-content and always size to the given fractional amount.

fr vs. %

• The fr unit allows you to take up a fraction of remaining space, not just total space.
• The gap property will work automatically with fr, but not with %.

minmax()

The minmax() function allows you to set a minimum and maximum on a grid track.

Fluid grids with auto-fill and auto-fit

General sizing algorithm

The auto-fill and auto-fit properties can be used to automatically determine the number of columns to use based on the available space and the configured column sizes. Some rules:

1. The largest number of columns possible are created that won't cause an overflow of the grid container. The size of these columns is as follows:
   1. If the max track size is definite use that.
   2. Otherwise use the min track sizing function.
2. If using a max track size of fr or auto, then any remaining space will be divided up among the columns.

auto-fill vs. auto-fit

The difference between auto-fill and auto-fit can be seen when the number of grid items is less than the number of automatically created tracks:

1. auto-fill will leave empty tracks there
2. auto-fit will collapse empty tracks and divide space between tracks with defined grid items.

Differences from simple fixed column sizes

The core difference between :
  repeat(3, minmax(30px, 1fr))
and
  repeat(auto-fill, minmax(30px, 1fr))

Placing items

Grid lines

Whenever you explicitly place items on a grid you specify their position using grid lines. Relevant properties:

Other notes:

• If you don't specify an end it defaults to span 1.

Examples

Named grid lines

Grid lines can be given names and referenced elsewhere by their names.

• Line names are defined like this: grid-template-columns: [line-name-1] 1fr [line-name-2] 2fr [line-name-3]
  And referenced like this: grid-column: line-name-1 line-name-3
• You can give a line multiple names: [line-name-1 line-name-2]

The same line names can be used for multiple lines. Note:

• When there are multiple lines with a given name the first found line is used.
• When span is used with a line name it will apply only to lines with a matching name.
• You can reference lines with a particular name by index: grid-row-end: line-name 3
• Using repeat with a line name will cause multiple lines to use the given name.

Examples

Template areas

You can define how items will be placed in a grid using a string template syntax. See below for details:

Notes:

• Whitespace is ignored in the template and can be used for spacing names so they line up.
• Empty cells are specified with a ".".
• You can currently only specify rectangular shapes.

Interaction between named lines and areas

If you define a named grid area then you will automatically get corresponding named lines generated for that area. E.g. if you have an area named header then you will get the following line names automatically generated for both columns and rows: header-start and header-end.

The same applies in reverse as well. If you have lines with the same name that form an area then the corresponding named area is automatically generated and can be used to place grid items. The lines must start with the same name and end in -start and -end.

Automatic placement

The previous sections have covered explicitly placing items in the grid. Items that are not placed explicitly as defined above will be placed automatically. Automatic placement happens as follows:

1. First empty positions in the explicit grid are filled up.
2. When the explicit grid is full new grid tracks are created according to implicit grid definitions and these are filled up.

Here are some relevant properties:

Aligning items and tracks

In CSS grid you can align items in grid areas, and grid tracks within the grid. Alignment applies when the item or track is smaller than the area or grid. There are two axis to be aware of:

• The block axis: this is in the direction blocks are laid out, normally top to bottom.
• The inline axis: this is in the direction inline boxes are laid out, normally left to right.

The following properties apply: