Grid: Basics and Item Positioning

CSS Grid is a modern layout system that we can use when laying out web pages.

It’s often compared to Flexbox. While they’re both excellent systems for working with complex layouts, there’s one major difference. CSS Grid works in two dimensions (rows and columns), while Flexbox only works in a single dimension (rows or columns).

If you want your layout to work in both rows and columns, then Flexbox will likely suit your needs. When working in both dimensions, it’s time to use CSS Grid!

CSS Grid basics

We activate the grid layout by making an HTML element a grid-container as demonstrated in the code below:

<div class="grid-container">
  <!-- content -->
</div>

In our CSS, we can simply set the display property to grid:

.grid-container {
  display: grid;
}

Grid layouts must include a parent element and one or more child elements. Several properties can be applied to the container and child elements (each item in the grid-container). Throughout this lesson, we’ll work with the following code: