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

CSS3 grid layouts: New row after specific element - possible?(CSS3网格布局：特定元素后的新行-可能吗？)

本文介绍了CSS3网格布局：特定元素后的新行-可能吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

有些物品是未来的(绿色物品)，因此更有趣的是，有些是过去的(棕色物品)。我希望第二组项目从新的一行开始。数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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 */
}

推荐答案

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

这篇关于CSS3网格布局：特定元素后的新行-可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！