An improved grid from "Every Layout"

I am a big fan of Andy Bell and Heydon Pickering. They want to build the best possible experiences for everyone. They do it by building the best possible baseline experience and progressively enhancing it where it makes sense.

I found their work through their Every Layout project. Every Layout explains how to build common layout components with simple CSS that works with the browser instead of against it.

The Grid layout in Every Layout creates an even grid of content where the developer has control over the minimum width of the columns. The clever CSS makes sure each column is of equal width and avoids the common issue with flexbox where a single element on the last row stretches to fill the available space.

Here’s the code:

.grid {
    display: grid;
    gap: var(--gutter, 1em);
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(150px, 100%), 1fr)
    );
}

And here’s the result:

The columns are at least 150 px wide, unless the available space is less than 150 px, in which case there will be a single, full width column. Beautiful.

The issue I found with this solution was that as the viewport grows, new columns are added as soon as there is available space, and this never stops. If there are 1500 px of available space there will be ten 150 px columns (if there are no gaps).

I have rarely needed more than five or six columns in a desktop layout, but I have used a two column layout on narrow viewports. So I wanted to modify the grid to allow me to set a maximum number of columns. So that when the container fits the maximum number of columns, the columns just keep growing with the container and no more columns are added.

Like so:

The columns are still at least 150px wide, and as the viewport gets narrower they wrap until there’s only a single full width column left. But I have set the max number of columns to 4, which causes them to keep growing with the available space when the grid reaches the width of 4 columns. This is useful when using fluid font sizes, and the font size in wide viewports grows beyond what would fit in a narrower column using the original grid solution. My version lets the columns keep growing with the fluid font size.

Here is the CSS for my version of The Grid:

.grid {
  --min-width: 150px;
  --max-cols: 4;
  --gap: 1rem;
  --w: calc((100% - var(--gap) * (var(--max-cols) - 1)) / var(--max-cols));

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(var(--min-width), var(--w)),
      1fr
    )
  );
}

Published on October 23, 2024