CSS Grid

What is CSS Grid?

CSS Grid lets a parent create explicit rows and columns. Its direct children become grid items that can be placed, sized and aligned across those tracks.

.layout {
  display: grid;
}

Rows, columns and tracks

A grid track is the space between two grid lines. Columns are vertical tracks and rows are horizontal tracks.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr;
}

This creates three columns and two rows. Track sizes can use fixed, flexible or content-based values.

The fr unit

fr means a fraction of the available free space inside a grid container.

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
}

repeat()

repeat() keeps repeated track definitions short and readable.

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

This is equivalent to writing 1fr 1fr 1fr.

gap, row-gap and column-gap

Grid supports clean spacing between rows and columns.

.cards {
  display: grid;
  gap: 1rem;
}

.dashboard {
  display: grid;
  row-gap: 2rem;
  column-gap: 1rem;
}

minmax()

minmax() defines a minimum and maximum track size.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

minmax(0, 1fr) is useful when content might otherwise prevent a flexible track from shrinking enough.

Responsive Grid with auto-fit

For responsive card layouts, auto-fit and minmax() can create columns automatically based on available width.

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

auto-fit vs auto-fill

Both keywords create as many columns as fit. The key difference appears when there are fewer items than available tracks.

• auto-fit can collapse empty tracks so existing items stretch.
• auto-fill keeps the empty track slots in the grid.

Grid item placement

Items can be placed using grid line numbers.

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

.featured {
  grid-column: 1 / 3;
}

The featured item starts at column line 1 and ends at line 3, so it spans two columns.

Using span

span can express how many tracks an item should cover.

.wide-card {
  grid-column: span 2;
}

.tall-card {
  grid-row: span 2;
}

Grid template areas

Named grid areas can make larger page layouts easier to read.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Grid alignment

Grid can align items inside their cells and can align the whole grid within its container.

.grid {
  display: grid;
  align-items: center;
  justify-items: start;
}

.centered {
  place-items: center;
}

• justify-items — inline-axis alignment inside grid cells.
• align-items — block-axis alignment inside grid cells.
• place-items — shorthand for align-items + justify-items.

justify-content and align-content

When the grid itself is smaller than its container, content alignment properties control where the track group sits.

.grid {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 180px);
  justify-content: center;
}

Explicit vs implicit grid

Tracks declared with grid-template-columns or grid-template-rows are explicit. Extra tracks created automatically for additional items are implicit.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
}

grid-auto-rows controls the size of automatically created rows.

grid-auto-flow

grid-auto-flow controls how auto-placed items fill the grid.

.gallery {
  display: grid;
  grid-auto-flow: row;
}

dense can backfill gaps, but visual ordering may become different from source order, so use it carefully.

Flexbox vs Grid

• Flexbox: best when layout mainly follows one direction — row or column.
• Grid: best when rows and columns both matter.
• They are complementary; real projects often use Grid for page/card structure and Flexbox inside components.

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

.card-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

Grid and accessibility

• DOM/source order ko logical rakho.
• Visual placement ko reading order replace karne ke liye use mat karo.
• Responsive grids ko narrow viewport aur high zoom par test karo.
• Fixed track widths ki wajah se horizontal scrolling avoid karo where possible.
• Dense auto-placement ko carefully use karo.
• Text overflow aur long content ke saath cards test karo.

Best practices

• Simple two-dimensional layouts ke liye clear template columns define karo.
• Responsive cards ke liye auto-fit + minmax() pattern consider karo.
• Repeated spacing ke liye gap use karo.
• Meaningful large layouts me named areas readability improve kar sakte hain.
• Too many manual line placements se layout unnecessarily fragile mat banao.
• DevTools Grid overlay use karke lines, tracks and gaps inspect karo.

Common beginner mistakes

• Grid ko only columns system samajhna.
• Every card ko fixed pixel width dena and responsiveness break karna.
• fr ko viewport percentage samajhna.
• auto-fit and auto-fill ko same samajhna.
• Grid line numbers confuse karna.
• Visual reordering se DOM reading order mismatch karna.
• Flexbox aur Grid ko competitors samajhna instead of complementary tools.