Seb's Cheatsheet
Grid Box - Cheatsheet
Container - Defining the grid
Defines Grid Container
.container {
display: grid;
}
.container {
display: inline-grid;
}
Sets the gaps (gutters) between rows and columns
.container {
gap: 10px 20px;
}
.container {
row-gap: 20px
column-gap: 10px;
column-gap: 10px;
}
Defines size of grid columns/rows.
.container {
grid-template-columns: 30px 60px 30px;
grid-template-rows: 30px 60px 30px;
grid-template-rows: 30px 60px 30px;
}
.container {
grid-template-columns: repeat(3, 30px);
grid-template-rows: repeat(3, 30px);
grid-template-rows: repeat(3, 30px);
}
.container {
grid-template-columns: 1rem 1rem 2rem;
grid-template-rows: 1rem 1rem 2rem;
grid-template-rows: 1rem 1rem 2rem;
}
Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
.container {
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
Setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
.container {
grid-template: 50px 50px 50px 50px;
}
Aligns grid items along the inline (row) axis.
.container {
justify-items: start;
}
.container {
justify-items: end;
}
.container {
justify-items: center;
}
.container {
justify-items: stretch;
}
Aligns grid items along the block (column) axis
.container {
align-items: start;
}
.container {
align-items: end;
}
.container {
align-items: center;
}
.container {
align-items: stretch;
}
Set align-items and justify-items properties in a single declaration.
.container {
place-items: start / start;
}
.container {
place-items: end / end;
}
.container {
place-items: center / center;
}
.container {
place-items: stretch / stretch;
}
Align of the whole grid within the grid container along the inline (row) axis.
.container {
justify-content: start;
}
.container {
justify-content: end;
}
.container {
justify-content: center;
}
.container {
justify-content: stretch;
}
.container {
justify-content: space-around;
}
.container {
justify-content: space-between;
}
.container {
justify-content: space-evenly;
}
Align of the whole grid within the grid container along the block (column) axis.
.container {
align-content: start;
}
.container {
align-content: end;
}
.container {
align-content: center;
}
.container {
align-content: stretch;
}
.container {
align-content: space-around;
}
.container {
align-content: space-between;
}
.container {
align-content: space-evenly;
}
Set the align-content and justify-content properties in a single declaration.
.container {
place-content: start / start;
}
.container {
place-content: end / end;
}
.container {
place-content: center / center;
}
.container {
place-content: stretch / stretch;
}
Size of any auto-generated grid tracks (when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid).
.container {
grid-auto-columns: 60px;
}
.container {
grid-auto-rows: 60px;
}
Defines the order in which items are placed in the grid.
.container {
grid-auto-flow: row;
}
.container {
grid-auto-flow: column;
}
.container {
grid-auto-flow: dense;
}
Children - Placing Grid Items
Defines the item’s location within the grid.
.container {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-start: 4;
grid-column-end: 4;
grid-row-start: 2;
grid-row-start: 4;
}
.container {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-start: span 1;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-start: span 1;
}
Combines grid-column-start + grid-column-end, and grid-row-start + grid-row-end in one command.
.container {
grid-column: 2 / 4;
grid-row: 2 / 4;
grid-row: 2 / 4;
}
.container {
grid-column: 1 / span 2;
grid-row: 2 / span 1;
grid-row: 2 / span 1;
}
Combines Grid-Column & Grid-Row in single shorthand.
.container {
grid-area: 2 / 4 / 2 / 4;
}
.container {
grid-area: 1 / span 2 / 2 / span 1;
}
Aligns a grid item inside a cell along the row axis
.container {
justify-self: start;
}
.container {
justify-self: end;
}
.container {
justify-self: center;
}
.container {
justify-self: stretch;
}
Aligns a grid item inside a cell along the column axis.
.container {
align-self: start;
}
.container {
align-self: end;
}
.container {
align-self: center;
}
.container {
align-self: stretch;
}
Sets both the align-self and justify-self properties in a single declaration.
.container {
place-self: center;
}
.container {
place-self: center stretch;
}
.container {
place-self: start end;
}
.container {
place-self: end center;
}