Wie erstelle ich mit Grid-Auto-Flow ein Schlangenlinien-Füllmuster im CSS-Raster?

Raster-Auto-Flow in Schlangenlinien

Im CSS-Raster ist es möglich, mithilfe der Eigenschaft „Grid-Auto-Flow“ ein schlangenartiges Füllmuster zu erstellen. Diese Eigenschaft bestimmt, wie der verbleibende Platz im Raster gefüllt wird. Eine Möglichkeit, ein schlangenartiges Muster zu erzielen, besteht darin, den Spaltendichtewert für die Eigenschaft „Grid-Auto-Flow“ zu verwenden. Dadurch werden die verfügbaren Zellen spaltenweise gefüllt und dann zur nächsten Zeile übergegangen.

Um ein Schlangenlinienmuster zu erstellen, können wir uns die Tatsache zunutze machen, dass es immer drei sind Zeilen im Raster. Mithilfe des :nth-child-Selektors können wir festlegen, dass jedes vierte, fünfte und sechste Element in der dritten, zweiten bzw. ersten Zeile platziert werden soll. Dadurch entsteht das schlangenartige Füllmuster.

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

Dieses CSS erzeugt das folgende Ergebnis:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Grid-Auto-Flow ein Schlangenlinien-Füllmuster im CSS-Raster?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!