How to Achieve Snake-Like Grid Filling Using CSS Grid?

Using CSS Grid for Snake-Like Grid Filling

In CSS grids, the grid-auto-flow property controls the layout of grid items. To achieve a snake-like filling pattern in a column-based grid, we can leverage this property.

Consider the following scenario where we have a 3-row grid and want to fill the cells in a snake-like manner:

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

To achieve this, we can set grid-auto-flow: column dense;. This will fill the grid columns first, before moving on to the next row. To offset the second row, we can use the nth-child selector to push specific items down to row 2 like:

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

To move the third row items, we can use:

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

By combining these techniques, we get the desired snake-like filling pattern within a column-based grid system.

Example Code

Here is a working example that demonstrates the implementation:

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

The above is the detailed content of How to Achieve Snake-Like Grid Filling Using CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!