CS49

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

— Merlin, The Coder

CSS Grid

Introduction

In order to organize the different elements in a web page, websites often follow a specific layout. Many of them utilize the CSS Grid Layout which uses rows and columns to make it easier for designing. In this lesson, you are going to 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 you will use this syntax:

.grid-container {
  display: grid;
}

To add a grid-item you will 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, you can 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!