时间戳

首页 > 解决方案 > 当项目大小不同时，自动填充和 minmax() 不起作用

css - 当项目大小不同时，自动填充和 minmax() 不起作用

问题描述

我正在尝试使用不同大小的项目制作一个完全响应的网格。

这个例子适用于

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


body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

所有项目的尺寸相同，并且在最小的屏幕尺寸上，它们彼此叠放。

现在，如果您在此示例中尝试相同的操作，则已离开显式网格并且必须再次移动的项目不会这样做，而是会缩小到指定的 minmax 值以下。所以在最小的屏幕尺寸上有些项目是看不到的。

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

除了添加媒体查询之外，有没有办法让示例 2 的行为类似于示例 1？

标签： csscss-grid

解决方案

最简单的答案是不，你不能。原因是，当您组合auto-fill并minmax(200px, 1fr)告诉浏览器呈现您的代码以使用最小为 200px 和最大为 1fr 的列创建网格时。然后你告诉你的盒子跨越 2 或 3 列，这意味着它们在大屏幕上的最小宽度至少为 400 像素或 600 像素。在较小的屏幕上，跨度规则开始失去意义，但自动不会接管。它仍然必须考虑到各个列的宽度差异.a .b .c等来计算各个列的宽度。

因此，不幸的是，您需要使用媒体查询或查找其他类型的布局。

推荐阅读