CSS Grid Layout
What is a grid?
Grid container
.container {
display: grid;
}
or
.container {
display: inline-grid;
}
Grid tracks
.container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 20px 20px;
}
Grid tracks
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Grid tracks
Mixing flexible and absolute sizes
.container {
display: grid;
grid-template-columns: 100px 1fr 3fr;
}
Grid tracks
repeat()
grid-template-columns: 1fr 1fr 1fr
<=>
grid-template-columns: repeat(3, 1fr);
Grid lines
Codepen
Grid lines
Short code
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
<=>
grid-column: 1 / 4;
grid-row: 1 / 3;
Grid cells
Grid areas
Gutters
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
row-gap: 20px;
}
Nesting grids
Codepen
Conclusion
That's it, you are up and running with Grid! Let's recap essential steps:
- Create a container element with display: grid;
- Use the grid-template-columns and grid-template-rows properties;
- Place child elements within the container;
- Use the grid-gap properties;