<p>Ich möchte die Grundlinien von a und c ausrichten. </p> <p><br /></p> <pre class="brush:css;toolbar:false;">#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; }</pre> <pre class="brush:html;toolbar:false;"><div id="grid"> <div id="a">aaaaa</div> <div id="b">bbbbb</div> <div id="c">ccccc</div> </div></pre> <p><br /></p> <p>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. </p> <p><br /></p> <pre class="brush:css;toolbar:false;">#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 }</pre> <pre class="brush:html;toolbar:false;"><div id="grid"> <div id="a">aaaaa</div> <div id="d"> <div id="b">bbbbb</div> <div id="c">ccccc</div> </div> </div></pre> <p><br /></p> <p>Wie richtet man a und c an der Grundlinie aus? </p>

#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>

#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>