Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

CSS/Tutorials/Grid/benannte Linien und Rasterbereiche

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Grid
Wechseln zu: Navigation, Suche

Bei jedem Raster stellt sich die Frage nach der optimalen Anzahl und der Identifizierung der einzelnen Rasterelemente. Im Schach werden die Spalten mit den Buchstaben a-h, die Reihen oder Zeilen mit 1-8 gekennzeichnet. Im Printbereich hat sich ein 12er-Raster wie im letzten Kapitel erwähnt bewährt, da es durch 2,3,4,6 teilbar ist und so viele verschiedene Kombinationen erlaubt.

Im WebDesign ist dies aufgrund der Tatsache, dass es eben nicht um ein Design für eine bestimmte Größe mit einem bestimten Seitenverhältnis geht, sondern für eine Vielzahl von Viewports gedacht ist, nicht so wichtig.

Deshalb wäre es gut, Linien und Rasterfelder nicht aufgrund ihrer Position, sondern mit ihrer semantischen Bedeutung kennzeichnen zu können.


benannte Linien[Bearbeiten]

Auch wenn das Rechnen mit Zwölfteln, bzw. Bruchteilen einfacher ist, als das ständige Zusammenrechnen von Breiten, Innen- und Außenabständen - schlimmstenfalls in verschiedenen Maßeinheiten, bietet Grid Layout eine Alternative, die ganz ohne Mathematik auskommt. Anstelle von numerischen Werten können Sie den Rasterlinien auch semantische Namen geben, die das Positionieren der einzelnen Elemente ganz ohne Berechnungen erlaubt:

Beispiel: Grundraster mit benannten Linien ansehen …
body {
  display: grid;
  grid-template-columns: 1fr [main-links] 2fr [main-rechts] 1fr;
  grid-template-rows: min-content [main-oben] 1fr 1fr  [main-unten] min-content;	
}
Der body wird mit dem schon bekannten grid-template-columns in 3 Spalten eingeteilt, wobei die mittlere durch den Wert 2fr doppelt so breit ist. Die Werte für die Breiten werden jetzt nicht durch Leerzeichen, sondern durch in eckigen Klammern befindliche Liniennamen getrennt.
Auch für die Zeilen werden mit grid-template-rows Liniennamen vergeben. Hier fällt auf, dass die oberste und unterste Reihe durch das Schlüsselwort min-content so klein wie möglich dargestellt werden sollen.
header {
	grid-column-start: 1; 
	grid-column-end: rand-rechts;
}

nav {
	grid-row: main-oben / main-unten;		
				
}

article {
	grid-column-start: main-links;
	grid-row: main-oben / main-unten;			
}

aside {
	grid-column-start: main-rechts;
}

footer {
	grid-column: 1 / rand-rechts;
	grid-row-start: main-unten;				
}
Die Kindelemente erhalten nun ihre gewohnten Positionierungen. Anstelle eines Ausrechnens der Breiten und Höhen werden als Beginn und Ende der Elemente aber meist die benannten Linien verwendet.
Beachten Sie: Viele der oben noch verwendeten Festlegungen sind gar nicht nötig: Wenn ein Element nur eine Spalte breit oder eine Reihe hoch sein soll, kann die Festlegung auch weggelassen werden.

So werden die aside-Boxen in der rechten Spalte rechts des article-Elements positioniert. Die Höhe und vertikale Positionierung ist nicht festgelegt und wird von Browser bestimmt. Bei nur einer aside-Box würde sich eine Lücke ergeben - eine dritte aside-Box würde in der rechten Spalte unterhalb des footers dargestellt werden.

Wenn Sie auf die eigentlich nicht nötige Festlegung grid-row-start: main-unten; für den Footer verzichteten, würde eine zusätzliche aside-Box oberhalb des footers angeordnet werden.
Empfehlung: Nutzen Sie die Möglichkeiten des Grid Layout und verwenden Sie die Möglichkeiten der Positionierung nur sparsam. Der Browser verteilt die Elemente ganz von selbst im verfügbaren Platz!

Rasterbereiche[Bearbeiten]

In vielen Tutorials wird ein Vorteil von Grid Layout herausgestellt: Die Positionierung kann auch allein im Elternelement des Grid Containers vorgenommen werden:

Beispiel: Grundraster mit festgelegten Rasterbereichen ansehen …
body{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "head head head head"
                       "nav  main main news"
                       "nav  main main aside" 
					   "foot foot foot foot";
}

header {
  grid-area: head;	
}

nav {
  grid-area: nav;			
}

article {
  grid-area: main;				
}

aside {
  grid-area: aside;
}
		
#news {
  grid-area: news;			
}

footer {
  grid-area: foot;				
}
Die Kindelemente (Grid Items) erhalten in der grid-area-Eigenschaft einen Namen, der dann in grid-template-areas in einem Schema wieder auftaucht. In diesem Schema werden wie in einer ASCII-Zeichung die einzelnen Elemente des Rasters aufgeführt. Allerdings müssen die beiden aside-Boxen jetzt gesondert aufgeführt werden, da sie sich sonst überschreiben würden.

Anpassungen an andere Viewports[Bearbeiten]

Mit dieser Methode können Anpassungen an andere Viewports sehr schnell vorgenommen werden:

Beispiel: responsives Raster ansehen …
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";
 }
}

@media (min-width: 50em) { 
  body{
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "head head head head"
                         "nav  main main news"
                         "nav  main main aside" 
		  			     "foot foot foot foot";
 }
}
Die Kindelemente sind bis auf die beiden aside-Boxen untereinander angeordnet Bei einer Viewportgröße von mindestens 30em greift die media query und schaltet die entsprechenden Werte für grid-template-areas um, sodass Navigation und aside-Boxen nebeneinander dargestellt werden. Ab 50em Breite wird das „normale“ Desktop-Layout erzeugt.

feststehender Footer in der Desktopansicht[Bearbeiten]

Was im Grid Layout anfangs sehr verwirrt, ist die Vielzahl von gleichklingenden Eigenschaften. So wie grid-row-start zu shorthand grid-row und dann sogar zu grid-area zusammengefasst werden kann, können die Eigenschaften grid-template-columns, grid-template-rows und grid-template-areas in der zusammenfassenden Eigenschaft grid-template notiert werden. Aber auch diese ist Teil der zusammenfassenden Eigenschaft grid:

Beispiel: responsives Raster mit feststehenden Footer in der Desktopversion ansehen …
body{
  min-height: 100vh;
  display: grid;
  grid: "head head "
        "nav  nav"
        "main main"
        "news aside" 
        "foot foot"
        / 1fr 1fr;
}

@media (min-width: 30em) { 
  body{
    grid: "head head head "
          "nav  news aside"
          "main main main" 
          "foot foot foot"
          / 1fr  1fr 1fr;
 }
}

@media (min-width: 50em) { 
  body{
    grid: "head head head head" 150px
          "nav  main main news"   1fr
          "nav  main main aside"  1fr
          "foot foot foot foot" min-content
          / 1fr  1fr  1fr  1fr;
 }
}
In diesem Beispiel ist der body mit einer min-height von 100vh ausgestatttet, sodass er auch auf großen Monitoren immer bis ganz nach unten reicht.

Die Festlegungen der grid-template-areas und grid-template-columns werden nun in der zusammenfassenden Eigenschaft grid kürzer notiert. Beachten Sie, dass die Verwendung der repeat()-Funktion hier nicht möglich ist und die Spalten nacheinander ausgeschrieben werden müssen.

In den beiden schmalen Ansichten werden die Zeilen implizit erzeugt, in der dritten Ansicht erhält die ASCII-Zeichnung des Rasteraufbaus auf der rechten Seite Höhenangaben. Während der header einen festen Werte erhält, passt sich der footer mit min-content an den vorhandene Inhalt an und kann so nie das Layout zerschießen. Die beiden mittleren Zeilen verteilen sich über den verfügbaren restlichen Raum.


Anwendungsbeispiele[Bearbeiten]

Formular[Bearbeiten]

Formulare müssen klar und übersichtlich sein. Häufig wurde die Gestaltung durch zahlreiche wrapper-Elemente und Zeilenumbrüche erreicht. Mit dem Grid Layout können Sie nun alle Formular-Elemente an einem Raster ausrichten:

Beispiel: Formular ansehen …
form {
  display: grid;
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  grid-column: controls;
  grid-row: auto;
}
#department-block {
  grid-row: span 3;
  grid-column: oversized;
}

#buttons {
  grid-row: auto;
  grid-column: 1 / -1;
  text-align: end;
}
Das Formular form wird zu einem Raster mit drei Spalten, deren Größe inhaltsbasiert ist. Die entsprechende Rasterlinien erhalten aussagekräftige Namen.

Alle label-Elemente werden in die label-Spalte platziert; mit grid-row: auto; werden sie automatisch auf die Zeilen verteilt.
Analog wird mit den Eingabeelementen verfahren, die in der controls-Spalte platziert werden.
Das select-Menü mit der id department-block wird in die oversized-Spalte positioniert und umspannt dort 3 Zeilen (Auf mobilen Geräten wird das select-Menü durch ein Popup mit radio-Buttons ersetzt.)

Die Buttons werden von einem div umschlossen, das sich wegen grid-column: 1 / -1; über die gesamte Breite des Rasters erstreckt.

Definitionsliste[Bearbeiten]

Die Elemente von Definitions- oder Beschreibungslisten werden in der browsereigenen Darstellung untereinander angezeigt. Das Platzieren der Blöcke kann schwierig werden, da bei mehreren dd-Elementen ein gemeinsames Elternelement fehlt. Mit Grid Layout ist es möglich, Definitionslisten in ein kompaktes Raster zu fassen.

Beispiel: Formular ansehen …
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 300px;
  margin: 1em;
  line-height: 1.4;
}
dt {
  grid-column: 1;
  font-weight: bold;
}
dd {
   grid-column: 2;
 }
Die Beschreibungsliste dl besteht aus zwei Spalten, deren erste sich am vorhandenen Inhalt ausrichtet. Die zweite nimmt den verfügbaren restlichen Raum ein. Der dt-Ausdruck beginnt an der ersten Rasterlinie, also in der 1. Spalte, die Beschreibungen dd immer in der zweiten.

Fazit[Bearbeiten]

Mit den benannten Linien und mehr noch, mit den ASCII-Rastern können Sie das Layout Ihrer Webseite mit wenigen Zeilen CSS festlegen und über media queries entsprechend aktivieren. Allerdings müssen Sie bei komplexeren Layouts oder anders aufgebauten Unterseiten neue Raster anlegen.

Einfacher wäre es den Rasterfelder bestimmte Mindest- und Maximal-Größen geben zu können, so dass der Browser diese selbst platziert. Wie das funktioniert, erfahren Sie im nächsten Kapitel.