How to Achieve Equal-Width Columns in CSS Grid?

Equal-Width Columns in CSS Grid

Flexbox has gained recognition for its ability to display items in equal-width columns. However, CSS Grid also offers flexible layout options, prompting the question of how to achieve the same effect.

The HTML structure provided includes a row element with multiple child item elements. The goal is to distribute these items evenly across the row, regardless of the number of items present.

A common solution suggested for CSS Grid is to use repeat(3, 1fr). While this partially achieves the desired effect, it may fail when content exceeds the track size. This is because 1fr signifies the distribution of available space, which does not guarantee equal column widths in all cases.

To ensure exact equality, the following CSS code should be used instead:

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr) restricts the grid tracks to a minimum size of 0 and a maximum size of 1fr. This ensures that all columns will remain the same width, even if the content overflows.

Here's an example to illustrate the difference between repeat(3, 1fr) and repeat(3, minmax(0, 1fr)):

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

With repeat(3, 1fr), the overflow item will break out of its column. In contrast, repeat(3, minmax(0, 1fr)) ensures that all columns remain equal, with the overflow content visible below.

The above is the detailed content of How to Achieve Equal-Width Columns in CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!