将css网格2列拆成3列，用于特定行。

Question

我有一个2列布局，希望将一行分割成3列布局，是否可以在不指定3列布局的情况下进行？

例子

所有的7都应该在该行中被分成三部分（见代码输出）。

1到1.5显然是不行的。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.custom {
  grid-column: 1/1.5
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>

Answer 1

A 黑客 慎用

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.custom {
  width: 66.66%
}

.custom+.custom {
  margin-left: -33.33%;
  grid-column: 2;
  grid-row:3;
}

.custom+.custom+.custom {
  margin-left: 33.33%;
  grid-column: 2;
  grid-row:3;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>

而逻辑上的解决方案是移到6列。

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid-item {
  grid-column:span 3;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.custom {
 grid-column:span 2;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
  <div class="grid-item custom">7</div>
</div>