Frage zu wiki-Beitrag

[Piet]

Moin,

Auf grid-template-areas

steht

body{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "head head"
                       "nav  nav"
                       "main main"
                       "news aside" 
                       "foot foot";
}

@media (min-width: 30em) { 
  body{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "head head head"
                         "nav  news aside"
                         "main main main" 
                         "foot foot foot";
 }
}
header {
  grid-area: head;	
}

Wo findet sich eine genauere Beschreibung über grid-template-areas? Leider findet sich zu dem Code-Schnipsel kein Inhalt, so dass man das Ergebnis des Browsers sehen könnte.

[Rolf B]

Hallo Piet,

das Beispiel stammt aus dem unter Siehe auch aufgeführten Artikel „benannte Linien und Rasterbereiche“. Schau dort unter Anpassungen an andere Viewports.

Die Wiki-Referenzseiten unterstützen zur Zeit keine Verknüpfung zu anzeigbaren Beispielen, man kann sicher darüber nachdenken, das einzubauen.

Rolf

[Piet]

Hallo Rolf,
danke für die Info.
Neue Frage:

entspricht grid-template-columns: repeat(2, 1fr);

dem grid-template-columns: 1fr, 1fr; ?

[Matthias Scharwies]

Servus!

Hallo Rolf,
danke für die Info.
Neue Frage:

entspricht grid-template-columns: repeat(2, 1fr);

dem grid-template-columns: 1fr, 1fr; ?

Ja, genau! Wobei zwischen die 1fr kein Komma kommt. (Füge hier mal Kommas zwischen die Werte ein und drücke auf aktualisieren: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS-mehrspaltige_Layouts-3.html#view_result)

Die repeat-Funktion wird hier beschrieben: CSS/Funktionen/repeat()

repeat( <repeat-count>, <track-list> )

Da kommt ein Komma zwischen die beiden Werte, bzw. Werteangaben der tracklist und kein Leerzeichen zwischen Funktion und Klammer!

Herzliche Grüße

Matthias Scharwies