时间戳

首页 > 解决方案 > CSS Grid：使元素填充空白区域

css - CSS Grid：使元素填充空白区域

问题描述

我有一个 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 填满整个空间）。

在这里小提琴：https ://jsfiddle.net/JasonTank/Ltkhn6so/14/

标签： csscss-grid

解决方案

如果您删除您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>

我已经为你更新了你的小提琴。

推荐阅读