Not quite responsive in one line

Bryan Rieger delivered a presentation called Rethinking the Mobile Web in 2010, just a few months after the invention of responsive web design. One of the most repeated points of that talk is, “the absence of support for @media queries is in fact the first media query”.

I’ve mostly read it since then as something like, “the first media query is no media query”, which could be interpreted as meaning the first media query is what happens in small viewport before your first @media (min-width:[size]), or in large viewports before your first @media (max-width:[size]) if you prefer going in that direction.

I was reminded of that recently when creating a responsive grid using what I have somewhat erroneously referred to as the responsive-in-one-line CSS grid declaration. (In my last blog post about CSS grid and flexbox in fact. Go me.)

It looks something like this: grid-template-columns: repeat(auto-fit, minmax(30em, 1fr)). For a full explanation the first 6 videos at Grid by Example will get you from no grid knowledge to how that works.

It’s telling the browser to make the boxes in the grid no smaller than 30em and no bigger than 1fr wide. 1fr is 1 fractional unit, and takes up 100% of the available space if there’s less than 60em plus whatever grid-gap is. This minimum width will be chosen to suit the design, probably typographical measure.

The minimum width also applies in small viewports that are less than 30em wide. Watches with browsers, phones and computers that have zoom set to make the interface big, resized browser windows, and plenty of things that haven’t been invented yet all have tiny viewports. Each one will have horizontal scrolling if the width of a box is forced to stay wider than the viewport.

Thankfully it’s a quick fix:

@media (min-width:30em) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
  }
}

You probably have some space either side of the grid so you’ll need to increase the media query’s min-width value to get it just right.

So to paraphrase: the absence of CSS Grid layout is in fact the first layout.

Tags