I've compiled this cheat sheet so I can quickly reference grid syntax without needing to look all over the internet. Hopefully you'll find it useful also!
Container
Setting Columns & Rows
Set container as grid
- display: grid;
Define number/size of columns and rows. Each value represents a new column or row.
- grid-template-columns: 10px 15px;
- grid-template-rows: repeat(3, 1fr);
- grid-template: row value / column value;
Set size of space between column and/or row
- grid-row-gap: 1px;
- grid-column-gap: 1px;
- gap: 1px;
Define size of newly added columns and/or rows that weren't explicitly defined with grid-template
- grid-auto-rows: 10px;
- grid-auto-column: 1fr;
Responsive design
min(value, value) and max(value, value) returns the minimum and maximum value, respectively, within the bracket.
- grid-template-rows: repeat(3, min(200px, 50%)); sets the maximum height for the row to 200px, otherwise it'll be 50% of parent space.
- grid-template-columns: repeat(3, max(120px, 20%)); sets the minimum width for column to 120px, otherwise it'll be 20% of parent space.
minmax(min value, max value) is used to set both minimum and maximum size of grid. The item will not shrink or grow pass set value.
- grid-template-rows: repeat(2, minmax(100px, 200px));
clamp(min size, ideal size, max size) the ideal size value should be a relative value. The item will grow and shrink up to set boundary values.
- grid-template-columns: repeat(3, clamp(100px, 80%, 200px)); the column width will remain at 80% until it reaches width of 100px or 200px.
auto-fit and auto-fill are used with the repeat function. These functions will fit as many rows/columns into parent container using the minimum size. It will then resize the space up to the maximum value stated.
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); If the container is 1000px wide it will fit 3 columns, if it changes to 700px it will automatically resize to 2 columns.
The difference between auto-fit and auto-fill is that auto-fit will fit the columns into the available space while auto-fill will add new empty columns and revert previous columns to it's minimum size.
Content Alignment
Align content within grid item along horizontal (justify) or vertical (align) axis. Possible values: start, end, center, stretch (default).
- justify-items: center;
- align-items: end;
Align all grid content along horizontal (justify) or vertical (align) axis if there is extra space in container. Possible values: start, end, center, stretch, space-around, space-between, space evenly.
justify-content: start;
align-content: end;
Children
Specify starting and ending of specific child element. Value span 2 can be used instead of identifying column/row number.
- grid-column-start: 1;
- grid-column-end: 3;
- grid-column: 1 / 3;
- grid-row-start: 1;
- grid-row-end: 3;
- grid-row: 1 / 3;
This property can be used to combine grid-column and grid-row into one line
- grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; e.g. grid-area: 1 / 1 / 3 / 3;
Align specific child element within it's grid along horizontal (justify) or vertical (align) axis. Possible values: start, end, center, stretch (default).
- justify-self: start;
- align-self: start;