在流畅的 CSS 网格布局中保持元素的纵横比

Question

我有一个 4 列 CSS 网格布局中的 div 元素列表。 div 元素设置为 100% 宽度，顶部填充为 100% 以保持 1:1 的纵横比。这是一种常见的技术，可以在这里看到：https://stackoverflow.com/a/6615994/7949834

这适用于 Firefox，但不适用于 Chrome。在 Chrome 中，元素不占用网格容器内的任何空间。这是什么原因？

ul {
  border: 2px solid red;
  display: grid;
  grid-gap: 5%;
  grid-template-columns: auto auto auto auto;
  list-style-type: none;
}

div {
  background-color: green;
  padding-top: 100%;
  width: 100%;
}

<ul>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
</ul>

https://jsfiddle.net/ab0asum3/

Answer 1

似乎有两个问题：

• auto 不是 grid-template-columns 的有效值 - 使用类似 1fr 的值
• 当没有为li 或div 定义明确的高度时，使用grid-gap 的百分比值

您需要为行间距使用像素值。

ul {
  border: 2px solid red;
  display: grid;
  grid-gap: 10px 5%;
  grid-template-columns: repeat(4, 1fr);
  list-style-type: none;
  padding: 0;
  margin: 0;
}

div {
  background-color: green;
  padding-top: 100%;
  width: 100%;
}

<ul>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
</ul>

Answer 2

/* change --grid-aspect-ratio to your aspect ratio*/
:root {
  --grid-aspect-ratio: 16/9;
}

/* Consider using div element for grid */
ul {
  border: 2px solid red;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style-type: none;
}
/* Consider using div element for grid-cell */
li {
  /* set relative position */
  position: relative;
  background-color: lime;
}

li:before {
  content: "";
  display: inline-block;
  padding-bottom: calc( 100% / (var(--grid-aspect-ratio)));
}
/* wrap your content in <div class="grid-cell-inner"> */
.grid-cell-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  

网格最好使用 div 元素。 请注意，您必须为网格单元格内容使用一些内部元素并将其位置设置为绝对以保持相同的纵横比。 不要使用 % 表示网格间隙，如果它是相对于视口的，您可以使用 vw/vh 单位。

Answer 3

您应该使用1fr 而不是auto 来调整列的大小：

ul {
  border: 2px solid red;
  display: grid;
  grid-gap: 5%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style-type: none;
}

li:nth-child(4n)~li {
  /* eventually for the gap missing in chrome */
  margin-top: 5%
}

div {
  background-color: green;
  padding-top: 100%;
  width: 100%;
}

<ul>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
</ul>

---

注意：对于方形技术，与 flex 不同，它可以由 grid child 制成，它可以让您用内容填充 div 并将其居中，例如 https://jsfiddle.net/ab0asum3/4/

Answer 4

如果您打开 Chome DevTools 并检查 divs，您会看到浏览器将它们的高度计算为 0px。 我不能确切地说出您是哪个怪癖或哪个标准在这里打破，但如果嵌套的 divs 没有高度，它们不会向其父级 lis 传递任何内容，并且您将不会显示任何内容。

原因是 Chrome 计算嵌套的div 高度为零，这反过来意味着父级li 将具有零高度强>。这就是你的原因。