使用弹性基础的css网格?

2022-04-02 00:00:00 css flexbox css-grid

我当前正在做的

grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

但我希望当视窗小于400px时,容器应调整大小以适应视窗... 或者我如何将基于Flex的属性实现到网格...其中,最小值应为0px,但容器应从400px开始,然后增长到1FR


解决方案

您可以将您所拥有的与min()100vw组合在一起。小于100vw以避免不必要的溢出,并且1fr将完成填充剩余空间的工作。任何大于50vw的值都适用

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.container {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px,80vw), 1fr));
  grid-gap:10px;
}

.container div {
  height:50px;
  background:red;
}

body {
  margin:0;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

相关文章