Blog Page Layout

Project: create a blog article page with a title, metadata, section headings and optional related-reading sidebar.

Set a readable line length using max-width or max-inline-size, a generous line-height, and clearly separated headings. Use CSS Grid for the article/sidebar relationship, but place the main article first in the HTML reading order.

At narrow widths, stack the sidebar below the article. Link text should clearly describe destinations rather than repeating “click here.”

Text width and line-height support reading; a responsive grid coordinates the article and related content without disturbing source order.

Begin with a readable headline and paragraphs.

HTML

<article class="blog-post"><h2>How I learned CSS Grid</h2><p class="meta">October 2026 · 5 minute read</p><p>Layout becomes easier when you understand tracks, cells and alignment.</p><h3>Start with columns</h3><p>Try a simple two-column grid and observe how the browser places content.</p></article>

CSS

.blog-post { max-width: 60ch; font-family: Georgia, serif; padding: 18px; } .blog-post h2 { line-height: 1.2; margin: 0 0 10px; } .blog-post .meta { color: #64748b; font: 13px Arial,sans-serif; } .blog-post p { line-height: 1.65; } .blog-post h3 { margin-top: 24px; }

Rendered output

Observe: Text lines remain reasonably short and paragraphs have comfortable line spacing.

Keep the content first and put related reading after it.

HTML

<div class="blog-shell"><article class="blog-post"><h2>How I learned CSS Grid</h2><p class="meta">October 2026 · 5 minute read</p><p>Layout becomes easier when you understand tracks, cells and alignment.</p><h3>Start with columns</h3><p>Try a simple two-column grid and observe the changes.</p></article><aside class="related"><h3>Related reading</h3><ul><li><a href="#flex">Flexbox basics</a></li><li><a href="#media">Media queries</a></li></ul></aside></div>

CSS

.blog-shell { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; } .blog-post { max-width: 60ch; min-width: 0; font-family: Georgia,serif; } .blog-post h2 { line-height: 1.2; margin: 0 0 10px; } .blog-post .meta { color: #64748b; font: 13px Arial,sans-serif; } .blog-post p { line-height: 1.65; } .blog-post h3 { margin-top: 24px; } .related { padding: 14px; background: #eff6ff; border-radius: 8px; } .related h3 { margin: 0 0 10px; } .related ul { padding-left: 18px; line-height: 1.8; } .related a { color: #1d4ed8; } @media (min-width: 740px) { .blog-shell { grid-template-columns: minmax(0,2.5fr) minmax(150px,1fr); } }

Rendered output

Observe: The article is first at all widths; the related sidebar sits beside it on wider viewports.

Text width and line-height support reading; a responsive grid coordinates the article and related content without disturbing source order.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not reduce body font size just to fit more words in each line.

• A sidebar placed before the article in the DOM can interrupt reading order.

Use this checklist to assess the completed CSS project:

• Headings form a logical outline.
• Body text remains comfortable to read under zoom.
• Related content follows the article in narrow reading order.

Add a blockquote, a figure caption and a second article heading with consistent rhythm.

Before changing the code, predict what will change. Then verify by checking the rendered result.

For content pages, typography and logical reading order are more important than decoration.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.