Bagaimanakah Saya Boleh Menggayakan Baris dan Lajur Khusus Secara Selektif dalam Reka Letak Grid CSS?

Penggayaan Sasaran untuk Reka Letak Grid CSS: Baris dan Lajur

Dalam reka letak grid CSS, menjadi penting untuk menyasarkan baris atau lajur tertentu secara terpilih untuk penggayaan yang tepat. Walaupun pemilih kanak-kanak ke-n boleh digunakan untuk pemilihan item tradisional, pemilih ini gagal dalam hal menyasarkan elemen dalam struktur grid.

Baris Penyasaran

Untuk menangani perkara ini had, pertimbangkan untuk menggunakan elemen pembungkus dengan sifat paparannya ditetapkan kepada kandungan. Teknik ini membolehkan anda menetapkan gaya secara khusus kepada anak pembalut, walaupun ia diletakkan dalam trek grid.

Sebagai contoh, coretan kod di bawah menunjukkan cara menyerlahkan baris tertentu dengan warna biru:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}

Dalam contoh ini, elemen pembungkus ".grid-row-wrapper" mempunyai sifat paparannya ditetapkan kepada kandungan, membenarkan anak langsungnya ".grid-item" untuk mewarisi warna latar belakang birunya, mencipta kesan yang diingini.

Lajur Penyasaran

Walaupun teknik di atas berkesan untuk baris, Reka Letak Grid CSS tidak mempunyai mekanisme yang setara untuk menyasarkan lajur tertentu secara langsung. Walau bagaimanapun, penyelesaian sandaran melibatkan pelarasan kedudukan elemen dalam grid menggunakan sifat justify-self atau align-self, yang boleh mencipta ilusi menyasarkan lajur tertentu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Baris dan Lajur Khusus Secara Selektif dalam Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!