DEV Community

Alex Chen
Alex Chen

Posted on

CSS Grid: The Visual Guide to Layout Mastery

#css #webdev #frontend #tutorial

CSS Grid: The Visual Guide to Layout Mastery

Flexbox is for 1D layouts. Grid is for 2D. Here's how to master it.

The Basics 

.container {
  display: grid;
}
Enter fullscreen mode Exit fullscreen mode

Defining the Grid 

/* Explicit grid definition */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;     /* 3 columns */
  grid-template-rows: auto 1fr auto;           /* 3 rows */
}

/* Using repeat() */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);       /* 3 equal columns */
  grid-template-columns: repeat(4, minmax(200px, 1fr)); /* Min 200px each */
}

/* Auto-fill (responsive!) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
/* Automatically creates as many 250px+ columns as fit */
Enter fullscreen mode Exit fullscreen mode

Gap (Spacing) 

.grid {
  gap: 1rem;            /* Row + column gap */
  row-gap: 0.5rem;      /* Row gap only */
  column-gap: 1.5rem;   /* Column gap only */
}
Enter fullscreen mode Exit fullscreen mode

Placing Items 

/* Method 1: Named areas (most readable) */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main   ads"
    "footer footer footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

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

/* Method 2: Line numbers */
.item {
  grid-column: 2 / 4;    /* Start at line 2, end at line 4 */
  grid-row: 1 / 3;       /* Start at row line 1, end at row line 3 */
}

/* Method 3: Span */
.wide-item {
  grid-column: span 2;   /* Span 2 columns */
  grid-row: span 2;      /* Span 2 rows */
}
Enter fullscreen mode Exit fullscreen mode

Alignment 

/* Container-level alignment */
.grid {
  justify-items: start | center | end | stretch;  /* Horizontal within cell */
  align-items: start | center | end | stretch;    /* Vertical within cell */
  justify-content: start | center | end | space-between | space-around | space-evenly;
  align-content: start | center | end | space-between | space-around | space-evenly;
}

/* Item-level override */
.specific-item {
  justify-self: center;
  align-self: end;
}
Enter fullscreen mode Exit fullscreen mode

Common Layouts

Dashboard Grid 

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

.card {
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}
/* Cards automatically reflow based on available width */
Enter fullscreen mode Exit fullscreen mode

Holy Grail (Header + Sidebar + Main + Footer) 

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}
Enter fullscreen mode Exit fullscreen mode

Gallery / Masonry-like 

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.gallery .item:nth-child(5n+1) {
  grid-column: span 2; /* Every 5th item is wider */
  grid-row: span 2;
}
Enter fullscreen mode Exit fullscreen mode

Form Layout 

.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 0.5rem;
  max-width: 500px;
}

.form-grid label {
  text-align: right;
  padding-top: 0.5rem;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  grid-column: 2;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

Grid vs Flexbox: When to Use Which

Scenario Use
Component layout (nav items, card content) Flexbox
Page layout (header/sidebar/main/footer) Grid
One-dimensional alignment (row or column) Flexbox
Two-dimensional alignment (rows AND columns) Grid
Content-first sizing (content determines size) Flexbox
Layout-first sizing (grid defines sizes) Grid
Centering one element Either (grid is simpler)

Quick Reference

Property Values Default
display grid, inline-grid —
grid-template-columns length, fr, repeat(), auto-fill/fit none
grid-template-rows length, fr, repeat() none
grid-template-areas named area strings none
gap length 0
justify-items stretch, start, center, end stretch
align-items stretch, start, center, end stretch
justify-content start, center, end, space-* stretch
align-content start, center, end, space-* stretch
grid-column start/end, span N auto
grid-row start/end, span N auto
place-items shorthand for align-items + justify-items —

What's your favorite Grid trick? Share it below!

Follow @armorbreak for more CSS content.

Top comments (0)