Grid
The grid layout consists of parent container referred as grid container and its immediate children which are called grid items.
The Container
To create a grid container, just set the display property to grid. All of its immediate children will now be considered grid items.
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
"green green green"
"yellow red blue"
"orange orange blue";
}
#green {
grid-area: green;
}
#yellow {
grid-area: yellow;
}
#orange {
grid-area: orange;
}
#red {
grid-area: red;
}
#blue {
grid-area: blue;
}Grids are not only for the top-level layout. They can be created to layout sub-sections of the page, as in the yellow and red section content.
#yellow ul, #red ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
<body>
<section id="green">
<p>GREEN</p>
</section>
<section id="yellow">
<p>YELLOW</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
<section id="orange">
<p>ORANGE</p>
</section>
<section id="red">
<p>RED</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</section>
<section id="blue">
<p>BLUE</p>
</section>
</body>grid-template-columns, grid-template-rows
Defines the columns and rows of the grid with a space-separated list of values. The values can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit).
grid-template-areas
Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.
column-gap, row-gap, grid-gap
Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.
Resources
Last updated
Was this helpful?