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

Menyasarkan Lajur atau Baris Tertentu dalam Grid CSS

Dalam susun atur grid CSS, baris-templat-grid dan lajur-templat-grid sifat menentukan bilangan baris dan lajur, masing-masing. Walau bagaimanapun, kadangkala kita perlu menggayakan bahagian grid tertentu.

Menyasarkan Baris

Untuk menggayakan baris sewenang-wenangnya, kita boleh menggunakan elemen pembalut dengan paparannya ditetapkan kepada kandungan. Ini membolehkan kami menggayakan keseluruhan baris sebagai satu entiti, walaupun ia mengandungi berbilang sel.

Sebagai contoh, pertimbangkan kod berikut:

.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;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

Dalam contoh ini, kelas .grid-row-wrapper digunakan pada elemen pembalut yang mengandungi baris kedua item grid. Warna latar belakang item ini ditetapkan kepada biru langit menggunakan .grid-row-wrapper > .pemilih item grid.

Lajur Penyasaran

Menyasarkan lajur khusus adalah lebih rumit. Grid CSS tidak menyediakan cara langsung untuk memilih lajur, tetapi kami boleh menggunakan gabungan sifat lain untuk mencapai kesan yang diingini.

Satu pendekatan ialah menggunakan berbilang bekas grid, setiap satu dengan templat gridnya sendiri. Ini membolehkan kami mengawal reka letak setiap lajur secara bebas.

Pendekatan lain ialah menggunakan pemilih nth-child() untuk menyasarkan sel tertentu dalam grid. Walau bagaimanapun, ini mungkin sukar untuk dikekalkan, terutamanya jika grid berubah secara dinamik.

Jika anda perlu kerap menyasarkan lajur atau baris tertentu, selalunya lebih baik menggunakan prapemproses atau perpustakaan yang menyediakan pemilih dan fungsi tambahan untuk Grid CSS.

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