Bagaimana untuk Mencipta Corak Pengisian Garis Ular dalam Grid CSS dengan Grid-Auto-Flow?

Grid-Auto-Flow dalam Snake Lines

Dalam grid CSS, adalah mungkin untuk mencipta corak pengisian seperti ular menggunakan sifat grid-auto-flow. Sifat ini menentukan cara ruang yang tinggal dalam grid diisi. Satu cara untuk mencapai corak seperti ular ialah menggunakan nilai tumpat lajur untuk sifat aliran automatik grid. Ini akan mengisi sel yang tersedia dalam lajur demi lajur, dan kemudian beralih ke baris seterusnya.

Untuk mencipta corak garisan ular, kita boleh menggunakan fakta bahawa akan sentiasa ada tiga baris dalam grid. Dengan menggunakan pemilih :nth-child, kami boleh menentukan bahawa setiap elemen keempat, kelima dan keenam masing-masing harus diletakkan dalam baris ketiga, kedua dan pertama. Ini menghasilkan corak isian seperti ular.

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

/* Irrelevant 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>

CSS ini akan menghasilkan hasil berikut:

<code class="html"><div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Corak Pengisian Garis Ular dalam Grid CSS dengan Grid-Auto-Flow?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!