Bagaimanakah Saya Boleh Memohon Sifat Grid CSS pada Elemen Bersarang Dalam?

Konteks Grid dan Elemen Bersarang

Dalam Grid CSS, sifat grid dihadkan kepada elemen dalam perhubungan induk-anak. Ini mengehadkan kebolehgunaan sifat grid kepada elemen yang secara langsung merupakan anak kepada bekas grid.

Contoh Grid Bersarang

Pertimbangkan senario di mana anda cuba meletakkan kedudukan bersarang dalam elemen li menggunakan sifat grid digunakan pada ul peringkat atas yang mewakili bekas grid:

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Dalam contoh ini, Elemen li.orgChartLevel2b ialah keturunan ul.orgChartLevel1, tetapi ia bukan anak langsung. Oleh itu, sifat grid yang ditakrifkan pada ul.orgChartLevel1 tidak digunakan untuk li.orgChartLevel2b.

Penyelesaian: Wujudkan Hubungan Ibu Bapa-Anak

Untuk menggunakan sifat grid pada sarang yang mendalam elemen, anda perlu mewujudkan hubungan ibu bapa-anak antara elemen yang anda ingin gayakan dan bekas grid. Ini boleh dilakukan sama ada dengan:

• Menggunakan paparan: grid atau paparan: grid sebaris pada elemen induk antara bekas grid dan elemen yang diingini.
• Mengalih keluar sebarang elemen pembalut yang campur tangan yang menyekat hubungan ibu bapa-anak.

Nota tentang Bekas Grid Dalam Grid Item

Adalah penting untuk ambil perhatian bahawa item grid itu sendiri boleh menjadi bekas grid. Dalam kes sedemikian, sifat reka letak grid digunakan dalam skop item grid yang ditakrifkan sebagai bekas grid.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon Sifat Grid CSS pada Elemen Bersarang Dalam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!