skip navigation

Grid reference

24 Feb 2019 in the articles section Updated: 6 Mar 2026

Tagged in: layout , grid , reference
Grouped in: grid , layout

Here are all the different grid declarations:

Properties for grid containers

property	description
`display:grid` `display:inline-grid`	Essential first property. `inline-grid` means the container behaves like `inline-block`. It will only stretch out as wide as it needs to
`grid-template-columns` `grid-template-rows` `grid-template`	`grid-template` is the shorthand combining both rows and columns. Rows are defined first the a forward slash / separates the columns. `grid-template: 80vw 10vw auto / repeat(8, 1fr);` `grid-template-columns: max-content auto;` First col is the width of the biggest element. Second col automatically fills the rest of the space.
`grid-template-areas`	Define the grid using named blocks. Grid items can then be mapped to these areas using the `grid-area` property. `grid-template-areas:` `"header header"` `"sidebar content"` `"footer footer";` No commas but note the use of quotes.
`justify-content`	`start` `center` `end` `space-around` `space-between` `space-evenly` This only has an effect when the width of all the grid-columns combined is less than the width of the container.
`justify-items`	`stretch` the default `start` `center` `end` This aligns items horizontally (assuming `grid-auto-flow: row;`) within their grid column. This is `justify-self` for every grid item.
`align-items`	`stretch` the default `start` `center` `end` This aligns items vertically within their grid row. This is `align-self` for every grid item.
`align-content`	Similar to above but for vertical alignment. Same values as for `justify-content`: `start` `center` `end` `space-around` `space-between` `space-evenly` NB. This will only work if the height of the grid container is larger than the sum of of the height of the grid rows. So this implies the grid container will have it’s height defined AND the height of the grid items is less than this height.
`grid-auto-columns` `grid-auto-rows`	`auto` the default. Size of columns or rows is determined by the size of the container. `fit-content()` trys to fit all of the content in without wrapping but only up to the size defined in the brackets. It’s like `max-content` but with an upper limit to how far it can grow. `max-content` Sets the size of each column depending on the largest item in the column. A single sentence or paragraph will be as long as it can without a line break. `min-content` Sets the size of each column depending on the smallest item in the column. This could a longest single word or an image or any fixed-width (or height) object. `minmax(100px, 200px)` will go down to 100px or up to 200px. `1fr` will make the columns or rows the same size. However with some flexibility. They won’t shrink beyond the max size needed for an element inside.
`grid-auto-flow`	When grid items fall beyond the implicit grid new rows are created, the number of columns stays the same. This is the default value: `grid-auto-flow: row` `grid-auto-flow: column` does the opposite, so that new columns are added and the number of rows stay the same. This makes a grid layout similar to flexbox. Might want to combine with `grid-auto-columns: 1fr` to keep them the same width. `grid-auto-flow: dense` is probably the most useful. Grid items of of different sizes can cause some grid spaces to be empty. This setting tries to correct by changing the natural (html) order to fill up the empty spaces.

Properties for grid items

property	description
`align-self`	Aligns an item vertically in it’s grid area. The default is `stretch`. Other values are: `start`, `end` and `center`
`justify-self`	Aligns an item horizontally in it’s grid area. The default is `stretch`. Other values are: `start`, `end` and `center`
`place-self`	Combines align-self with justify-self taking two values (align-self first). The default values are: `stretch` `place-self: start center` puts the item top center.
`grid-column`	Defines the columns a grid item should span: `grid-column: span 3;` `grid-column: 1 / -1;` from the first track to last track `grid-column: 2 / span 2;` from the second track to the fourth track.
`grid-row`	Defines the rows a grid item should span: `grid-row: span 3;` `grid-row: 1 / -1;` from the first track to last track
`grid-area`	Used alongside `grid-template-areas`: `grid-area: header;` `grid-area: span 3;` from the first track to last track

This covers the most common usage. There are more property values. See MDN for a comprehensive list.

☝