Skip to main content

Grid Code Challenges

From layouts to art — these challenges build Grid mastery. Each one mirrors a real website pattern.

Challenge 1 — Magazine Layout​

Create a 6-article magazine grid where:

  • Article 1 spans 2 columns and 2 rows (featured).
  • Articles 2-5 are single cells.
  • Article 6 spans full width at the bottom.
💡 Solution Hint
.magazine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}
.article-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.article-6 { grid-column: 1 / -1; } /* -1 means last line */

Challenge 2 — Responsive Card Grid (No Media Queries)​

Create a card grid that automatically adjusts from 1 to 4 columns based on available space. Use only CSS Grid — no media queries.

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

Challenge 3 — Full Page Dashboard Layout​

Build a dashboard layout with:

  • Fixed 80px sidebar on the left.
  • Top 60px header, full width.
  • Main content area (remaining space).
  • 300px right panel.
💡 Solution Hint
.dashboard {
  display: grid;
  grid-template-columns: 80px 1fr 300px;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header  header"
    "sidebar main    panel";
  min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
.panel   { grid-area: panel; }

Challenge 4 — Photo Gallery with Masonry-Like Grid​

Create a 3-column photo gallery where some photos are taller than others (using grid-row: span 2). No JavaScript.

💡 Solution Hint
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 0.75rem;
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

Challenge 5 — Responsive Template Using Areas​

Create a complete page layout using grid-template-areas that:

  • On desktop: header top, sidebar left (1/4), main center (3/4), footer bottom.
  • On mobile: stacks to single column in order: header, main, sidebar, footer.
💡 Solution Hint
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}
@media (min-width: 768px) {
  .page {
    grid-template-columns: 1fr 3fr;
    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; }