CSS Grid Cheat Sheet

CSS Grid is a powerful tool for creating responsive layouts on the web. With CSS Grid, you can easily create complex, multi-column layouts that adapt to different screen sizes and device types. The basic concept of CSS Grid is to define a grid container, and then place elements within that container on grid tracks or grid areas.

To help you get started with CSS Grid, we’ve created a comprehensive cheat sheet that covers all the essential properties and features of CSS Grid. This cheat sheet is divided into several sections based on the different themes of CSS Grid.

Cheat Sheet

​​Grid Container Properties

Property	Description
display: grid;	Defines the element as a grid container
grid-template-columns: value;	Defines the width of each column in the grid
grid-template-rows: value;	Defines the height of each row in the grid
grid-template-areas: value;	Defines a grid template using named grid areas
grid-template: columns / rows;	Shorthand for grid-template-columns and grid-template-rows
grid-column-gap: value;	Defines the size of the gap between columns in the grid
grid-row-gap: value;	Defines the size of the gap between rows in the grid
grid-gap: row-gap column-gap;	Shorthand for grid-row-gap and grid-column-gap
justify-items: value;	Aligns grid items along the horizontal grid axis
align-items: value;	Aligns grid items along the vertical grid axis
place-items: align-items justify-items;	Shorthand for align-items and justify-items
justify-content: value;	Aligns the grid along the horizontal axis
align-content: value;	Aligns the grid along the vertical axis
place-content: align-content justify-content;	Shorthand for align-content and justify-content
grid-auto-columns: value;	Defines the width of columns not explicitly set in the grid template
grid-auto-rows: value;	Defines the height of rows not explicitly set in the grid template
grid-auto-flow: value;	Controls how the grid auto-places items in the grid container
grid: grid-template-rows / grid-template-columns;	Shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow

Grid Item Properties

Property	Description
grid-column-start: value;	Specifies the starting grid line for an item’s grid column
grid-column-end: value;	Specifies the ending grid line for an item’s grid column
grid-row-start: value;	Specifies the starting grid line for an item’s grid row
grid-row-end: value;	Specifies the ending grid line for an item’s grid row
grid-column: start / end;	Shorthand for grid-column-start and grid-column-end
grid-row: start / end;	Shorthand for grid-row-start and grid-row-end
grid-area: value;	Specifies the name of the grid area to place the item
justify-self: value;	Aligns the item along the horizontal grid axis within its grid cell
align-self: value;	Aligns the item along the vertical grid axis within its grid cell
place-self: align-self justify-self;	Shorthand for align-self and justify-self

Grid Line Names

Property	Description
grid-template-columns: [column-name] value [column-name] value;	Defines a named grid line for each column in the grid
grid-template-rows: [row-name] value [row-name] value;	Defines a named grid line for each row in the grid
grid-column-start: [column-name];	Specifies the starting grid line for an item’s grid column using a named grid line
grid-column-end: [column-name];	Specifies the ending grid line for an item’s grid column using a named grid line
grid-row-start: [row-name];	Specifies the starting grid line for an item’s grid row using a named grid line
grid-row-end: [row-name];	Specifies the ending grid line for an item’s grid row using a named grid line

Grid Sizing and Alignment

Property	Description
grid-template-columns: repeat(auto-fit, minmax(value, value));	Creates a responsive grid that adapts to the size of the container
grid-template-columns: repeat(auto-fill, minmax(value, value));	Creates a grid with a fixed number of columns, but responsive column width
grid-template-columns: fit-content(value);	Defines the width of a grid column based on the size of its contents
grid-template-rows: fit-content(value);	Defines the height of a grid row based on the size of its contents
justify-items: stretch;	Stretches the grid items to fill the grid cell
align-items: stretch;	Stretches the grid items to fill the grid cell
justify-items: center;	Centers the grid items along the horizontal axis within the grid cell
align-items: center;	Centers the grid items along the vertical axis within the grid cell

Grid Functions

Property	Description
grid-area: row-start / column-start / row-end / column-end;	Defines a grid area using the grid lines or named grid lines
grid-template: repeat(value, value) / repeat(value, value);	Creates a grid template with a fixed number of rows and columns
grid-template: subgrid;	Creates a grid template that inherits its row and column sizes from its parent grid container
grid-template-columns: repeat(value, [column-name value] …);	Creates a grid template with named grid lines for each column
grid-template-rows: repeat(value, [row-name value] …);	Creates a grid template with named grid lines for each row
grid-area: [area-name];	Defines a grid area using a named grid area

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout