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%;
Specifies the size of column and row gutters.
grid-row-gap: 1px;
grid-column-gap: 9px;
grid-gap: 1px 9px;
grid-gap: 6px;
Aligns content in a grid item along the row axis.
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch; (default)
Aligns content in a grid item along the column axis.
align-items: start;
align-items: end;
align-items: center;
align-items: stretch; (default)
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;
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;
Algorithm for automatically placing grid items that aren't explictly placed.
grid-auto-flow: row;
grid-auto-flow: column;
Determines an items column-based location within the grid.
grid-column-start: 1;
grid-column-end: 3;
grid-column-start: 1;
grid-column-end: 4;
grid-column-start: 2;
grid-column-end: 4;
grid-column-start: 2;
grid-column-end: 3;
grid-column-start: 3;
grid-column-end: 4;
Determines an items row-based location within the grid.
grid-row-start: 1;
grid-row-end: 3;
grid-row-start: 1;
grid-row-end: 4;
grid-row-start: 2;
grid-row-end: 4;
grid-row-start: 2;
grid-row-end: 3;
grid-row-start: 3;
grid-row-end: 4;
Combining grid rows with grid columns.
grid-row: 1 / 3;
grid-column: 1 / 3;
grid-row: 2 / 4;
grid-column: 2 / 4;
Aligns content for a specific grid item along the row axis.
justify-self: start;
justify-self: end;
justify-self: center;
justify-self: stretch; (default)
Aligns content for a specific grid item along the column axis.
align-self: start;
align-self: end;
align-self: center;
align-self: stretch; (default)