Question

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

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

https://jsfiddle.net/ab0asum3/

Answer 1

似乎有两个问题：

auto不是grid-template-columns的有效值 - 请使用1fr
在没有为grid-gap或li

div

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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来确定列的大小：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

注意：对于方形技术，与flex不同，它可以通过网格子项制作，它可以让您用内容填充div并以中心为例https://jsfiddle.net/ab0asum3/4/

Answer 4

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

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

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

4 个答案: