Question

我有一个CSS网格，其中某些元素跨越多行。我正在尝试使下部元素紧贴其上方的元素，但它们始终粘在网格底部。

将对齐项设置为开始或拉伸完全没有帮助。

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填充整个空间）。

在这里拨弄：https://jsfiddle.net/JasonTank/Ltkhn6so/14/

Answer 1

如果您将align-items: start;上的ul移开，然后添加另一个区域，以便有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。

CSS网格：使元素填充空白空间

1 个答案: