CSS Grid Layout: Complete Guide

CSS Grid Layout: Complete Guide

Master CSS Grid layout system for creating complex, responsive web layouts.

Basic Grid Setup

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

Grid Properties

grid-template-columns

grid-template-columns: 200px 1fr 200px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

grid-template-rows

grid-template-rows: 100px auto 100px;

gap

gap: 1rem;
row-gap: 1rem;
column-gap: 1rem;

Grid Item Placement

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

Responsive Grid

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

Grid vs Flexbox

• Grid: Two-dimensional layout (rows and columns)
• Flexbox: One-dimensional layout (row or column)
• Use Grid for overall page layout
• Use Flexbox for component-level layout