0

I'm trying to create 3 columns, with equal width which should be equal regardless of child widths. Consider the following example:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  width: 500px;
  height: 200px;
  grid-auto-flow: column;
  align-items: stretch;
  justify-items: stretch;
}
.first {
  background-color: red;
}
.second {
  background-color: blue;
  width: 300px;
}
.third {
  background-color: yellow;
}
<div class='grid'>
  <span class='first'></span>
  <span class='second'></span>
  <span class='third'></span>
</div>

As you can see the second child (which has intentionally set wider than its siblings) is wider, however, its grid parent has set to set its columns to equal width. Those should be equal, but as I see the definition of fr is that it takes x fraction of the available space, and probably this is the reason why it is messing up, as the third child really is taking one fraction of the available space - which is smaller, because the second column took more space.

For the ones who would catch on the opportunity, the above was the initial idea, as explained, it makes sense why it does that.

So the questions is - given unknown amount of columns, how should I set grid-auto-columns to ignore how wide the child is, make all columns equally wide. (tried 100%, but it instead of dividing the space, it multiplies)

Gergő Horváth
  • 3,195
  • 4
  • 28
  • 64
  • What do you expect the middle div to do since you have set the width to MORE than 33% of the available width? CSS-Grid is doing it right....`fr` is **remaining** available width... – Paulie_D Dec 03 '20 at 15:05
  • So the question is - given unknown amount of columns, how should I set grid-auto-columns to ignore how wide the child is, make all columns equally wide. – Gergő Horváth Dec 03 '20 at 15:10
  • 1
    minmax(0,1fr) instead – Temani Afif Dec 03 '20 at 15:10

0 Answers0