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