Bagaimana untuk Mencipta Corak Seperti Ular dalam Grid CSS dengan grid-auto-flow dan Struktur Baris Grid?

Menggunakan Grid-auto-flow untuk Pengisian Sel Talian Ular

Dalam grid CSS, grid-auto-flow mengawal penempatan automatik bagi item grid dalam grid. Secara lalai, sifat grid-auto-flow ditetapkan kepada baris, yang mengisi grid mengikut baris.

Untuk mencipta corak seperti ular dalam grid berasaskan lajur, kita boleh mengubah suai grid-auto- sifat aliran kepada tumpat lajur. Ini akan mengisi grid mengikut lajur, tetapi dengan cara yang padat, bermakna item akan mengisi ruang yang tersedia seketat mungkin.

Untuk menghasilkan corak seperti ular yang diingini, kita mesti menentukan struktur baris grid tersuai untuk menentukan sel mana yang perlu diletakkan dalam setiap baris. Ini boleh dicapai menggunakan sifat baris grid.

Pertimbangkan coretan kod berikut:

<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;
}</code>

Di sini, kami menyediakan grid dengan tiga baris dan menggunakan grid-auto-flow: lajur padat untuk mengisi grid dengan lajur. Kami kemudian menggunakan pemilih anak ke-n untuk menentukan bahawa setiap elemen anak keenam (ke-4, ke-10, ke-16, dsb.) hendaklah diletakkan di baris ketiga dan setiap elemen anak kelima (ke-5, ke-11, ke-17, dsb.) hendaklah diletakkan di barisan kedua. Ini menghasilkan corak seperti ular berselang-seli seperti yang dikehendaki.

<code class="html"><div class="container">
  <!-- Each div represents one cell -->
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div></code>

Coretan kod ini menghasilkan output berikut:

01 06 07
02 05 08
03 04 09

Dengan memanipulasi grid-auto-aliran dan menentukan struktur baris tersuai , anda boleh menggunakan grid CSS untuk mencipta corak yang menarik secara visual seperti pengisian sel garisan ular.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Corak Seperti Ular dalam Grid CSS dengan grid-auto-flow dan Struktur Baris Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!