CSS 网格 : Make an element fill empty space

Question

我有一个 CSS 网格，其中一些元素跨越多行。我试图让下方的元素紧贴其上方的元素，但它们一直粘在网格底部。

将 align-items 设置为 start 或 stretch 根本没有帮助。

ul {
  display: grid;
  grid-template-areas:
    "a b"
    "c b"
    "c d";
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-gap: 10px;
  align-items: start;
}
.a { grid-area: a; }
.b { grid-area: b; height: 5em; }
.c { grid-area: c; height: 10em; }
.d { grid-area: d; }



<ul>
  <li class="a">A</li>
  <li class="b">B</li>
  <li class="c">C</li>
  <li class="d">D</li>
</ul>

这使得 A 和 C 接触，但 B 和 D 不接触(除非你用更多文本填充 D)。我想让 B & D 接触，在底部留一个空隙(或者让 D 填满整个空间)。

在这里 fiddle :https://jsfiddle.net/JasonTank/Ltkhn6so/14/

Answer 1

如果您删除 ul 上的 align-items: start;，并添加到另一个区域，这样您就有 4 行，那么它应该可以按预期工作。

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-areas:
    "a b"
    "c b"
    "c d"
    "c d";
  grid-gap: 10px;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; height: 10em; }
.d { grid-area: d; }

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}


button {
  background: #f0f;
  color: #000;
  border-color: #00f;
  margin: 0 0 1em;
}

<ul>
  <li class="a">A</li>
  <li class="b">B</li>
  <li class="c">C</li>
  <li class="d">D</li>
</ul>

我已经更新了你的 fiddle给你。