Wie erreicht man mit CSS Grid eine schlangenartige Rasterfüllung?

CSS-Raster für schlangenartige Rasterfüllung verwenden

In CSS-Rastern steuert die Eigenschaft „grid-auto-flow“ das Layout von Rasterelementen. Um ein schlangenartiges Füllmuster in einem spaltenbasierten Raster zu erzielen, können wir diese Eigenschaft nutzen.

Stellen Sie sich das folgende Szenario vor, in dem wir ein 3-Zeilen-Raster haben und die Zellen schlangenartig füllen möchten Art und Weise:

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

Um dies zu erreichen, können wir „grid-auto-flow: Column Density“ festlegen. Dadurch werden zuerst die Rasterspalten gefüllt, bevor mit der nächsten Zeile fortgefahren wird. Um die zweite Zeile zu verschieben, können wir den Selektor für das n-te Kind verwenden, um bestimmte Elemente nach unten in Zeile 2 zu verschieben, wie zum Beispiel:

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

Um die Elemente der dritten Zeile zu verschieben, können wir Folgendes verwenden:

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

Durch die Kombination dieser Techniken erhalten wir das gewünschte schlangenartige Füllmuster innerhalb eines spaltenbasierten Rastersystems.

Beispielcode

Hier ist ein Arbeitsbeispiel, das die Implementierung demonstriert:

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

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS Grid eine schlangenartige Rasterfüllung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!