CODEWITHSUNDEEP
htmlcsscss-grid
Stephen
Stephen

Reputation: 1183

CSS grid repeat columns auto-fill and minmax doesn't make all columns te same size

I have a project where I am using CSS grid. I am new to using CSS grid and found this solution on how to make a responsive grid that automatically resizes it's items based on the amount of width that is available.

The problem is that not all items not resize at the same time. Items that have smaller words don't get the same size as those items that have larger words.

As you can see in the picture below, the items that contain 'Hellooooo world' are larger and the items that contain 'Hello' are smaller.

I would like all children of the grid to resize at the same width.

enter image description here

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
  gap: 1rem;
}

.item {
  background-color: red;
}
<div class="grid">
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
</div>

Upvotes: 2

Views: 1418

Answers (1)

Paulie_D
Paulie_D

Reputation: 115009

Change grid-template-columns: repeat(auto-fill, minmax(5rem, auto)); to grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1rem;
}

.item {
  background-color: red;
}
<div class="grid">
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
</div>

Upvotes: 2

Related Questions