Mastering CSS Layout: A Content-First, Repeatable Strategy

Web Development

Discover a repeatable CSS layout strategy that prioritizes content, guides you in choosing the right grid, and uses reusable permutations for consistent, professional web designs.

On November 19th, 2025, Andy Clarke shared insights into his personal CSS layout strategy, following a previous article where he explained his strategy for writing CSS selectors. This piece focuses on establishing a repeatable methodology for making layout decisions, moving beyond a sole reliance on grid systems.

Studying the Content First

Before launching into design software like Sketch or coding environments like Nova, the fundamental first step is to meticulously study the content that will be laid out. This content-first approach is crucial, as it avoids shoehorning content into predefined containers. The process involves identifying the most important elements on a page, grouping related items, determining what should attract immediate attention, and what can remain understated. This initial research is indispensable for establishing the necessary visual hierarchy and generating ideas on how to effectively communicate it through the layout.

Choosing the Right Grid for the Job

Selecting a grid is a deliberate design decision, not a default choice. Each grid type offers unique characteristics to a design, so the decision 'it depends' on several factors. Let's explore these:

The 12-Column Grid: Widely familiar and often bundled with frameworks and platforms, its common 2-up, 3-up, and 4-up components make it an obvious and practical choice when collaborating with developers or within teams.
Compound Grids: These combine two or more grid types—such as column, modular, symmetrical, or asymmetrical—on a single page. They can occupy distinct areas or overlap, providing greater flexibility and often more visually engaging interactions than a solitary grid.
Modular Grids: Composed of rectangular or square units arranged horizontally and vertically, modular grids are exceptionally effective for organizing complex content, yet are puzzlingly underutilized by designers.
No Grid: Occasionally, for highly specific storytelling or artistic expression, consciously choosing to forego a grid entirely can be the most appropriate design decision.

It is paramount to remember that grid selection is a design decision. There is no universal default. Different grids evoke different feelings and behaviors, necessitating a thoughtful choice rather than a technical convenience.

Defining a Grid with CSS Custom Properties

When implementing a grid using HTML and CSS, the author typically defines it once, irrespective of how many times it will be utilized. A boilerplate file usually contains a convenient set of grid column templates, including a 12-column grid and a 4+5 compound structure:

:root {
  --grid-12-col: repeat(12, 1fr);
  --grid-compound: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
}

The chosen grid is then applied via a single CSS style:

.layout {
  display: grid;
  grid-template-columns: var(--grid-12-col);
}

Additionally, values for gap sizes, margins, and a maximum width are also defined:

:root {
  --grid-column-gap: 1.5rem;
  --grid-row-gap: 1.5rem;
  --grid-margins: 0 auto;
  --grid-max: 80rem;
}

.layout {
  gap: var(--grid-row-gap) var(--grid-column-gap);
  margin: var(--grid-margins);
  max-inline-size: var(--grid-max);
}

These styles permeate the entire grid implementation, whether using child elements or subgrid. By defining grids, gaps, and max-width once via CSS custom properties, every layout across a project inherently achieves consistency without repeating code.

Creating Reusable Layout Permutations

Each layout instance typically contains one, two, three, or more child elements, commonly divs or other structural HTML elements. The author separates layout concerns into the underlying grid and then defines the arrangements of these child elements using data-attributes:

<div class="layout" data-layout="flow">
  <div>[...]</div>
  <div>[...]</div>
</div>

[data-layout="flow"] > *:nth-child(1) { /* ... */ }
[data-layout="flow"] > *:nth-child(2) { /* ... */ }

Instead of designing layouts from scratch repeatedly, the author sketches and names specific arrangements of child elements, enabling quick recall during the design process.

While naming conventions based on appearance (e.g., "flow," "split," or "stack") or content/function (e.g., "hero," "gallery") can seem logical, they often lead to limitations. Similarly, naming based on grid tracks (e.g., "1–5") becomes problematic if the underlying grid changes.

To sidestep these issues, the author employs highly personalized naming conventions: cartoon characters for personal websites, capital cities for Layout Love templates, Welsh politicians for Changemakers, and composers for the Academy of Scoring Arts. Examples include:

[data-layout="bartok"]
[data-layout="beethhoven"]
[data-layout="bizet"]

This unconventional approach, while not descriptive of appearance, content, function, or grid tracks, serves as an effective mental shortcut, facilitating thoughts like, "I need the Brahms layout for this." The author acknowledges the potential benefits of a standard naming convention but values the creative amusement derived from project-specific names, noting that the discussion of an industry standard has been a recurring topic in his writings for five years ago, twelve years ago, and as far back as 2004.

Deciding Between CSS Grid and Flexbox

There is no rigid checklist for determining when CSS Grid is superior to Flexbox, or vice versa. However, specific criteria guide the decision. Generally, when an element requires layout in a single dimension—such as a navigation bar or a group of items—Flexbox is the preferred choice. For two-dimensional layouts, CSS Grid is selected. Occasionally, the decision hinges on the desired behavior of the last or 'widowed' item: if it should maintain the grid layout, Grid is used; if it should flex to fill the available width, Flexbox is chosen.

Adding Multi-column Layout

There are instances where additional columns are desired that do not necessarily conform to the primary layout grid. This might include multi-column text within an article or spreading lists across multiple columns to optimize space utilization. In these scenarios, a Multi-column layout is ideal, with column width defined by a measure rather than the underlying grid layout. Multi-column layout offers the flexibility to diverge from the grid when content demands a more editorial flow.

A Repeatable Way to Make Layout Decisions

Ultimately, this layout strategy transcends mere grid systems; it's about establishing a repeatable process for making informed layout decisions. It begins with a thorough understanding of the content, progresses through selecting the most suitable grid to tell the intended story, and culminates in the creation of reusable permutations that ensure design consistency.

This article was penned by Andy Clarke, and tagged with css.

Connect with Andy Clarke

Instagram
LinkedIn
Mastodon
YouTube
Interested in working together? Contact for new client inquiries this month. Book your call.

Location: Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ.