CSS Grid Layout

CSS Grid Layout

CSS Grid is a powerful two-dimensional layout system that allows you to create complex layouts with rows and columns. Unlike Flexbox (which is one-dimensional), Grid lets you control both rows and columns simultaneously.

Basic Grid Setup

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Key Properties

• grid-template-columns: Defines column sizes (e.g., 1fr 1fr, 200px auto, repeat(3, 1fr))
• grid-template-rows: Defines row sizes
• gap: Space between grid items
• grid-column: Span items across columns
• grid-row: Span items across rows

Example: 3-Column Layout

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