Wie erstelle ich ein schlangenartiges Muster in CSS-Grids mit Grid-Auto-Flow und Grid-Zeilenstruktur?

Verwenden von Grid-Auto-Flow zum Füllen von Zellen in Schlangenlinien

In CSS-Rastern regelt Grid-Auto-Flow die automatische Platzierung von Rasterelemente innerhalb des Rasters. Standardmäßig ist die Eigenschaft „grid-auto-flow“ auf „Zeile“ eingestellt, wodurch das Raster zeilenweise gefüllt wird.

Um ein schlangenartiges Muster in einem spaltenbasierten Raster zu erstellen, können wir die Eigenschaft „grid-auto-flow“ ändern. Fließeigenschaft zur Säulendichte. Dadurch wird das Raster spaltenweise, aber dicht gefüllt, was bedeutet, dass die Elemente den verfügbaren Platz so eng wie möglich ausfüllen.

Um das gewünschte schlangenartige Muster zu erzeugen, müssen wir eine benutzerdefinierte Rasterzeilenstruktur festlegen, um sie zu bestimmen welche Zellen in jeder Zeile platziert werden sollen. Dies kann mit der Eigenschaft „grid-row“ erreicht werden.

Bedenken Sie den folgenden Codeausschnitt:

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

Hier richten wir ein Raster mit drei Zeilen ein und verwenden Grid-Auto-Flow: Spalte dicht, um das Raster spaltenweise zu füllen. Anschließend verwenden wir den Selektor für das n-te Kind, um anzugeben, dass jedes sechste untergeordnete Element (4., 10., 16. usw.) und jedes fünfte untergeordnete Element (5., 11., 17. usw.) in der dritten Zeile platziert werden sollen in der zweiten Reihe platziert. Dadurch wird wie gewünscht das abwechselnde schlangenartige Muster erzeugt.

<code class="html"><div class="container">
  <!-- Each div represents one cell -->
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div></code>

Dieses Code-Snippet erzeugt die folgende Ausgabe:

01 06 07
02 05 08
03 04 09

Durch Manipulation des automatischen Rasterflusses und Definition einer benutzerdefinierten Zeilenstruktur , können Sie CSS-Raster verwenden, um optisch ansprechende Muster wie die Zellenfüllung mit Schlangenlinien zu erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein schlangenartiges Muster in CSS-Grids mit Grid-Auto-Flow und Grid-Zeilenstruktur?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!