html - CSS Grid——网格行跨度移动元素

Question

在这个例子中，e 被插入到错误的位置(grid-row: span 4 让它移动到那里，因为那里有空间，而不是让它跨越它应该在的位置下面的行。

f 和 g 保持在正确的位置(使用 grid-row: span 5)但行不是“跨越”下面的行......

有没有办法让它们(e - f - g)在这种特殊情况下跨越下面的行以及e 不插入其他地方而不是应该插入的地方？

在代码片段下方，您将看到我想要使用此网格实现的目标。

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "a a a a a a a a a a"
    ". . . . . . . . . ."
    "b b b b b b b b b b"
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . c c c c c c c"
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". d d d e e f f g g"
    "h h h h . . . . . ."
    "h h h h . . . . . ."
    "h h h h . . . . . ."
    "h h h h . . . . . .";
  border: 2px solid red;
}

.container > div {
  border: 2px solid lime;
  height: 25px;
}

.a {
  grid-area: a;
  grid-row: span 2;
}

.b {
  grid-area: b;
  grid-row: span 3;
}

.c {
  grid-area: c;
  grid-row: span 4;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
  grid-row: span 4;
  grid-column: span 2;
}

.f {
  grid-area: f;
  grid-row: span 5;
  grid-column: span 2;
}

.g {
  grid-area: g;
  grid-row: span 5;
  grid-column: span 2;
}

.h {
  grid-area: h;
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
  <div class="h">h</div>
</div>

这是我想要实现的目标:

Answer 1

对于行的 25px 高度，您只需为网格容器添加 grid-auto-rows: 25px。

为了实现所需的布局，您只需更改 grid-tempate-areas 属性值并删除所有 grid-row 和 grid-column定义。

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-areas:
    "a a a a a a a a a a"
    "b b b b b b b b b b"
    ". . . c c c c c c c"
    ". d d d e e f f g g"
    "h h h h e e f f g g";
  border: 2px solid red;
  grid-auto-rows: 25px;
}

.container > div {
  border: 2px solid lime;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
  <div class="h">h</div>
</div>