CSS Grid 响应式布局保持完整的行

Question

我正在构建的仪表板有一个网格布局。我正在努力实现以下目标：

• 保持网格元素的纵横比
• 确保每个网格行都已填充/完整。这是我的问题孩子。我在这里看到了多个教程和答案，随着宽度的减小，行可能包含新行中的剩余元素。这会在隔离网格元素/不完整行右侧的网格中创建大量空白空间。我希望网格移动以将列减少到下一个最低的可除数，从而产生完整的行。如果网格以不可分割的数字（素数）开头，则它只能转到单列进行折叠，例如 3 个网格项折叠为 1，因为它的最高除数因此保持完整的行。另一个示例，6 个项目将折叠为 3 列 2，然后 2 列 3，然后 1 列 6。

我很好奇是否有一种纯 CSS 方法可以确保行保持完整，或者这是否需要 javascript。任何一个答案都足够了，但我更喜欢纯 css 解决方案。

到目前为止我的代码：

.grid-4-2-1 {
  display: grid;
  grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  margin: 20px;
}

.grid-child {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 100%;
  background-color: #fff;
  position: relative;
}

.grid-child .grid-content {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (max-width: 768px) {
  .grid-4-2-1 {
    grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;
    margin: 20px;
  }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 480px) {}

<div class="grid-4-2-1">
  <grid-child-1 class="grid-child">
    <div class="grid-content">Overview</div>
  </grid-child-1>
  <grid-child-2 class="grid-child">
    <div class="grid-content">Overview</div>
  </grid-child-2>
  <grid-child-3 class="grid-child">
    <div class="grid-content">Overview</div>
  </grid-child-3>
  <grid-child-4 class="grid-child">
    <div class="grid-content">Overview</div>
  </grid-child-4>
</div>

Answer 1

您可以使用纯 CSS 通过使用显示网格和显示网格自动列属性来创建网格系统。更多参考链接 (https://www.w3schools.com/cssref/pr_grid-auto-columns.asp)

.box {
  display: grid;
  grid-auto-flow:columns;
  grid-auto-columns:1fr;
  counter-reset: divs;
  margin: 10px;
  border:1px solid;
}

.box div  {
  border:1px solid blue;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *

{
   grid-row:2;
}

<div class="box">
  <div></div>
  <div></div>  
  <div></div>

</div>

<div class="box">
  <div></div>
  <div></div>
</div>


<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>