The video is part of the full course
In this lesson you will
- Create a grid with display: grid and grid-template-columns
- Name page regions with grid-template-areas
- Make responsive columns with repeat(auto-fit, minmax())
- Know when to use Grid and when to use Flexbox
Flexbox lays things out in one direction: a row or a column. CSS Grid works in two directions at once, rows and columns, which makes it ideal for whole-page layouts and card grids. We'll add a sidebar for the opening hours and contact details, and give the menu six items.
The HTML
Everything sits inside one wrapper, .page, with four children: the header, the main content, a sidebar and the footer.
<div class="page">
<header class="site-header">
<a class="brand" href="#"><img src="logo.svg" alt="" width="48" height="48"><span>Sunrise Bakery</span></a>
<nav class="site-nav" aria-label="Main">
<a href="#menu">Menu</a>
<a href="#hours">Hours</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main class="content">
<h1>Fresh bread, every morning.</h1>
<section id="menu">
<h2>Today's menu</h2>
<div class="menu-grid">
<article class="card"><h3>Sourdough loaf</h3><p>Slow-fermented for 24 hours.</p></article>
<article class="card"><h3>Butter buns</h3><p>Soft, golden, sold in sixes.</p></article>
<article class="card"><h3>Carrot cake</h3><p>By the slice or whole.</p></article>
<article class="card"><h3>Masala bun</h3><p>Spiced potato in a soft bun.</p></article>
<article class="card"><h3>Multigrain loaf</h3><p>Seven grains and seeds.</p></article>
<article class="card"><h3>Chocolate brownie</h3><p>Dense and fudgy.</p></article>
</div>
</section>
</main>
<aside class="sidebar">
<section id="hours" class="card">
<h2>Opening hours</h2>
<p>Monday to Saturday, 7 a.m. to 8 p.m. Closed on Sundays.</p>
</section>
<section id="contact" class="card">
<h2>Contact</h2>
<p><a href="tel:+910000000000">+91 00000 00000</a></p>
</section>
</aside>
<footer class="site-footer"><p>© 2026 Sunrise Bakery</p></footer>
</div>Continue with the full course
The rest of this lesson, the narrated video, the PDF and the exercise are part of Web Development Foundations. One payment, lifetime access.
Buy the course$39.00
Already bought it? Sign in with the email you paid with.