CSS Grid: A Complete Guide

Master CSS Grid layout with this comprehensive guide covering everything from basic to advanced techniques.

Gerrad Zhang

Wuhan, China

May 5, 2023

1 min read

Introduction to CSS Grid

CSS Grid Layout is a powerful system for creating two-dimensional layouts in CSS. It allows you to create complex layouts with ease and precision.

To create a grid container:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Items inside the grid container:

.item {
  grid-column: span 2;
  grid-row: 1 / 3;
}

.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}