DEV Community

Alex Chen
Alex Chen

Posted on

CSS Grid: Complete Guide to Modern Layouts

#css #webdev #frontend #tutorial

CSS Grid: Complete Guide to Modern Layouts

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

The Basics 

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

That's your container. Now define the structure:

Defining Rows and Columns 

.grid {
  display: grid;

  /* Columns */
  grid-template-columns: 200px 1fr 200px;
  /* Three columns: fixed, flexible, fixed */

  /* Rows */
  grid-template-rows: auto 1fr auto;
  /* Header (content height), main (fills), footer (content height) */

  /* Gap between items */
  gap: 1rem;
  row-gap: 0.5rem;
  column-gap: 1rem;
}
Enter fullscreen mode Exit fullscreen mode 
grid-template-columns: 200px 1fr 200px;

┌────────┬──────────────┬────────┐
│ 200px  │   1fr        │ 200px  │
│ Fixed  │   Flexible   │ Fixed  │
└────────┴──────────────┴────────┘
Enter fullscreen mode Exit fullscreen mode

Fractional Units (fr) 

/* fr = fraction of available space */
grid-template-columns: 1fr 2fr 1fr;     /* 25% 50% 25% */
grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive! */

/* minmax = at least X, at most Y */
grid-template-columns: minmax(200px, 500px) 1fr;
Enter fullscreen mode Exit fullscreen mode

Placing Items 

/* Method 1: Lines (most control) */
.header { 
  grid-column: 1 / -1;      /* From line 1 to last line (= full width) */
  grid-row: 1 / 2;          /* Row 1 only */
}

.sidebar {
  grid-column: 1 / 2;       /* First column */
  grid-row: 2 / 4;          /* Spans rows 2 and 3 */
}

.main {
  grid-column: 2 / -1;      /* Column 2 to end */
  grid-row: 2 / 3;          /* Row 2 only */
}

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

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

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

Alignment 

.container {
  /* Align all items in the grid area */
  justify-items: start | center | end | stretch; /* Horizontal within cell */
  align-items: start | center | end | stretch;    /* Vertical within cell */

  /* Align the entire grid within container */
  justify-content: start | center | end | space-between | space-around | space-evenly;
  align-content: start | center | end | space-between | space-around | space-evenly;
}

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

Common Layouts

Holy Grail 

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    content aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  gap: 1rem;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Dashboard Grid 

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

.widget-1 { grid-column: span 8; }
.widget-2 { grid-column: span 4; }
.widget-3 { grid-column: span 4; }
.widget-4 { grid-column: span 4; }
.widget-5 { grid-column: span 6; }
.widget-6 { grid-column: span 6; }
Enter fullscreen mode Exit fullscreen mode

Responsive Card Grid 

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

/* No media queries needed!
 * Automatically adjusts number of columns based on available space
 * - 1200px+ → 4 columns
 * - 900px → 3 columns
 * - 600px → 2 columns
 * - < 280px → 1 column
 */
Enter fullscreen mode Exit fullscreen mode

Masonry-Like Layout 

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* Base unit for spanning */
  gap: 1rem;
}

.card-tall { grid-row: span 30; }
.card-medium { grid-row: span 20; }
.card-short { grid-row: span 15; }
Enter fullscreen mode Exit fullscreen mode

Image Gallery 

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

.gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
Enter fullscreen mode Exit fullscreen mode

Grid vs Flexbox — When to Use Which?

Use Case Use This
Component layout (row or column) Flexbox
Page-level layout (rows AND columns) Grid
Content unknown size Flexbox
Precise 2D alignment needed Grid
Centering one element Both work
Overlapping elements Grid
Navigation bar Flexbox
Card layout Grid

Pro Tips 

/* Subgrid (child inherits parent's tracks) */
.subgrid-container {
  display: grid;
  grid-template-columns: subgrid; /* Inherit columns from parent! */
}

/* Order doesn't matter in HTML */
/* You can rearrange purely with CSS */
@media (max-width: 768px) {
  .sidebar  { order: 2; }
  .main     { order: 1; } /* Main content first on mobile! */
}

/* Implicit grid (auto-created rows/columns) */
.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 100px;     /* Auto-created row height */
  grid-auto-flow: dense;     /* Fill gaps efficiently */
}

/* Grid lines are numbered starting from 1 */
/* Negative numbers count from the end (-1 = last line) */
.full-width { grid-column: 1 / -1; }
Enter fullscreen mode Exit fullscreen mode

What's your favorite Grid layout trick?

Follow @armorbreak for more CSS content.

Top comments (0)