6 real-world layouts you can copy
Use for: Classic blog or dashboard layout with header, two sidebars, main content, and footer.
Live Demo
CSS
.holy-grail {
display: grid;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 60px;
gap: 10px;
min-height: 100vh;
}
.header { grid-area: header; }
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }HTML
<div class="holy-grail">
<header class="header">Header</header>
<aside class="left">Sidebar</aside>
<main class="main">Main Content</main>
<aside class="right">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>Use for: Responsive image grid that auto-wraps. No media queries needed.
Live Demo
CSS
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
}HTML
<div class="gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<!-- add as many as you want -->
</div>Use for: Admin panels with cards of varying sizes using column and row spans.
Live Demo
CSS
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.card { border-radius: 8px; padding: 20px; }
/* Span cards across columns/rows */
.card-large {
grid-column: span 2;
grid-row: span 2;
}
.card-wide {
grid-column: span 2;
}HTML
<div class="dashboard">
<div class="card card-large">Chart</div>
<div class="card">Stats</div>
<div class="card">Users</div>
<div class="card card-wide">Activity</div>
<div class="card">Revenue</div>
<div class="card">Alerts</div>
</div>Use for: Featured article with smaller articles beside it. News sites, blog homepages.
Live Demo
CSS
.magazine {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 100px;
gap: 12px;
}
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Each smaller article fills one cell */
.article { border-radius: 8px; }HTML
<div class="magazine">
<article class="featured">Featured Article</article>
<article class="article">Article 2</article>
<article class="article">Article 3</article>
</div>Use for: SaaS pricing pages. Equal-height cards with a highlighted plan.
Live Demo
CSS
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.price-card {
background: #1a1a1a;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
}
/* Highlight the middle card */
.price-card.popular {
background: #4a9c3f;
color: #0a0a0a;
transform: scale(1.05);
}HTML
<div class="pricing">
<div class="price-card">
<h3>Basic</h3>
<p class="price">$9/mo</p>
<ul><li>5 Projects</li></ul>
</div>
<div class="price-card popular">
<h3>Pro</h3>
<p class="price">$29/mo</p>
<ul><li>Unlimited Projects</li></ul>
</div>
<div class="price-card">
<h3>Enterprise</h3>
<p class="price">$99/mo</p>
<ul><li>Unlimited Everything</li></ul>
</div>
</div>Use for: Site footer with brand info, links, resources, and social columns.
Live Demo
CSS
.site-footer {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 30px;
padding: 60px 20px;
}
/* Stack on mobile */
@media (max-width: 768px) {
.site-footer {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.site-footer {
grid-template-columns: 1fr;
}
}HTML
<footer class="site-footer">
<div class="footer-brand">
<h3>My Site</h3>
<p>A short description of your site.</p>
</div>
<div class="footer-links">
<h4>Links</h4>
<a href="#">About</a>
<a href="#">Blog</a>
</div>
<div class="footer-resources">
<h4>Resources</h4>
<a href="#">Docs</a>
<a href="#">API</a>
</div>
<div class="footer-social">
<h4>Social</h4>
<a href="#">Twitter</a>
<a href="#">GitHub</a>
</div>
</footer>