CSS Interview Prep
Practise explaining why a layout uses flex rather than grid, how the cascade chooses a value, and what happens when content grows. Use the example as evidence for your reasoning.
How it works
- Use this page as a starting point for your own work: change the content, make a prediction, then inspect the result.
- Before considering a solution finished, test keyboard navigation, narrow widths, readable contrast, and longer text.
Practice checkpoints
When would you choose Grid over Flexbox?
Grid is useful when rows and columns should be coordinated together. Flexbox often suits a row or column whose items distribute space along one axis.
Why did an apparently more specific rule lose?
Check whether the rule matches, its origin and importance, cascade layer, specificity, and then source order or scope proximity where applicable.
How do you investigate a horizontal scrollbar?
Find the element whose rendered bounds exceed the viewport, inspect intrinsic sizes and minimums, and fix that constraint instead of globally hiding overflow.
A practical example
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: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 220px; min-width: 0; }
Practise explaining why a layout uses flex rather than grid, how the cascade chooses a value, and what happens when content grows. Use the example as evidence for your reasoning.