CS49

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

CSS Grid

Introduction

To organize the different elements in a web page, websites often follow a specific layout. Many of them use the CSS Grid Layout, which uses rows and columns to make it easier for designing. In this lesson, you will learn how to use this property so you can create a basic layout for your website!

The Basics

A grid layout consists of a parent element, with one or more child elements. To display a grid, use this syntax:

.grid-container {
  display: grid;
}

To add a grid item, use this syntax:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

Grid items have vertical lines called columns, horizontal lines called rows, and spaces between each column and row called gaps. To adjust the gap size for these properties, use any of these code segments:

column-gap:

.grid-container {
  display: grid;
  column-gap: 50px;
}

row-gap:

.grid-container {
  display: grid;
  row-gap: 50px;
}

gap:

The gap property is a shorthand property for the row-gap and the column-gap properties.

.grid-container {
  display: grid;
  gap: 50px 100px;
}

Conclusion

Believe it or not, this is just the beginning of CSS Grid Layout!