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.

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.