0

https://codepen.io/dye/pen/LyRJym

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

目前，我有

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

当浏览器大小显示为 4 列时，这看起来很棒。但是当浏览器调整大小并增加/减少列数时，布局会中断。我怎样才能总是选择最后一列？或者有没有更好的做法来完成这个不涉及使用分隔线？

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

谢谢！

4

2 回答 2

0

您将需要一个 javascript 来对您必须跨越的列数或使用媒体查询进行排序：

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

于 2017-04-24T23:25:57.790 回答
0

或者，您可以只使用弹性框：

于 2017-04-24T23:22:57.643 回答