CSS Grid

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%; 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) 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; 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; 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; 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) 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)