Bagaimanakah `display: subgrid` Meletakkan Cucu dalam Grid CSS?

Ciri Subgrid: Meletakkan Cucu dalam Grid

Dalam Grid CSS, elemen biasanya merupakan anak langsung dari bekas grid. Walau bagaimanapun, dengan pengenalan sifat "display: subgrid", pembangun boleh meletakkan elemen yang merupakan cucu kepada grid pada grid itu sendiri.

Apakah Paparan: Subgrid?

Paparan: sifat subgrid mencipta bekas subgrid dalam item grid. Subgrid ini boleh mewarisi takrif grid induknya, membenarkan item grid di dalamnya sejajar dengan garis grid grid induk.

Menggunakan Paparan: Subgrid

Untuk letakkan elemen cucu pada grid induk, tetapkan elemen induk kepada "paparan: subgrid" dan berikan sifat grid yang diperlukan. Kemudian, tetapkan elemen cucu menjadi item grid dalam subgrid.

Contohnya:

<div class="wrapper">
  <div class="parent-grid">
<p>Dalam contoh ini, elemen "induk-grid" ditetapkan kepada "paparan: subgrid" dan mempunyai dua lajur. Elemen "grid-anak" ialah subgrid dalam grid induk dan ia mempunyai dua baris. "Elemen cucu" ialah item grid dalam grid kanak-kanak.</p>
<p>Akibatnya, elemen A, B dan C masing-masing akan menduduki baris mereka sendiri dalam grid induk.</p>
<p><strong>Sokongan Pelayar</strong></p>
<p>Paparan: subgrid masih merupakan ciri yang dicadangkan dalam spesifikasi Grid CSS dan belum lagi meluas disokong dalam pelayar utama. Ia tersedia dalam Firefox Nightly dan Microsoft Edge (dengan bendera).</p>
</div>
</div>

Atas ialah kandungan terperinci Bagaimanakah `display: subgrid` Meletakkan Cucu dalam Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!