0

In my container element, I set display: grid and grid-template-rows: 2fr 2fr 1fr, but the children are able to go beyond the row height. The child in the top row is able to take up almost the entire height of the container grid. Is there a way (from the container element) to force all of the children to shrink to fit in the 2fr/1fr row height? Or do I have to set that from the child?

Max Gordon
  • 195
  • 14
  • 2
    `fr` is equivleent to `minmax(auto, xfr)` instead use `minmax(0, xfr)` in your case it would be `grid-template-rows:minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr)` – Rainbow Sep 18 '20 at 16:43

1 Answers1

1

As Zohir Salak said, fr is equivalent to minmax(auto, xfr) instead use minmax(0, xfr) to fix the problem. So I fixed it by doing grid-template-rows:minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr)

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Max Gordon
  • 195
  • 14
  • It doesn't save a lot in this instance, but you might as well make full use of Grid's abilities, and employ the [`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat) function: `repeat(2, minmax(0, 2fr)) minmax(0, 1fr)` – David Thomas Sep 18 '20 at 16:54