Smart layout choices in web design start with the relationship between pieces of content. A layout for equal options should not behave like a sequence. A layout for a sequence should not hide steps in decorative cards. A layout for comparison should use consistent criteria, not uneven blocks that look balanced while making the decision harder.
Choose the content relationship before the component
Before choosing a grid, carousel, sidebar or long scroll, name the reader’s task. Are they comparing options, following a process, browsing visual examples, checking evidence or choosing one next action? The layout should make that task easier to complete.
Layout patterns and when they fit
- Equal cards: useful for independent articles, portfolio items or categories. Keep headings parallel so cards are truly comparable.
- Linear sections: useful for steps, onboarding and explanations where order matters. Do not let visual alternation break mobile reading order.
- Comparison groups: useful for plans, specifications and trade-offs. Repeat the same criteria for each option.
- Editorial feature layout: useful when one story needs a strong visual lead and supporting details. Avoid using it for every ordinary list item.
- Focused action block: useful when the page has one primary next step. Secondary links should be visibly lower priority.
MDN’s CSS grid layout documentation is helpful because CSS grid is designed for two-dimensional layout: rows and columns both matter. Use it when items need predictable alignment in two directions, not just because a three-column block looks modern.
A small HTML and CSS example
A resource section with equal items can use semantic cards inside a list. The code does not need to know specific devices first; it needs a content rule and a minimum card width.
<section aria-labelledby="resources-title">
<h2 id="resources-title">Latest resources</h2>
<ul class="resource-grid">
<li><a href="/post/how-to-best-manage-the-customer-experience/">Customer experience audit</a></li>
<li><a href="/post/effective-after-sales-service-processes-that-work/">After-sales process checklist</a></li>
<li><a href="/post/making-smart-layout-choices-in-web-design/">Layout decision guide</a></li>
</ul>
</section>
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: 1rem;
list-style: none;
padding: 0;
}The important part is not the exact class name. The list remains a list, the heading names the section, and the grid responds to available space. The layout can move from three cards to two or one without requiring a fixed “tablet” or “phone” breakpoint.
Avoid fixed device breakpoints as the main strategy
MDN’s responsive design guidance describes layouts that adapt across viewport sizes. In practice, that means the breakpoint should come from the content: where a heading wraps badly, a comparison becomes too cramped, or a sidebar interrupts reading. “At 768px it becomes mobile” is not enough because real devices, browser zoom, language length and embedded content vary.
Better breakpoint questions
- At what width do cards become too narrow to hold real headings?
- Can a comparison be read without horizontal scrolling?
- Does the source order still make sense when columns stack?
- Does the main action remain near the decision it supports?
- What happens when text is enlarged or translated into longer wording?
W3C’s reflow guidance gives a useful accessibility boundary: users should be able to enlarge text or use a narrow viewport without needing long two-dimensional scrolling for ordinary content. Content that genuinely needs a two-dimensional layout, such as a data table, has an exception. Keep surrounding text and cell content readable, and consider a contained, keyboard-accessible horizontal scroller rather than making the whole page scroll sideways.
Use contrast between layouts for real differences
A page feels easier to scan when different sections have different jobs. A hero can make the promise, a card grid can offer equal choices, a narrow text section can explain judgment, and a grouped checklist can help action. Repeating the same card pattern for every section makes the page look tidy while hiding priority.
Compare choices by use case, not trend
Cards are appropriate when items are independent. A process page should usually be linear because the next step depends on the previous one. A pricing or feature comparison may need repeated criteria. A gallery can use variable image sizes only when the visual rhythm does not hide the subject, caption or order. If a page includes a support or service path, layout decisions should also support the customer experience across web touchpoints.
The best layout choice is the one the team can defend in plain language: “This structure helps readers compare,” “This structure protects the sequence,” or “This structure keeps one action in focus.” If the only reason is “it looks current,” keep working. For the service side of customer journeys, the same clarity applies to after-sales service processes.
Continue to read more stories.