The one web layout that rules them all.

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;
      grid-template-columns:
        [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.

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.

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.