CSS Website Layout — Code Challenge
Put compose a page from layout regions into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- Page layouts combine regions with distinct roles rather than one enormous positioned box. Grid can allocate the main region more room while retaining a sensible source order.
- A component should work with more than one item, a longer label, and a narrow screen. Use layout primitives rather than manual pixel offsets.
- Reserve decorative effects for supporting the content; they should not carry essential instructions.
Your task
Use the HTML below to explore this rule: Page layouts combine regions with distinct roles rather than one enormous positioned box. Grid can allocate the main region more room while retaining a sensible source order. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
.layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.card:first-child { grid-row: span 2; }
@media (max-width: 600px) { .layout { grid-template-columns: 1fr; } }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<div class="layout"><article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Build a bird box</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article><article class="card"><span class="badge">This Saturday</span><h2>Mend a favourite shirt</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article></div>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.card:first-child { grid-row: span 2; }
@media (max-width: 600px) { .layout { grid-template-columns: 1fr; } }
Page layouts combine regions with distinct roles rather than one enormous positioned box. Grid can allocate the main region more room while retaining a sensible source order.