5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

container

display

Establishes a new grid formatting context for

children.

display: grid;

display: inline-grid;

display: subgrid;

grid-template

Defines the rows and columns of the grid.

grid-template-columns: 12px 12px 12px;

grid-template-rows: 12px 12px 12px;

grid-template-columns: repeat(3, 12px);

grid-template-rows: repeat(3, auto);

grid-template-columns: 8px auto 8px;

grid-template-rows: 8px auto 12px;

grid-template-columns: 22% 22% auto;

grid-template-rows: 22% auto 22%;

https://grid.malven.co 1/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

grid-gap

Specifies the size of column and row gutters.

grid-row-gap: 1px;
grid-column-gap: 9px;

grid-gap: 1px 9px;

grid-gap: 6px;

justify-items

Aligns content in a grid item along the row

axis.

justify-items: start;

justify-items: end;

justify-items: center;

justify-items: stretch; (default)

https://grid.malven.co 2/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

align-items

Aligns content in a grid item along the column

axis.

align-items: start;

align-items: end;

align-items: center;

align-items: stretch; (default)

justify-content

Justifies all grid content on row axis when

total grid size is smaller than container.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: stretch;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

https://grid.malven.co 3/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

align-content

Justifies all grid content on column axis when

total grid size is smaller than container.

align-content: start;

align-content: end;

align-content: center;

align-content: stretch;

align-content: space-around;

align-content: space-between;

align-content: space-evenly;

grid-auto-flow

Algorithm for automatically placing grid items

that aren't explictly placed.

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow: dense;

https://grid.malven.co 4/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

children

grid-column

Determines an items column-based location

within the grid.

grid-column-start: 1;
grid-column-end: 3;

grid-column-start: span 3;

grid-column-start: 2;
grid-column-end: 4;

grid-column: 2 / 3

grid-column: 2 / span 2

grid-row

Determines an items row-based location within

the grid.

grid-row-start: 1;
grid-row-end: 3;

grid-row-start: span 3;

grid-row-start: 2;
grid-row-end: 4;

grid-row: 1 / 3;

grid-row: 1 / span 3;

https://grid.malven.co 5/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

grid-row + grid-column

Combining grid rows with grid columns.

grid-row: 1 / span 2;
grid-column: 1 / span 2;

grid-row: 2 / span 2;
grid-column: 2 / span 2;

justify-self

Aligns content for a specific grid item along

the row axis.

justify-self: start;

justify-self: end;

justify-self: center;

justify-self: stretch; (default)

https://grid.malven.co 6/7
5/28/24, 4:59 PM GRID: A simple visual cheatsheet for CSS Grid Layout

align-self

Aligns content for a specific grid item along

the column axis.

align-self: start;

align-self: end;

align-self: center;

align-self: stretch; (default)

GRID was created by Malven Co. an interactive design + development shop.

Want more like this? Check out FLEX

https://grid.malven.co 7/7