logo标签列表

CSS网格响应式布局保持完整行

javascripthtmlcsscss-grid
10

我正在构建一个仪表板的网格布局。我试图实现以下目标:

  • 保持网格元素的宽高比
  • 确保每个网格行都是填满/完整的。这是我的问题所在。我看过多个教程和答案，其中行可能包含新行中的剩余元素，从而导致网格右侧的孤立网格元素/不完整行中出现大量空白空间。我希望网格向下移动，以将列减少到下一个最低可被整除的数字结果，从而形成完整的行。如果网格以不可被整除的数字（质数）开头，则只能折叠到单个列中，例如3个网格项折叠到1个网格项，因为它是最高的约数，因此保持完整行。另一个例子，6个项目会折叠成2列的3列，然后是3列的2列，最后是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>

我认为这是你想要的内容：https://dev59.com/fL7pa4cB1Zd3GeqP1I7r#65245005 是吗？ - Temani Afif
1个回答
1
你可以使用纯CSS通过使用display grid和display grid-auto-columns属性来创建网格系统。更多参考链接（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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接