1

I am trying to understand why specifying the same minmax for grid-template-rows fails to produce the same type of result it seems to produce for grid-template-columns.

Here is the HTML. It's very simple:

<html>
  <body>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Here is the CSS:

.container > div {
  border: 1px solid red;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 400px));
  grid-template-rows: repeat(3, minmax(200px, 400px));
}

Here is the code line on CodePen: https://codepen.io/user1831902/pen/KKNyJQr

You can see that when you expand/shrink the width of the browser, each column does indeed expand to 400px width and shrink down to 200px. However, the height each row remains at 400px.

Why is this going on? (My guess is that the browser sees the height below the viewport as "available space". Is that the case? If it is, how do you constrain it so it doesn't and the specified minmax range is actually respected.

I've tried restricting the .container with max-height, but that didn't do anything.

user1902183
  • 3,203
  • 9
  • 31
  • 48

1 Answers1

0

So I can't point you to why this doesn't work, but I believe I can fix it for you.

Try this:

body { 
  display: flex; // add this
  height: 100vh; // and this to your containing area
}

.container > div {
  border: 1px solid red;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 400px));
  grid-template-rows: repeat(3, minmax(200px, 400px));
}

As you suggested, I'm pretty sure the browser sees space down the window as being available, but if you set the container to height: 100vh; and make it display: flex; then the rows will grow and shrink within that area and will obey your min and max height settings.

So you need to give them a defined height to operate within, but if it's not a flex container it won't work.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Brett East
  • 4,022
  • 2
  • 20
  • 31
  • Excellent solution! Thank you! I do think that my original explanation is correct regarding "available space". I think the browser sees max-width of viewport as available space but there is no real limit on vertical space by default. Making it a flex container with a set height of 100% of viewport height changes that. – user1902183 Feb 24 '21 at 22:03
  • Hmm... You know what... It works as long as you simply define `height` for the `.container` as in: `height: 100vh`. No need for flex. If you still see the scrollbar, it's because the body has some margin left from the native browser styles. – user1902183 Feb 24 '21 at 22:45
  • hmm, weird, in the playground I was using, it was growing beyond the height on the container - I wasn't just seeing a scrollbar. But glad it works! – Brett East Feb 24 '21 at 23:45
  • You can go to this link, move the editors to the right (or left) and open up CodePen Console to reduce the height of the viewport: https://codepen.io/user1831902/pen/KKNyJQr – user1902183 Feb 25 '21 at 07:39