1

I have a grid with 2 columns x 2 rows. All of them are set in minmax() size. Can I ask why the element with class show doesn't take the full size of the grid even though I set all other elements (hide class) in the grid to width 0 and height 0. Doesn't minmax() work properly?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

 :root {
  --seemoresz: 100px;
}

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
  width: 700px;
  height: 700px;
  overflow: hidden;
  background-color: aqua;
}

.hide {
  width: 0;
  height: 0;
}
<div id="outer">
  <div class="hide">
    hide this
  </div>
  <div class="hide">
    hide this
  </div>
  <div class="show">
    show this
  </div>
  <div class="hide">
    hide this
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Bảo Anh Bùi Nguyễn
  • 13
  • 2

1 Answers1

0

The minmax() function is working fine. So is the calc() function.

The problem is a misunderstanding about the minimum height and widths that are set.

Even though you set the grid items to zero width and height:

.hide {
  width: 0;
  height: 0;
}

...the grid columns have their own width and height:

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
}

The columns and rows aren't shrinking to zero, which prevents .show from expanding across the entire container.

Consider using auto instead of minmax() in grid-template-*. That will enable the column / row to track the size of the grid item.

Also consider the solutions in these posts:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hi, thank you very much for the answer. I have tried your solution and it works like a charm. However, I still don't understand why minmax() function works like that because I thought minmax() supposed to range the size of the column/row from min to max based on the its grid child ? Did I miss something right here. Thank you again! – Bảo Anh Bùi Nguyễn Jun 16 '22 at 05:19
  • Hi. You're welcome. With regard to `minmax()`, did you have a chance to review the link I provided (last bullet point)? – Michael Benjamin Jun 16 '22 at 13:14