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

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.

Akibatnya, elemen A, B dan C masing-masing akan menduduki baris mereka sendiri dalam grid induk.

Sokongan Pelayar

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).

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!