代码之家 › 专栏 › 技术社区 › Wasteland

CSS网格-元素的可变跨度

css-grid css3 css

Wasteland · 技术社区 · 6 年前

我正在尝试执行以下网格:

1/3 | 1/3 | 1/3   (3 equal elements)
   1/2 | 1/2      (2 equal elements)
   1/2 | 1/2      (2 equal elements)

出于这个原因,我需要将每一行拆分为6列,以同时容纳1/2和1/3。我似乎误解了网格列命令,而我想设置每个元素需要多少列。以下代码无法正常工作。

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front > div {
  background-color: red;
}
.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

.top-centre {
  grid-column: 5 / 7;
}

<section class="grid-front">
   <div class="top-left">1</div>
   <div class="top-centre">2</div>
   <div class="top-right">3</div>
   <div class="middle-left">4</div>
   <div class="middle-right">5</div>
   <div class="bottom-ll">6</div>
   <div class="bottom-lr">7</div>
   <div class="bottom-right">8</div>
 </section>

它显示所有网格元素。第一个元素(左上角)占用2个“空格”,然后在第二个元素应该所在的位置有一个空白(跨越2个空格)。还有第二个元素(跨越两个空间),第三个元素应该在这里。然后在第二行中均匀分布其余元素。

我对它有什么误解?

1 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

.top-centre

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front>div {
  background-color: red;
}

.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

/* ADJUSTMENT */
.top-right {
  grid-column: 5 / 7;
}

<section class="grid-front">
  <div class="top-left">1</div>
  <div class="top-centre">2</div>
  <div class="top-right">3</div>
  <div class="middle-left">4</div>
  <div class="middle-right">5</div>
  <div class="bottom-left">6</div>
  <div class="bottom-right">7</div>
</section>