时间戳

首页 > 解决方案 > 如果没有足够的空间，如何使网格 minmax 转到 1 列？

css - 如果没有足够的空间，如何使网格 minmax 转到 1 列？

问题描述

我有一种情况，这两列所在的容器大小与视口宽度不一致，所以我不能轻易使用断点。我想知道如果没有足够的宽度，CSS 网格中是否有一些东西会使一列从 2 列变为 1 列，就像 CSS 列所做的那样（这就是我目前正在使用的，但它有一些奇怪的行为）。

  header{
      display: grid;
      grid-template-columns: minmax(200px, 400px) minmax(200px, 400px);
      grid-gap: 5%;
      
    }
    
    div{
      background-color: green;
    }
<header>
    <div>
    test<br />test
    </div>
    <div>
    test<br />test
    </div>
    <div>
    test<br />test
    </div>
    <div>
    test<br />test
    </div>
    </header>

现在，如果没有足够的空间，它只会重叠，但如果没有足够的空间，我希望它可以包裹起来。我将尺寸设置为 200 和 400 像素，以便于测试。

jsfiddle链接

标签： csscss-grid

解决方案

有一个更好的解决方案，通过display:flex在你的标题标签和宽度屏幕中使用你可以添加媒体查询并设置每个 div 部分将被包装的一些像素的每个 div 元素真的不够。这是一个CSS示例。

header{
  display: flex;
  justify-content:space-evenly;
  flex-wrap:wrap;
}

div{
  background-color: green;
  flex:0 0 45%;
  max-width:45%;
  margin-bottom:0.5rem;
}

@media only screen and (max-width:600px) {
  div {
    flex:0 0 100%;
    max-width:100%;
  }
}

推荐阅读