Reka Letak Grid CSS: Jajarkan garis dasar elemen yang menjangkau berbilang baris ke baris bawah lajur lain.

Question

Saya mahu menjajarkan garis dasar a dan c.

#grid{
  paparan:grid;
  grid-template-lajur: 1fr 1fr;
  align-item: garis dasar;
}
#a{
  grid-row: 1 / span 2;
  lajur grid: 1;
  padding: 8px;
  latar belakang: merah;
}
#b{
  baris grid: 1;
  lajur grid: 2;
  latar belakang: kuning;
}
#c{
  baris grid: 2;
  lajur grid: 2;
  latar belakang: biru;
}

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

Saya cuba menetapkan grid luar kepada satu baris dan membalut b dan c dalam div dengan atribut inline-whatever, tetapi a masih sentiasa sejajar dengan b bukannya c.

#grid{
  paparan:grid;
  grid-template-lajur: 1fr 1fr;
  align-item: garis dasar;
}
#a{
  baris grid: 1;
  lajur grid: 1;
  padding:8px;
  latar belakang:merah;
}
#d{
  paparan:sebaris-blok;
  baris grid: 1;
  lajur grid: 2;
}
#b{
  latar belakang:kuning;
}
#c{
  latar belakang: biru
}

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

Bagaimana untuk menjajarkan a dan c dengan garis dasar?

Answer 1

Memandangkan garis dasar terakhir agak baru (saya menggunakan Electron 19 yang tidak menyokongnya), saya sedang mencari alternatif. Merujuk kepada siaran SO tentang flex ini, ternyata saya perlu membungkus blok sebaris dalam bekas lain.

#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

Saya percaya anda ingin mengisytiharkan align-item: garis dasar terakhir.

"Bolehkah saya Menggunakan align-item: last baseline menunjukkan kadar sokongan global sebanyak 85%.

Untuk terminologi spesifikasi, lihat Garis Dasar Kontena 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>