Grid

CSS Grid is a CSS layout system built for two dimensional layouts. That means you can control rows and columns together, which makes it perfect for things like card layouts, dashboards, and full page layouts.

To use Grid, you set a parent element’s display to grid. Then, you use grid properties to define the columns, rows, spacing, and how items are placed.

The Grid Container

The parent element that has display: grid is called the grid container. All of its direct children become grid items.

Rules for grid containers:

• Only the direct children are grid items

• You define columns and rows on the parent

• Grid items automatically flow into the grid cells

Use this HTML below for this tutorial page:

<div class="container"> <!-- Parent -->
  <div class="box" style="background-color: lightblue;">1</div> <!-- child -->
  <div class="box" style="background-color: lightgreen;">2</div> <!-- child -->
  <div class="box" style="background-color: pink;">3</div> <!-- child -->
  <div class="box" style="background-color: orange;">4</div> <!-- child -->
  <div class="box" style="background-color: plum;">5</div> <!-- child -->
  <div class="box" style="background-color: khaki;">6</div> <!-- child -->
</div>