Table of contents
- Placing children inside a grid container using line numbers
- Grid areas
- Automatic flow
- Spacing and alignment
Placing children inside a grid container using line numbers
We can position children inside a grid container by setting grid lines between which they must be. For this, we use grid-row-start
, grid-row-end
, grid-column-start
and grid-column-end
with the following values:
-
auto
(default) - indicates auto-placing so that child will occupy one track width; -
grid line number
- counting lines start with1
and ends with-1
; -
span
number
- occupiesnumber
of cells.
.grid {
display: grid;
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 1fr 100px;
}
header {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: span 3;
}
footer {
grid-row-start: 3;
grid-row-end: -1;
grid-column-start: 1;
grid-column-end: -1;
}
We can position children also using grid-row
and grid-column
properties:
header {
grid-row: 1 / 2;
grid-column: 1 / span 3;
}
footer {
grid-row: 3 / -1;
grid-column: 1 / -1;
}
Grid areas
Grid area is a rectangle consisting of grid cells (one or more). We can divide our grid into areas and then put every child into the specific area. To name areas, we use grid-template-areas
, where every quotation represents a row and every word a cell. If we want empty space in the grid, we can use one or more dots for the grid area name.
.grid {
grid-template-areas:
"header header header"
"... main ads"
"footer footer footer";
}
After we set names for grid areas, we can assign them to children:
header {
grid-area: header;
}
main {
grid-area: main;
}
aside {
grid-area: ads;
}
footer {
grid-area: footer;
}
Defining areas using grid line numbers
It's not necessary to set names for areas; we can use grid line numbers for the property grid-area: row-start / column-start / row-end / column-end
:
header {
grid-area: 1 / 1 / 2 / 4;
}
footer {
grid-area: 3 / 1 / -1 / -1;
}
Counting starts with
1
. We can refer to the last number as either-1
or the actual last count (in this case, it's4
).
grid shorthand property
We can use the grid
shorthand property to set rows and columns like this: grid: rows / columns
.
grid: 100px 1fr 100px / 150px 1fr 150px;
We can also add areas to this shorthand:
grid:
"header header header" 100px
"... main ads" 1fr
"footer footer footer" 100px
/ 150px 1fr 150px;
For complicated grid structure, it's better to stick to separate css properties for a clearer structure.
Automatic creation of rows and columns
If a number of children exceeds a number of cells or the position of the child is outside of the manually created grid, the browser generates additional grid row or column to accommodate them. By default, this newly created row or column has a size set to auto
.
If we want to give a definite size to this automatically created row or column, we can use grid-auto-rows
or grid-auto-columns
properties.
.grid {
grid: 150px 150px / 1fr 1fr;
grid-auto-rows: 100px;
}
Automatic flow
We can specify the flow of auto-placing children by using grid-auto-flow
. The values that grid-auto-flow
can get:
-
row
(default) - children fill each row, and new rows are created if needed; -
column
- children fill each column alternately, and new columns are created if needed; -
dense
- allows to fill "holes" in the grid by reordering children:
.grid {
display: grid;
grid-template-columns: 200px 30px 30px;
grid-auto-rows: 200px;
grid-auto-flow: dense;
& > :nth-child(2) {
grid-column: span 3;
}
}
Spacing and alignment
We can set space between grid tracks using row-gap
, column-gap
and gap
.
Alignment in grid uses the same vocabulary as in flexbox.
Aligning individual items
We can align children inside cells using justify-self (horizontal axis) and align-self (vertical axis).
start
end
center
left
right
-
self-start
- depends on the writing direction of the child -
self-end
- depends on the writing direction of the child stretch
-
normal
-stretch
for children without specified sizes andstart
for others -
auto
(default) - looks atjustify-items
oralign-items
correspondingly
Aligning all items at once
To do that we can use properties: justify-items and align-items with possible values:
start
end
center
left
right
self-start
self-end
stretch
-
normal
(default)
Aligning tracks
When your columns or rows don't fill the entire container, you can align them using justify-content and align-content properties with values:
-
start
(default) end
left
right
center
stretch
space-around
space-between
-
space-evenly
.grid {
grid-template-columns: repeat(4, 100px);
grid-auto-rows: auto;
justify-content: space-between;
align-content: stretch;
}
sretch
value works only if column width or row height is set toauto
.
Top comments (0)