CSS Grid is a two-dimensional grid-based layout.
- user interfaces;
- overall layout on website.
Grid container contains grid items, which are its direct children.
Grid is created by the
display: grid;
command on the grid container.
Properties for Grid container
and Grid items
:
Grid container | Grid items |
---|---|
display | grid-column-start |
grid-template-columns | grid-column-end |
grid-template-rows | grid-row-start |
grid-template-areas | grid-row-end |
grid-template | grid-column |
column-gap | grid-row |
row-gap | grid-area |
gap | justify-self |
justify-items | align-self |
align-items | place-self |
place-items | |
justify-content | |
align-content | |
place-content | |
grid-auto-columns | |
grid-auto-rows | |
grid-auto-flow | |
grid |
Divides grid into columns or rows
fr
means fractional unit. They can be defined as portion of the remaining space.
We can divide the space into four equal parts - each has a width equal to 1fr, or 25% of the width of the container. For 1fr 1fr 1fr 1fr
it is:
The notation 1fr 3fr
will divide the space into two containers first having 75% width, the second 25%:
1fr 2fr 1fr
will divide the space into 25%-50%-25%:
Different units can be used - all records below give the same result on grid container with width: 1000px
(They will be identical if we don't use gap and padding in our container!):
grid-template-columns: 200px 400px 400px;
grid-template-columns: 20% 40% 40%;
grid-template-columns: 1fr 2fr 2fr;
Here we divide the grid into three columns of equal width:
grid-template-columns: repeat(3, 1fr);
It works analogously to grid-template-columns
, it divides the grid into rows.
Adds gaps between grid elements.
We can add gaps between columns
column-gap: 5px;
gaps between rows
row-gap: 5px;
or between all elements:
gap: 5px;
By default it's gap: 0px
.
If we have a grid divided into columns, the height of each row is set according to the height of the largest element in that row.
To set the same height for each row, you can use:
grid-auto-rows: 100px;
The disadvantage is that there is little flexibility.
However, you can use the minmax function, which allows you to set lower and upper height limits. In the following notation, each line will be at least height: 100px
. If any row has an element that is over 100px
, the height of the row will increase (but only this row, others stay with height: 100px
).
grid-auto-rows: minmax(100px, auto);
Decides the behavior of grid items in a row.
Default: all stretch has the same width.
align-items: stretch;
However, you can keep each item's height set on a per-item basis, and then decide whether to align these items to the top (start
), middle (center
) or bottom (end
) of the row.
align-items: start;
align-items: center;
align-items: end;
Decides the behavior of grid items in a column.
Default:
justify-content: start;
justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-between;
Set on the element whose position you want to change.
Vertical repositioning.
Default: align-self: start
.item:nth-of-type(2) {
height: 100px;
width: 100px;
align-self: center;
}
align-self: start;
align-self: end;
Horizontal repositioning.
Default: justify-self: start
.item:nth-of-type(2) {
height: 100px;
width: 100px;
justify-self: center;
}
justify-self: start;
justify-self: end;
In the developer's tools, under Elements->Layout, select the following settings:
This way you will see the line number on the grid container:
You can now easily set the number of grid boxes for each element with grid-column
or grid-row
.
Horizontal.
The following three ways are equivalent.
.item:nth-of-type(1) {
background-color: rgb(93, 66, 117);
grid-column-start: 1;
grid-column-end: 3;
}
.item:nth-of-type(1) {
background-color: rgb(93, 66, 117);
grid-column: 1 / 3;
}
.item:nth-of-type(1) {
background-color: rgb(93, 66, 117);
grid-column: 1 / span 2;
}
number1 / span number2
number1
determines the beginning of the element, and number2
tells how many cells we stretch it into.
Vertical.
.item:nth-of-type(3) {
background-color: rgb(70, 117, 66);
grid-row-start: 2;
grid-row-end: 4;
}
.item:nth-of-type(3) {
background-color: rgb(70, 117, 66);
grid-row: 2 / 4;
}
.item:nth-of-type(3) {
background-color: rgb(70, 117, 66);
grid-row: 2 / span 2;
}
Note that element 4 "jumped" into place of element 3.
If we display our grid on devices with smaller screen widths, it usually becomes unreadable.
To prevent this we can use media query.
@media (max-width: 500px) {
.container {
grid-template-columns: 1fr;
}
}
Another way is to use a wrapper on the container when defining the grid template (fluid columns).
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
This notation means that there are to be as many cells as will fit in the row, but each cell must be at least 200px wide.
The effect on different resolutions looks like this:
In this solution, you have to be careful with the combined fields (grid-column
/ grid-row
) and their scaling behavior!