CSS-Rasterlayout: Richten Sie die Grundlinie von Elementen, die sich über mehrere Zeilen erstrecken, an der unteren Zeile anderer Spalten aus.

Question

Ich möchte die Grundlinien von a und c ausrichten.

#grid{
  Anzeige:Gitter;
  Rastervorlagenspalten: 1fr 1fr;
  align-items: Grundlinie;
}
#A{
  Rasterreihe: 1 / Spannweite 2;
  Gitterspalte: 1;
  Polsterung: 8px;
  Hintergrund: rot;
}
#B{
  Gitterreihe: 1;
  Gitterspalte: 2;
  Hintergrund: gelb;
}
#C{
  Rasterreihe: 2;
  Gitterspalte: 2;
  Hintergrund: blau;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>

Ich habe versucht, das äußere Raster auf eine einzelne Zeile festzulegen und b und c mit dem Attribut inline-whatever in ein div zu packen, aber a richtet sich immer noch immer nach b statt nach c aus.

#grid{
  Anzeige:Gitter;
  Rastervorlagenspalten: 1fr 1fr;
  align-items: Grundlinie;
}
#A{
  Gitterreihe: 1;
  Gitterspalte: 1;
  Polsterung:8px;
  Hintergrund:rot;
}
#D{
  display:inline-block;
  Gitterreihe: 1;
  Gitterspalte: 2;
}
#B{
  Hintergrund:gelb;
}
#C{
  Hintergrund: blau
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div id="b">bbbbb</div>
    <div id="c">ccccc</div>
  </div>
</div>

Wie richtet man a und c an der Grundlinie aus?

Answer 1

由于last baseline相对较新（我正在使用不支持它的Electron 19），我正在寻找替代方法。参考这篇关于flex的SO帖子，结果我需要将inline-block包装在另一个容器中。

#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1;
  grid-column: 1;
  padding:8px;
  background:red;
}
#d{
  grid-row: 1;
  grid-column: 2;
}
#b{
  background:yellow;
}
#c{
  background:blue
}
.inline-block{
  display:inline-block;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div class="inline-block">
      <div id="b">bbbbb</div>
      <div id="c">ccccc</div>
    <div>
  </div>
</div>

Answer 2

我相信你想要声明align-items: last baseline。

"Can I Use align-items: last baseline?"显示全球支持率为85%。

有关规范术语，请参阅Flex容器基线。

#grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: last baseline;
}

#a {
  grid-row: span 2;
  padding: 8px;
  background: red;
}
#b {
  background: yellow;
}

#c {
  background: blue;
}

<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>