Menu

You want minmax(10px, 1fr) not 1fr

January 22nd, 2021

There are a lot of grids on the web like this:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

My message is that what they really should be is:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

 

Why? In the former, the minimum width of the grid column is min-content, which can be awkwardly wider than you want it to be (see: grid blowouts). In the latter, you’ve reduced the minimum to 10px (not zero, so it doesn’t disappear on you and lead to more confusion).

While it’s slightly unfortunate this is necessary, doing it leads to more predictable behavior and prevents headaches.

That’s it. That’s my whole message.

The original post You want minmax(10px, 1fr) not 1fr.