15. Unterrichtsblock

CSS Grid-Items

Festlegung der Spalten

Bevor mit den Grid-Items begonnen werden kann, müssen wir ein Grid-Raster erstellen. Hierzu kommen wir auf die Lektion aus Unterrichtsblock 14. zurück und verwenden die Eigenschaft: grid-template-columns

/* Erstellung eines Rasters mit 6 Spalten */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
}

Hinweis: Wenn man mehr als 6 Elemente in einem 6-Spalten-Raster hat, wird dem Raster automatisch eine neue Zeile hinzugefügt, um die Elemente zu platzieren.

Die grid-template-columns-Eigenschaft kann auch verwendet werden, um die Größe (Breite) der Spalten anzugeben.

/* Legt eine Größe für die 4 Spalten fest */
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Untergeordnete Elemente (Items)

Ein Grid-Container enthält Grid-Items.

Standardmäßig hat ein Container ein Rasterelement für jede Spalte in jeder Zeile, aber man kann die Rasterelemente (Grid-Items) auch so gestalten, dass sie sich über mehrere Spalten und/oder Zeilen erstrecken.

Grid-Items können mit mehreren Eigenschaften angesteuert werden:

• grid-column
• grid-row
• grid-area

Die grid-column-Eigenschaft:

Die grid-column Eigenschaft definiert, auf welcher/n Spalte(n) ein Element (Item) platziert werden soll. Man kann somit definieren, wo das Element beginnt und wo das Element endet.

Hinweis: Die grid-column Eigenschaft ist eine Kurzformeigenschaft für die grid-column-start und die grid-column-end Eigenschaften.

Um ein Element zu platzieren, kann man sich auf Spaltennummern beziehen oder das Schlüsselwort „span“ verwenden, um festzulegen, wie viele Spalten das Element umfassen soll.

/*
  "elementA" beginnt in Spalte 1 und endet vor Spalte 5:
*/
.elementA {
  grid-column: 1 / 5;
}


/*
  "elementB" beginnt in Spalte 1 und umfasst insgesamt 3 Spalten:
*/
.elementB {
  grid-column: 1 / span 3;
}


/*
  "elementC" beginnt in Spalte 2 soll 3 Spalten umfassen:
*/
.elementC {
  grid-column: 2 / span 3;
}

Die grid-row-Eigenschaft:

Die grid-row Eigenschaft definiert, in welcher Zeile ein Element platziert werden soll. Man kann somit definieren, wo das Element beginnt und wo das Element endet.

Hinweis: Die grid-row Eigenschaft ist eine Kurzformeigenschaft für die grid-row-start und die grid-row-end Eigenschaften.

Um ein Element zu platzieren, können Sie sich auf Zeilennummern beziehen oder das Schlüsselwort „span“ verwenden, um zu definieren, wie viele Zeilen das Element umfassen soll:

/*
  "elementD" beginnt startet bei Zeile 1 und soll Bei Zeilenlinie 4 enden:
*/
.elementD {
  grid-row: 1 / 4;
}


/*
  "elementE" soll in Zeile 1 beginnen und sich über 2 Zeilen erstrecken:
*/
.elementE {
  grid-row: 1 / span 2;
}

Die grid-area-Eigenschaft

Die grid-area Eigenschaft kann als Kurzformeigenschaft für die Eigenschaften grid-row-start, grid-row-end, grid-column-start und grid-column-end verwendet werden.

/*
  "elementA" soll in Zeilenlinie 1 und Spaltenlinie 1 beginnen und bei Zeilenlinie 2 und Spaltenlinie 7 enden:
*/
.elementA {  Zeilenlinie Start      Spaltenlinie Start     Zeilenlinie Ende      Spaltenlinie Ende
  grid-area: 1                    / 1                    / 2                   / 7;
}


/*
  ".elementC" soll auf Zeilenlinie 2 und Spaltenlinie 6 beginnen und bei Zeilenlinie 4 und Spaltenlinie 7 enden:
*/
.elementC {
  grid-area: 2 / 6 / 4 / 7;
}

/*
  Hier soll ".elementJ" auf Zeilenlinie 6 und Spaltenlinie 1 beginnen und sich über 1 Zeile und 2 Spalten erstrecken:
*/
.elementJ {  Zeilenlinie Start    Spaltenlinie Start   Erstreckung über Zeilen    Erstreckung über Spalten
  grid-area: 6                  / 1                  / span 1                   / span 2;
}

Die Reihenfolge der Items

Das Grid-Layout ermöglicht es auch, die Elemente an beliebiger Stelle zu positionieren. Das erste Element im HTML-Code muss nicht auch als erstes Element im Raster erscheinen.

.elementA { grid-area: 1 / 3 / 2 / 4; }
.elementB { grid-area: 2 / 3 / 3 / 4; }
.elementC { grid-area: 1 / 1 / 2 / 2; }
.elementD { grid-area: 1 / 2 / 2 / 3; }
.elementE { grid-area: 2 / 1 / 3 / 2; }
.elementF { grid-area: 2 / 2 / 3 / 3; }

Man kann die Reihenfolge für bestimmte Bildschirmgrößen ändern, indem man Medienabfragen verwendet:

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Rasterelemente benennen

Die grid-area Eigenschaft kann auch verwendet werden, um Rasterelementen Namen zuzuweisen.

Auf benannte Grid-Elemente kann über die grid-template-areas Eigenschaft des Grid-Containers verwiesen werden.

/*
  Element1 erhält den Namen "flaeche" und erstreckt sich über alle fünf Spalten in einem fünfspaltigen Rasterlayout:
*/

.element1 {
  grid-area: flaeche;
}
.grid-container {
  grid-template-areas: 'flaeche flaeche flaeche flaeche flaeche';
}

<!-- Grid Container, mit der Aufteilung der Template-Areas -->

<div class="grid-container2" style="grid-template-areas:
    'kopf kopf kopf kopf kopf kopf'
    'navi inhalt inhalt inhalt rechts rechts'
    'footer footer footer footer rechts rechts';">

<!--
  Jede Zeile wird durch Apostrophe (' ') definiert.
  Die Spalten in jeder Zeile werden innerhalb der Apostrophe definiert und durch ein Leerzeichen getrennt.
-->

<!-- Einzelne Grid-Elemente mit der Zuweisung der Template-Areas -->

  <div style="grid-area: kopf">
    <h3>Hauptmenü</h3>
  </div>
  <div style="grid-area: navi">
    <h3>Seitenleiste</h3>
  </div>
  <div style="grid-area: inhalt">
    <h3>Hauptinhalt</h3>
  </div>
  <div style="grid-area: rechts">
    <h3>Weiterer Inhalt</h3>
  </div>
  <div style="grid-area: footer; margin-bottom: 0px;">
    <h3>Fußzeile</h3>
  </div>

</div>

Hinweis: Ein Punktzeichen steht für ein Gridelement ohne Namen.

/*
  Hier umfasst "flaeche" zwei Spalten in einem Gridlayout mit insgesamt fünf Spalten (Die Punktzeichen
  stehen für Elemente ohne Namen):
*/

.element1 {
  grid-area: flaeche;
}
.grid-container {
  grid-template-areas: 
    'flaeche flaeche . . .';
}

Um zwei Zeilen zu definieren, definiert man die Spalte der zweiten Zeile innerhalb eines anderen Satzes von Apostrophen.

/*
  "element1" wird zwei Spalten und zwei Zeilen umfassen:
*/
.grid-container {
  grid-template-areas: 
    'flaeche flaeche . . .' 
    'flaeche flaeche . . .';
}

/*
  Benennung aller Elemente und Erstellung einer gebrauchsfertigen Webseitenvorlage:
*/

.element1 { grid-area: kopf; }
.element2 { grid-area: links; }
.element3 { grid-area: inhalt; }
.element4 { grid-area: rechts; }
.element5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'kopf kopf kopf kopf kopf kopf'
    'links inhalt inhalt inhalt inhalt rechts'
    'footer footer footer footer footer footer';
}