使用弹性基础的css网格？ [英] CSS grid with flex basis?

问题描述

我当前正在做的

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>

这篇关于使用弹性基础的css网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！