CSS Grid

Grid container

Setting display: grid creates a grid container and all direct children become grid items. The items are by default placed in rows and span the entire width of the container. Since we have not specified how many columns the grid should have, it defaults to a single column.

Code example

Copy
<div class="wrapper">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

Copy
.wrapper {
  display: grid;
}

red

green

blue