在CSS网格中使用MinMax（）函数

发布于 2025-02-07 22:17:35 字数 1020 浏览 2 评论 0原文

我有一个带有2列x 2行的网格。所有这些都以minmax（）大小设置。我可以问为什么即使我将网格中的所有其他元素（hide class）设置为宽度0和高度0。minmax（）不正常工作？

* {
  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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

讽刺将军 2025-02-14 22:17:35

minmax（）函数工作正常。 calc（）函数也是如此。

问题是对设定的最小高度和宽度的误解。

即使将网格项目设置为零宽度和高度：

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

...网格列有其自身的宽度和高度：

#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);
}

列和行不会缩小到零，它可以防止.show展开扩展在整个容器中。

考虑使用auto而不是minmax（） in 网格 - 网板 - *。这将使列 /行能够跟踪网格项目的大小。

还要考虑以下文章中的解决方案：

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:

回复收藏 0 原文

~没有更多了~