Question

我的网站上有以下布局

.container{
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-template-rows: max-content;
}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

基本上，有些卡片会根据设备的宽度进行缩放，因此每行可能有1张卡片，或者连续有10张卡片，它们会按照我的代码段所示在底部（保持相同的宽度）进行缠绕

现在，除了IE11（我不必支持任何以前的版本）外，这都很棒有效。我在这里有什么选择？我可以用flexbox做类似的事情吗？我知道我可以指定每张卡的宽度并进行一堆媒体查询..但我不希望..希望有一个更好的解决方案。

编辑

因此，在快速浏览之后，我能够提出类似的解决方案。

.container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
  flex: 1;
  min-width: 350px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

但是，正如您所看到的，当我希望它们与其他卡片保持相同的宽度时，该行的最后一个项目会延伸整个行的宽度，因此我知道卡片的最小宽度应为{ {1}}-但是350px可能会在屏幕自动换行之前达到屏幕允许的最大大小，因此我无法指定max-width

编辑2

此帖子here提到使用伪像这样的

max-width

但是它实际上并不能正常工作，我已经看到了一些依赖于浏览器宽度的解决方案，但是我有一个可折叠的侧边栏，该边栏会更改该父容器的宽度，因此我无法依靠屏幕宽度。这就是为什么网格解决方案如此出色的原因

编辑

通过添加具有相同的.container::after{ content: ''; flex: auto; }和flex: 1的额外“不可见”项目，我能够创建一个真正的hacky修复程序

Answer 1

我尝试使用IE 11测试您的示例，并对其进行一些测试。

比我尝试这样设置flex flex：flex：0 0 33.3333％;; 在 item 类中使其在IE 11中起作用。

修改后的代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;

}

.item{
  background: red;
  border: 1px solid black;
  height: 350px;
  flex: flex: 0 0 33.3333%;;

  min-width: 350px;

}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

</body>
</html>

IE 11中的输出：

Answer 2

您检查了吗

使用-ms-grid-row和-ms-grid-column属性。

CSS Grid auto placement in IE/EDGE CSS Grid not working in ie11 despite prefixes https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

CSS Grid Layout not working in IE11 even with prefixes 可能会帮助您

IE11的CSS网格自动重复列flexbox替代品

2 个答案: