Flexbox/浮动锚项目到顶部[重复]

Question

考虑这个例子：

请注意，第 4 项被推到顶部，而不是与第 3 项对齐。我无法使用 flexbox 的 align-items: flex-end 来实现这一点，也无法使用浮点数。

我知道通过使用砖石/同位素来实现这一点，但我想避免只为这种布局使用 javascript。

是否可以仅使用 CSS 来实现？

Answer 1

是的，可以通过CSS Grid Layout：

.grid {
  display: grid;
  grid-gap: 10px 30px;
  grid-template-rows: auto 1fr auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  align-self: flex-start;
}

.a {
  grid-row: 1 / span 2;
  /* setting height just for demo */
  height: 200px;
}

.b {
  grid-column: 2;
}

.c {
  grid-row: 3;
}

.d {
  grid-column: 2;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>

如果您需要 IE\Edge 支持，您应该使用旧的网格语法。您可以使用额外的网格列和行来伪造grid-gap。演示：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 30px 1fr;
  -ms-grid-rows: auto 10px 1fr 10px auto;
  grid-template-rows: auto 10px 1fr 10px auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  -ms-grid-row-align: start;
  align-self: flex-start;
}

.a {
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
  /* setting height just for demo */ 
  height: 200px;
}

.b {
  -ms-grid-column: 3;
  grid-column: 3;
}

.c {
  -ms-grid-row: 5;
  grid-row: 5;
}

.d {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 3;
  grid-row: 3;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>