Understanding CSS Grid

Introduction

CSS Grid is a powerful two-dimensional layout system that enables developers to create complex and responsive designs with concise code. Unlike Flexbox, which focuses on one-dimensional layouts (rows or columns), Grid handles both rows and columns simultaneously.

Creating Your First Grid

To start, define a container with display: grid; and specify columns:

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

Responsive Auto-Fit

Combine auto-fit with minmax() to make grids adapt:

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

This setup creates as many 200px columns as fit in the container, then wraps remaining items.