CSS Grid

CSS Grid is a two-dimensional layout system that lets you design rows and columns simultaneously. Unlike Flexbox (which works in one dimension), Grid handles both axes, making it perfect for complex layouts like dashboards, galleries, and full-page structures.

Why CSS Grid?

  • Works in two dimensions (rows + columns).
  • Simplifies layouts compared to floats, tables, or clearfix hacks.
  • Fully supported in modern browsers (except IE).
  • Complements Flexbox — they’re not competitors but collaborators.

Activating Grid

Apply display: grid to a container:

Code Block Loading...

Defining Rows and Columns

Use grid-template-columns and grid-template-rows:

Code Block Loading...

Creates 4 columns (200px each) and 2 rows (300px each).

Automatic Dimensions

Use auto for flexible rows:

Code Block Loading...

Perfect for header-content-footer layouts.

Gaps Between Cells

Add spacing with grid-gap:

Code Block Loading...

Spanning Items

Items can span multiple rows/columns:

Code Block Loading...

Fractions, Percentages, and repeat()

  • Fractions (fr) divide space proportionally.
  • repeat() simplifies repetitive layouts.

Code Block Loading...

Creates 4 equal columns.

minmax()

Set flexible min/max sizes:

Code Block Loading...

Sidebar never shrinks below 200px.

Template Areas

Name areas for semantic layouts:

Code Block Loading...

Interactive Playground

Key Takeaways

  • CSS Grid is two-dimensional (rows + columns).
  • Use fr, repeat(), and minmax() for flexible layouts.
  • grid-template-areas makes layouts semantic and easy to read.
  • Combine Grid with Flexbox for modern responsive designs.