CSS Grid Mastery: Build Any Layout You Can Imagine

CSS Grid is the most powerful layout system in CSS. This tutorial will take you from basics to building complex layouts with confidence.

Getting Started with Grid

Creating a Grid Container

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

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Essential Grid Properties

Defining Columns and Rows

/* Fixed sizes */
grid-template-columns: 200px 200px 200px;

/* Flexible sizes */
grid-template-columns: 1fr 2fr 1fr;

/* Mixed */
grid-template-columns: 200px 1fr 200px;

/* Repeat function */
grid-template-columns: repeat(4, 1fr);

/* Auto-fit for responsive grids */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Grid Gap

/* Shorthand */
gap: 20px;

/* Individual */
row-gap: 20px;
column-gap: 30px;

Placing Items on the Grid

Grid Lines

.header {
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 1;
}

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

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

Named Grid Areas

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

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

Real-World Layout Examples

Card Grid (Auto-responsive)

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .holy-grail {
    grid-template:
      "header" auto
      "nav" auto
      "main" 1fr
      "aside" auto
      "footer" auto
      / 1fr;
  }
}

Magazine Layout

.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 16px;
}

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

.secondary {
  grid-column: 3 / 5;
}

Advanced Techniques

Alignment

.container {
  /* Align all items */
  justify-items: center; /* horizontal */
  align-items: center; /* vertical */

  /* Align the grid itself */
  justify-content: center;
  align-content: center;
}

.item {
  /* Align individual item */
  justify-self: end;
  align-self: start;
}

Implicit Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Define size for auto-created rows */
  grid-auto-rows: minmax(100px, auto);
  /* Direction for auto-placed items */
  grid-auto-flow: dense;
}

Browser DevTools

Use your browser’s Grid inspector:

1. Open DevTools (F12)
2. Select the grid container
3. Click the “grid” badge
4. Visualize grid lines and areas

Conclusion

CSS Grid makes complex layouts simple. Start with the basics, experiment with grid areas, and gradually incorporate advanced features. With practice, you’ll be building sophisticated layouts effortlessly.