Resolved: Using minmax() functions in CSS grid

Question:

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>

Answer:

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:

If you have better answer, please add a comment about this, thank you!

Resolved: Using minmax() functions in CSS grid

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Leave A Reply