Bolehkah CSS GridQuery Mencipta Corak Sel Seperti Ular dalam Grid Berorientasikan Lajur?

Grid Garis Ular dengan Grid CSS

Pertanyaan: Adakah boleh menjana corak sel seperti ular dalam grid CSS berorientasikan lajur , sama seperti contoh di bawah?

    01 06 07 12
    02 05 08 11
    03 04 09 10

Penyelesaian:

Dengan mengandaikan bahawa grid akan sentiasa mempunyai tiga baris, berikut ialah penyelesaian yang bijak:

<code class="css">.container {
  display: grid;
  grid-template-rows: 20px 20px 20px;
  grid-auto-columns: 20px;
  grid-auto-flow: column dense;
}

.container > div:nth-child(6n + 4) { grid-row: 3; }
.container > div:nth-child(6n + 5) { grid-row: 2; }

/* Cosmetic styles */
.container {
  grid-gap: 5px;
  counter-reset: num;
  margin: 10px;
}

.container > div {
  border: 1px solid;
}
.container > div:before {
  content: counter(num);
  counter-increment: num;
}</code>

Kuncinya kepada penyelesaian ini ialah pemilih nth-child(), yang memilih elemen anak berdasarkan kedudukannya dalam induknya. Grid-auto-flow: lajur padat ialah perkara yang mengekalkan elemen dalam pembentukan lajur yang padat.

Teknik ini amat berguna apabila anda mahukan fleksibiliti corak isian seperti ular tetapi tanpa perlu menentukan setiap kedudukan sel tunggal secara manual.

Atas ialah kandungan terperinci Bolehkah CSS GridQuery Mencipta Corak Sel Seperti Ular dalam Grid Berorientasikan Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!