CSS grid – grid-row-span 移动元素

Question

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

f 和 g 保持在正确的位置（grid-row: span 5）但行不是 "spanning" 下面的行…

有没有办法让它们 (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>

CSS grid – grid-row-span 移动元素

CSS Grid – grid-row span moving element

html

css

css-grid