02 · Course grid: flexible layout and stress testing

Understand the mechanism

Define title, summary, topic and destination fields before styling. A ul/li list works well with headings and paragraphs; article-based cards should still belong to a clearly titled collection.

Grid manages tracks while column Flexbox handles card internals. auto-fit and minmax let available space determine column count. Ensure minimum tracks fit narrow screens and choose breakpoints based on content pressure rather than device names.

Stress-test one-word titles, long unbroken words, multiple paragraphs, one card and ten cards. Use overflow-wrap where appropriate rather than hiding overflow globally. Missing content should be explicitly represented or omitted.

The example is static and does not need JavaScript to count columns. Add scripts only for stateful features such as filtering or favorites. Keeping core content independent of scripts preserves readability during loading or failure.

Runnable example

<!doctype html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Learning cards</title><style>
body{margin:0;font:17px/1.6 system-ui;background:#f6f7f2;color:#223b2e}
main{max-width:1000px;margin:auto;padding:40px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
article{padding:28px;border:1px solid #d8dfd5;border-radius:16px;background:white}
</style></head><body><main>
<h1>Your learning path</h1><div class="grid">
<article><h2>HTML</h2><p>Create meaningful structure.</p></article>
<article><h2>CSS</h2><p>Design a flexible layout.</p></article>
<article><h2>JavaScript</h2><p>Add useful interaction.</p></article>
</div></main></body></html>

Trace and verify

Check 320, 375, 768 and 1280 pixel widths for unclipped column changes. Content remains without JavaScript. Links describe destinations, and keyboard order matches visual order.

Common mistakes and boundaries

Equal-height cards do not require fixed description heights. A whole-card link cannot contain another interactive favorite button. Adding images requires failed-load, aspect-ratio and alt-text checks.

Practice challenge

Add a long English summary and compare it with Chinese content. Design a no-results message for future filtering.

Reference solution and reasoning

Let content determine height and align actions with flexible space. An empty state belongs in the list region and suggests clearing filters. Do not show nonfunctional filtering controls before implementing them.

Further reading

• MDN Learn web development