10 CSS Grid Layouts You Can Copy and Paste

Stop rebuilding the same layouts from scratch. Here are 10 battle-tested CSS Grid layouts with copy-paste code.

1. The Holy Grail Layout

.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 16px;
}
.header { grid-column: 1 / -1; }
.footer { grid-column: 1 / -1; }

2. Responsive Card Grid (Auto-Fill)

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

This is the most useful CSS Grid pattern. Cards auto-wrap and fill available space without media queries.

3. Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  height: 100vh;
}
.sidebar { grid-row: 1 / -1; }
.header { grid-column: 2; }
.content { grid-column: 2; overflow-y: auto; }

4. Masonry-Like Grid

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;
  gap: 16px;
}
.masonry-item { grid-row: span var(--rows, 20); }

5. Hero + Features Section

.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 80px 24px;
}
@media (max-width: 768px) {
  .hero-section { grid-template-columns: 1fr; }
}

6. Full-Bleed Content Layout

.full-bleed {
  display: grid;
  grid-template-columns: 1fr min(700px, 100%) 1fr;
}
.full-bleed > * { grid-column: 2; }
.full-bleed > .wide { grid-column: 1 / -1; }

This elegant pattern centers content at 700px max while allowing elements to break out to full width.

7. Pricing Table Grid

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.pricing .featured { transform: scale(1.05); }

8. Footer with Multiple Columns

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 32px;
  padding: 48px 24px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

9. Responsive Image Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 8px;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

10. Centered Form Layout

.form-layout {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.form-container {
  display: grid;
  gap: 16px;
  width: min(400px, 100%);
  padding: 32px;
}

More CSS tools: Gradient Generator · Shadow Generator · Animation Generator