Bagaimana untuk Mencapai Pengisian Grid Seperti Ular Menggunakan Grid CSS?

Menggunakan Grid CSS untuk Pengisian Grid Seperti Ular

Dalam grid CSS, sifat grid-auto-aliran mengawal reka letak item grid. Untuk mencapai corak pengisian seperti ular dalam grid berasaskan lajur, kami boleh memanfaatkan sifat ini.

Pertimbangkan senario berikut di mana kami mempunyai grid 3 baris dan ingin mengisi sel dalam bentuk seperti ular cara:

<code class="css">01 06 07 12
02 05 08 11
03 04 09 10</code>

Untuk mencapai matlamat ini, kita boleh menetapkan grid-auto-flow: column padat;. Ini akan mengisi lajur grid terlebih dahulu, sebelum beralih ke baris seterusnya. Untuk mengimbangi baris kedua, kita boleh menggunakan pemilih anak ke-n untuk menolak item tertentu ke bawah ke baris 2 seperti:

<code class="css">.container .div:nth-child(6n + 5) { grid-row: 2; }</code>

Untuk mengalihkan item baris ketiga, kita boleh menggunakan:

<code class="css">.container .div:nth-child(6n + 4) { grid-row: 3; }</code>

Dengan menggabungkan teknik ini, kami mendapat corak pengisian seperti ular yang diingini dalam sistem grid berasaskan lajur.

Kod Contoh

Berikut ialah contoh berfungsi yang menunjukkan pelaksanaan:

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

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

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pengisian Grid Seperti Ular Menggunakan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!