Kann CSS GridQuery schlangenartige Zellmuster in spaltenorientierten Rastern erstellen?

Schlangenlinienraster mit CSS-Raster

Abfrage: Ist es möglich, schlangenartige Zellmuster innerhalb eines spaltenorientierten CSS-Rasters zu generieren? , ähnlich dem Beispiel unten?

    01 06 07 12
    02 05 08 11
    03 04 09 10

Lösung:

Angenommen, das Raster wird immer drei Zeilen haben, hier ist eine clevere Lösung:

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

/* Cosmetic 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>

Der Schlüssel Zu dieser Lösung gehört der nth-child()-Selektor, der untergeordnete Elemente basierend auf ihrer Position innerhalb ihres übergeordneten Elements auswählt. Der Grid-Auto-Flow: Column Dense sorgt dafür, dass das Element in einer dichten Formation von Spalten bleibt.

Diese Technik ist besonders nützlich, wenn Sie die Flexibilität eines schlangenartigen Füllmusters wünschen, ohne jedoch jedes einzelne definieren zu müssen Position einer einzelnen Zelle manuell festlegen.

Das obige ist der detaillierte Inhalt vonKann CSS GridQuery schlangenartige Zellmuster in spaltenorientierten Rastern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!