The one web layout that rules them all

published on October 20, 2023

I have a bold claim: there is a responsive CSS Grid / Flexbox combo layout that can be used to build almost any web layout. At least I haven’t found any layout I wanted to build and couldn’t.

The one

To achieve the bold goal, there two thwo things we need to do:

  1. Create a Grid layout in a specific manner
  2. For each row in the grid we use a Flexbox element that horizontally displays and lays out our content

1. The Grid layout

      .content {
        --gap: clamp(1rem, 6vw, 3rem);
        --full: minmax(var(--gap), 1fr);
        --content: min(50ch, 100% - var(--gap) * 2);
        --popout: minmax(0, 2rem);
        --feature: minmax(0, 5rem);
        display: grid;
          [full-start] var(--full)
          [feature-start] var(--feature)
          [popout-start] var(--popout)
          [content-start] var(--content) [content-end]
          var(--popout) [popout-end]
          var(--feature) [feature-end]
          var(--full) [full-end];

      .content > * {
        grid-column: content;
      .popout {
        grid-column: popout;
      .feature {
        grid-column: feature;
      .full {
        grid-column: full;

Th gist of this layout is that we have a flexible and explicit grid that centers its children to the center by default but has a couple of layout breaks available as well.

The interesting part is that this grid will nicely adapt to a mobile screeen, becoming a narrow column thus limiting all its choldren to exactly that.

For a detailed description, please read the original post by Ryan Mulligan here Layout Breakouts with CSS Grid.

2. The Flexbox rows

No code to show here, the only reason I am mentioning the Flexbox is because I think it’s the easiest way to create a responsive row that occupies the entire space made available by its parent.

You can obviously use any structure here that fits yoru needs, even reuse the grid above, the way I do in the blue hero of this page.

Go ahead and test it

Given that this page is built with this approach, inspect it, have a look at the css, play with it to see it in action. Then go use it.