Grid-Spuren

Eine Grid-Spur ist der Raum zwischen zwei benachbarten Gitterlinien. Sie werden im expliziten Raster durch die Verwendung der Eigenschaften grid-template-columns und grid-template-rows oder der Kurzform-Eigenschaften grid oder grid-template definiert. Spuren im impliziten Raster entstehen, indem ein Gitterelement außerhalb der im expliziten Raster erstellten Spuren positioniert wird.

Das Bild unten zeigt die erste Spurreihen eines Rasters.

Diagramm, das eine Grid-Spur zeigt.

Spurgrößen im expliziten Raster

Beim Definieren von Grid-Spuren mit den Eigenschaften grid-template-columns und grid-template-rows können Sie jede Längeneinheit verwenden, einschließlich der Flex-Einheit fr, die einen Anteil des verfügbaren Raums im Gittercontainer angibt.

Beispiel

Das nachfolgende Beispiel zeigt ein Raster mit drei Spalten, von denen die erste 200 Pixel, die zweite 1fr und die dritte 3fr groß ist. Sobald die 200 Pixel vom verfügbaren Raum im Gittercontainer abgezogen wurden, wird der verbleibende Raum durch 4 geteilt. Eine Einheit wird der zweiten Spalte zugewiesen, drei Einheiten der dritten Spalte.

css
.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 3fr;
}
html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Spurgrößen im impliziten Raster

Spuren, die im impliziten Raster erstellt werden, sind standardmäßig automatisch dimensioniert, jedoch können Sie mithilfe der Eigenschaften grid-auto-rows und grid-auto-columns eine Größe für diese Spuren definieren.

Siehe auch