Question

在这种布局中，我希望在网格布局的两个部分之间有一种分隔符。任一部分中的项目数量都是未知且动态的。最好的方法是什么？我添加了一个分隔符，我希望从第一个列行开始，到最后一个列行结束。但是，我不知道如何选择最后一行。

目前，我有

.grid-item--divider {
  grid-column: 1 / 5;
}

当浏览器的大小显示为4列时，这看起来很棒。但是，当调整浏览器大小并增加/减少列数时，布局会中断。如何始终选择最后一列？或者有没有更好的实践来实现这个并不涉及使用分频器？

*注意：我之前的方法是有2个网格容器，每个部分一个。但由于布局的动态性，两个部分的列不一定排列。理想情况下，我希望列匹配，即使例如一个部分只有一个项目而另一个部分有很多项目。

谢谢！

Answer 1

或者，你可以使用flexboxes：

Answer 2

您需要使用javascript来排序您需要跨越多少列或使用媒体查询：

＆＃13;

body {
  padding: 10px;
}

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-item--divider {
  grid-column: 1 / 8;/* fine for  1820px - 2080px */
  border: solid;
}

.grid-item {
  border: 1px solid black;
  min-width: 250px;/* eventually */
}
/* breaking points */

@media all and (max-width: 1820px) {
  .grid-item--divider {
    grid-column: 1 / 7;
  }
}
@media all and (max-width: 1560px) {
  .grid-item--divider {
    grid-column: 1 / 6;
  }
}
@media all and (max-width: 1290px) {
  .grid-item--divider {
    grid-column: 1 / 5;
  }
}@media all and (max-width: 1030px) {
  .grid-item--divider {
    grid-column: 1 / 4;
  }
}
@media all and (max-width: 770px) {
  .grid-item--divider {
    grid-column: 1 / 3;
   }
}
@media all and (max-width: 510px) {
  .grid-item--divider {
    grid-column: 1 / 2;
  }
}

＆＃13;

<div class="grid-container">
  <div class="grid-item grid-item--top">Item 1</div>
  <div class="grid-item grid-item--top">Item 2</div>
  <div class="grid-item grid-item--top">Item 3</div>
  <div class="grid-item grid-item--top">Item 4</div>
  <div class="grid-item grid-item--top">Item 5</div>
  <div class="grid-item grid-item--top">Item 6</div>
  <div class="grid-item grid-item--top">Item 7</div>
  <div class="grid-item grid-item--divider"></div>
  <div class="grid-item grid-item--bottom">Item 8</div>
  <div class="grid-item grid-item--bottom">Item 9</div>
  <div class="grid-item grid-item--bottom">Item 10</div>
  <div class="grid-item grid-item--bottom">Item 11</div>
  <div class="grid-item grid-item--bottom">Item 12</div>
</div>

＆＃13;

多节网格布局

2 个答案: