CSS3 网格布局：特定元素后的新行 - 可能吗？

Question

我有一个按日期排序的项目列表。

有些项目是未来的（绿色项目），因此更有趣，有些是过去的（棕色项目）。我希望第二组项目在新行中开始。

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

总项目数/每个类别的项目数不断变化，每行项目数取决于屏幕尺寸 - 这可能会排除一些可能的解决方案。

我当然可以在某个点拆分包含所有项目的数组，并将输出组织到两个单独的网格中，如下所示：

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  margin-bottom:10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
</div>
<div class="grid">
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

可能这是最简单的选择。看起来我想要实现的目标并不难。但无论如何，我很好奇：有没有更优雅的方法呢？我在想：

.item.green + .item.brown:before { 
/* force new row */
}

Answer 1

您可以定位 .green 之后的第一个 .brown，并将 grid-column-start 设置为 1。

.grid {
  width: 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

.green {
  background: green;
}

.brown {
  background: brown;
}

.green + .brown {
  grid-column-start: 1;
}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

Answer 2

由于您使用的是 grid-template-columns，您将无法使用 before 或 after 实现此目的，您需要将 grid-column-start 设置为 1 item.green + .item.brown 选择：

.grid{
  width: 120px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green{
  background:green;
}
.brown{
  background:brown;
}
.item.green + .item.brown { 
    
    grid-column-start: 1;

}

<div class="grid">
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item green"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
  <div class="item brown"></div>
</div>

Answer 3

我想出的方法绝对是最长的方法，但是如果出于某种原因您需要进行模块化设计，我认为这种方法最终会节省您的时间。添加了网格区域并为所有图块添加了单独的 class。

.grid{
width: 120px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-areas: "green1 green2 green3"
                     "green4 green5 green6"
                     "green7 green8 green9"
                     "brown1 brown2 brown3"
                     "brown4 brown5 brown6";
grid-gap: 10px;
}

.item{
  border:1px solid black;
  height:50px;
  width:50px;
}
.green1 {
  background:green;
  grid-area: green1;
}
.green2 {
  background:green;
  grid-area: green2;
}
.green3 {
  background:green;
  grid-area: green3;
}
.green4 {
  background:green;
  grid-area: green4;
}
.green5 {
  background:green;
  grid-area: green5;
}
.brown1{
  grid-area: brown1;
  background:brown;
}
.brown2{
  grid-area: brown2;
  background:brown;
}
.brown3{
  grid-area: brown3;
  background:brown;
}
.brown4{
  grid-area: brown4;
  background:brown;
}

<div class="grid">
  <div class="item green1"></div>
  <div class="item green2"></div>
  <div class="item green3"></div>
  <div class="item green4"></div>
  <div class="item green5"></div>
  <div class="item brown1"></div>
  <div class="item brown2"></div>
  <div class="item brown3"></div>
  <div class="item brown4"></div>
</div>

CSS3 网格布局：特定元素后的新行 - 可能吗？

CSS3 grid layouts: New row after specific element - possible?

css

css-grid