使用弹性基础的css网格？

沃梦达教程前端问题

2022-01-01

CSS grid with flex basis?(使用弹性基础的css网格？)

本文介绍了使用弹性基础的css网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我当前正在做的

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网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：使用弹性基础的css网格？

上一篇：为什么在网格模板区域中没有网格区域名称会创建额外的轨迹？

下一篇： CSS3网格布局：特定元素后的新行-可能吗？