CSS/Tutorials/Grid/mehrspaltige Layouts

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

Dieses Tutorial stellt mehrspaltige Allround-Layouts vor, die Seitenelemente nach dem Grundsatz „Mobile first!“ auf kleinen Viewports untereinander, bei breiteren Bildschirmen in mehreren Spalten nebeneinander angeordnet werden.

Als Grundlage verwenden wir unsere Webseite aus dem HTML5-Tutorial.

Holy-Grail-Layout[Bearbeiten]

Information: Holy-Grail-Layout

Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.
Es wird häufig gewünscht und implementiert, konnte aber viele Jahre lang mit damals verfügbarem CSS nur mit vielen Hacks, die alle Nachteile hatten, realisiert werden. Aus diesem Grund wurde das Finden einer optimalen Implementierung mit der Suche nach dem schwer fassbaren Heiligen Gral verglichen.[1][2]


Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen.

In der Zeit des Layouts mit CSS-floats konnte diese Struktur nur mit festen Höhen erreicht werden, die dann bei einem zusätzlichen Textabsatz „zerbrachen“. Mit Flexbox können solche Konstrukte hergestellt werden, benötigen oft aber noch einen zusätzlichen Wrapper.

Einfacher ist die Umsetzung mit Grid Layout:

HolyGrail.svg

Holy-Grail-Layout mit 3 Spalten ansehen …
body {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 45em) { 
	/* Breite beträgt mindestens 45em */ 
	body {
    grid-template-columns: 1fr 3fr 1fr;	
    grid-template-rows: auto 1fr 100px;
	}
}

header,footer {
	grid-column: 1 / -1;
}

Das Grid Layout erstellt für den body ein Raster mit 3 Spalten und 3 Reihen. Diese erhalten zum Teil feste, zum Teil flexible Höhen und Breiten. So bestehen die Werte für grid-template-columns nur aus Bruchteilen (fr - der verfügbare Platz verteilt sich automatisch. Die Höhe richtet sich in der ersten Reihe nach dem Inhalt (auto), in der letzten beträgt sie 100px Höhe - die mittlere Reihe nimmt mit der Festlegung 1fr wieder den verfügbaren Rest ein.

Nur header und footer werden mit grid-column von der ersten (1) bis zur letzen Randlinie (-1) positioniert. Im 3-Spalten-Layout bei breiten Viewports erstrecken Sie sich über die gesamte Breite.

Exkurs: Benannte Bereiche[Bearbeiten]

Neben der Möglichkeit, den header mit Spaltennummern zu formatieren (grid-column: 1 / -1;), können Sie benannte Bereiche festlegen:

body {
   grid-template-areas:
     "header header header"
     "nav    main   aside"
     "footer footer footer";
}

Diese Methode benötigt aber einen CSS-Regelsatz für jedes verwendete Element und jeweils angepasste Grid-areas an alle verwendeten media-queries.

Allerdings ist so das Layout der Seite übersichtlich in ASCII-Schemata vorhanden.

Beachten Sie: Die dreifache Verwendung des Begriffs footer bedeutet, dass sich der footer über 3 Rasterfelder erstreckt. Wie sich die Inhalte des footer-Elements anordnen, wird nicht im Raster des body-Elements festgelegt.[3]
responsives Raster mit benannten Bereichen 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";
 }
}

Zweispaltiges Layout[Bearbeiten]

Dieses Zweispalten-Layout besteht aus header, footer und main-Bereich. Daneben gibt es eine Infobox, die wir mit dem aside-Element auszeichnen.

2-Spaltig.svg

Seite mit 2 Spalten ansehen …
body {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 30em) { 
	/* Breite beträgt mindestens 30em */ 
	body {
		grid-template-columns: 1fr 3fr;	
		grid-template-rows: auto 1fr 100px;
	}
}

header,footer {
	grid-column: 1 / -1;
}

Erweiterung mit Navigation[Bearbeiten]

2-Spaltig.-plus-nav.svg

Seite mit 2 Spalten und Navigation ansehen …
body {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 30em) { 
	/* Breite beträgt mindestens 30em */ 
	body {
		grid-template-columns: 1fr 3fr;	
		grid-template-rows: auto 5em 1fr auto;
	}
}

header,footer {
	grid-column: 1 / -1;
}

aside {
  grid-row: 2 / 4;
}

nav li {
	display: inline-block;
	width: 22%;
	background: #dfac20;
}

nav li a {
	display: inline-block;
	padding: 0.5em;
	text-align:center;
	width: 100%;
}

Das Media-Objekt[Bearbeiten]

Das Media-Objekt ist ein Entwurfsmuster mit einer Grafik links und heading sowie Text rechts daneben. Der Begriff wurde 2010 von Nicole Sullivan geprägt.[4] Es scheint simpel und kann auf vielen Wegen realisiert werden.

Eine Umsetzung mit float, sowie eine Alternative mit display:tablecell finden Sie hier:

Jay Freestone stellt eine Umsetzung mit Grid Layout vor.[5]

Media-Objekt

Media-Objekt ansehen …
<ul class="media">
  <li>
    <img src="https://wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <h3>Frühling</h3>
    <p>Endlich wird es wieder ein bisschen sonniger und wärmer. 
       Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
     </p>
     <footer>
    optionaler Footer 
     </footer>  
  </li>
</ul>
Das Media-Objekt besteht aus einem Listenelement, das ein Bild, eine Überschrift sowie einen Textabsatz und optional einen Footer enthält.
.media li {
  display: grid;
  grid-template-columns: 7em 1fr;
  grid-template-rows: 2em 3em;
  gap: 1em;
  margin-bottom: 1em;
}

.media li>img {
  grid-row: 1 / 3;
  width: 6em;
}

Das Listenelement wird zum Grid-Container mit 2 Spalten und Reihen. Nur das Bild wird fest über zwei Zeilen verankert, durch seine Position im HTML kommt es in die erste Spalte. Alle anderen Elemente fügen sich automatisch in die Rasterzellen ein: Die Überschrift rechts oben, der Text rechts darunter. Der optionale footer würde in einer dritten, automatisch erzeugten Reihe am linken Rand stehen.

Weblinks[Bearbeiten]

  1. Wikipedia: Holy grail (web design)
  2. kulturbanause: Was ist ein »Holy Grail« Web-Layout?
  3. SELF-Forum: Dreispaltiges Layout vom 01.02.2021
  4. stubbornella: The media object saves hundreds of lines of code June 25, 2010 Nicole Sullivan
  5. Jay Freestone: Bulletproof flag components A resilient take on a flag-like media object.