Grid

A CSS layout system that provides a two-dimensional grid-based layout with rows and columns, making it easier to design complex responsive web layouts.

Overview

CSS Grid Layout is a powerful layout system that allows you to create complex layouts in both dimensions (rows and columns) simultaneously. It divides a page into major regions and defines the relationship between parts of an HTML control in terms of size, position, and layer.

Example

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

.item {
  grid-column: span 2;
}

Key Points

  • Two-dimensional layout system
  • Define rows and columns explicitly
  • Items can span multiple rows/columns
  • Great for page layouts and complex UIs
  • Supports named grid areas

Learn More