The display: grid property sets the container to grid layout. The container is configured in two dimensions using columns and row. By default there is one column and rows are added for each grid item, this results in a stack.
Some terms to remember:
| Term | Description |
|---|---|
| Grid Lines | The dividing lines that make up the structure of the grid. Starts at 1 and can be referenced when placing items. |
| Grid Tracks | The space between adjacent grid lines. Your rows and column. |
| Grid Area | Any rectangular space surrounded by four grid lines. Areas can be named and items can be put into the areas. |
| Gap | Use gap or row-gap and column-gap to specify consistent spacing between rows and or columns. |
| Fractional Unit | fr unit only distributes available space, so it works after fixed-size tracks are accounted for. |
| Explicit Grid | The grid defined by the user using grid-template columns and grid-template-rows. |
| Implicit Grid | Grid that is automatically created, or expanded to, when you put more items outside the explicit grid cells. |
Approach
For general layout purposes using css grid the following approach can be considered:
- Think about the grid layout you want to achieve for desktop and small devices.
- Define the grid container an the corresponding columns and rows. Remember the implicit grid by default take care of extra rows when needed.
- Place the grid items in the grid areas within the created grid tracks. You will usually use a combination of track indices, spans and grid area.
- Adjust alignments where needed: start (default), end, centre, stretch etc. for items as well for content (tracks)
- Where needed add breakpoints to adjust the grid container behaviour, but think about intrinsic design first. Many layouts can be achieved without breakpoints.
Grid container
The main goal of the container is to setup the “environment” on which the child (grid) items will be placed on. There are different approaches on how you can define the grid composed of columns and rows. The most straightforward way is to define a explicit grid using grid-template-columns and grid-template-rows.
Defining
grid-template-columns- each space separated entry is a columngrid-template-rows- each space separated entry is a rowgrid-templates-areas- define grid layout using labeled areas that grid items can occupy usinggrid-areagrid-auto-flow- determines the direction items are flowed into the grid, defaults torowrepeat(n, size)- to create repeating columns/rows helper function- For intrinsic sizing we could use
auto-fitorauto-fillfornandminmax()for size
- For intrinsic sizing we could use
Sizing
auto- shy, take only space it needs for it contentfr- greedy, take all the available space, a fractionminmax(n, m)- specify the minimum and maximum size a track can takemin-content- intrinsic sizing by content, never smaller than content insidemax-content- intrinsic sizing by content, never larger than content inside
Alignment
First make distinction between items and content variants of the justify-* and align-* properties.
Items
Configures the alignment and spacing of the grid-items in relation with their content.
justify-items- defaultstretch, set the alignment property on therowaxis.align-items- defaultstretch, set the alignment property on thecolumnaxis.
Content
Configures the alignment and spacing of your grid tracks in relation with the grid container.
justify-content- defaultstretch, set the alignment property on therowaxis.align-content- defaultstretch, set the alignment property on thecolumnaxis.place-content- shorthand for setting align-content/justify-content, if only one is provided they are applied to both.
Grid items
Grid items are placed in order by the grid container. By default the grid-auto-flow is set to row and the grid-items are stretched to fill up the grid tracks it is in. Placement is based on starting and ending track index or number of tracks to span.
Placing
grid-column- specify the start / end column track number.grid-row- specify the start / end column track number.span n- instead of specify an end track number you can also specify the number of tracks to span.- For example:
grid-column: 2 / span 2, start at gridline 2 spanning 2 tracks
- For example:
grid-area- specify the name of the template area, without quotes. Name of the grid area is specified as part the grid container
Alignment
Setting alignment of the item within the cell it is in
justify-self- set the alignment property on therowaxis.align-self- set the alignment property on thecolumnaxis.place-content- shorthand for setting align-self/justify-self, if only one is provided they are applied to both.