csscss-gridminmax

Using minmax() functions in CSS grid

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>

Solution

  • 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: