12-spann-Raster

Ein weiterer Klassiker: das 12-Spann-Raster. Mit der Funktion repeat() können Sie schnell Raster in CSS schreiben. Wenn Sie repeat(12, 1fr); für die Spalten der Rastervorlage verwenden, erhalten Sie 12 Spalten mit jeweils 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

Sie haben nun ein Trackraster mit 12 Spalten, mit dem Sie untergeordnete Elemente platzieren können. Eine Möglichkeit wäre, sie mithilfe von Rasterlinien zu platzieren. Beispiel: grid-column: 1 / 13 erstreckt sich von der ersten Zeile bis zur letzten Zeile (13.) und umfasst 12 Spalten. grid-column: 1 / 5; würde die ersten vier umfassen.

Eine andere Möglichkeit, dies zu schreiben, ist das Schlüsselwort span. Mit span legen Sie die Startzeile fest und bestimmen, wie viele Spalten vom Startpunkt aus abgedeckt werden sollen. In diesem Fall entspricht grid-column: 1 / span 12 grid-column: 1 / 13 und grid-column: 2 / span 6 entspricht grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}