css-grid 2x2 或 2x3 布局，取决于项目数

Question

考虑一个包含可变数量项目的时间表，介于 1 到 6 之间。 如果有 1 - 4 个项目，它们应该覆盖 2x2 布局，例如：

ONE   TWO
THREE FOUR

如果有 5 - 6 个项目，它们应该覆盖 2x3 布局，例如：

ONE  TWO  THREE
FOUR FIVE SIX

Codepen Link

但是，我需要以编程方式将 x22 或 x23 类应用于项目，具体取决于项目的数量。我更喜欢在我的模板中不需要额外逻辑的解决方案。

.grid {
  border: 1px solid gray;
  width: 400px;
  height: 200px;
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 50%);
  overflow: hidden;
}

.grid .x22,
.grid .x23 {
  background-color: #1c1c1c;
  color: white;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.grid .x22 {
  grid-column: span 3;
}

.grid .x23 {
  grid-column: span 2;
}

<h2>2x3</h2>
<div class="grid">
  <div class="x23">first</div>
  <div class="x23">second</div>
  <div class="x23">third</div>
  <div class="x23">fourth</div>
  <div class="x23">fifth</div>
  <div class="x23">sixth</div>
</div>
<h2>2x2</h2>
<div class="grid">
  <div class="x22">first</div>
  <div class="x22">second</div>
  <div class="x22">third</div>
  <div class="x22">fourth</div>
</div>

Answer 1

不使用 Javascript，您可以在纯 CSS 和 Flexbox 和几个 quantity queries 中实现此行为，以了解您有多少孩子。

Codepen demo

---

标记

<section>
  <div>1</div>
  ...
  <div>6</div>
</section>

<section>
  <div>1</div>
  ...
  <div>5</div>
</section>


<section>
  <div>1</div>
  ...
  <div>4</div>
</section>

CSS

section {
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }


/* by default assign flex-basis to 49.75% (2 boxes per row) 
 * the gap between box is .5%
 */

div { 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 49.75%;
  margin-bottom: .5%;  }

/* if parent element contains at maximum 5 or 6 children we set their
 * flex-basis to 33% (3 boxes per row, gap is still .5%)
 */

div:nth-last-child(n+5):first-child,
div:nth-last-child(n+5):first-child ~ *,
div:nth-last-child(n+6):first-child,
div:nth-last-child(n+6):first-child ~ * {
  flex-basis: 33%; }


/* since we're setting space-around to `justify-content` we need to
 * remove the extra space on the last row when we have exactly 5 
 * children, by adjusting the margin on the last child  
 */ 
div:nth-child(5):last-child {
  margin-right: auto;
  margin-left: .5%; } 

---

最终结果

Answer 2

您将需要使用querySelectorAll 查找网格项的数量，然后您可以运行循环以根据元素数量添加所需的类。

Updated Codepen

堆栈片段

var div = document.querySelectorAll(".grid div");
for (let i = 0; i < div.length; i++) {
  div.length <= 4 ? div[i].classList.add("x22") : div[i].classList.add("x23")
}

.grid {
  border: 1px solid gray;
  width: 400px;
  height: 200px;
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 50%);
  overflow: hidden;
}

.grid .x22,
.grid .x23 {
  background-color: #1c1c1c;
  color: white;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.grid .x22 {
  grid-column: span 3;
}

.grid .x23 {
  grid-column: span 2;
}

<div class="grid">
  <div>first</div>
  <div>second</div>
  <div>third</div>
  <div>fourth</div>
</div>