Equal Width Columns in CSS Grid are Kinda Weird

The flexibility of CSS Grid presents some challenges when creating monospace columns. Although grid-template-columns: 200px 200px 200px; monospace can be achieved, this is not common in practical applications. Usually, what we want to create is a width adaptive monospace column .

You can use fractional units, such as grid-template-columns: 1fr 1fr 1fr; . But this is not robust enough, as larger media content (such as pictures or long text) can cause column width to stretch, causing so-called "grid swelling." This is because the minimum width of 1fr column is auto , not 0 . In other words, the column width will be as narrow as possible to fit the content.

To solve this problem, you can use the minmax() function:

 .el {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

Or a more concise way of writing:

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

Although it is a bit complicated, it only needs to be understood once. If you always set max-width for the media and handle line breaks, you may not have this problem at all.

Another way is to use percentages instead of pixels to maintain flexibility. But how to set the percentage? 33.33%? This works without gaps, but if there is gap, the gap increases width and causes overflow of the container. While gaps can be simulated by adding padding inside the column, this is not elegant enough and prone to inconsistencies.

The above content comes from a wonderful tweet from Wes Bos:

? A visual guide to getting equal width columns in CSS Grid pic.twitter.com/PY4yYokY18 — Wes Bos (@wesbos) May 1, 2020

Many people will encounter this problem, so it is very important to understand the reasons. Although the current solution is a bit cumbersome, I have no better suggestions yet.

The above is the detailed content of Equal Width Columns in CSS Grid are Kinda Weird. For more information, please follow other related articles on the PHP Chinese website!