Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

Referenz:CSS/Eigenschaften/grid-template-areas

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft grid-template-areas CSS 3.0
Beschreibung Die grid-template-areas-Eigenschaft legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest.
erlaubte Werte
  • none
  • <string>: eine Leerzeichen-separierte Liste von Namen
default-Wert
  • none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif grid-template-areas
Beispiel
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";
 }
}

In schmalen Viewports werden die Kindelemente des body in zwei Spalten angeordnet. Bei einem größen Viewport wird auf ein 3-Spalten-Layout mit geänderter Anordnung umgeschaltet.

Beachten Sie

Die Browser IE10, IE 11 und Edge haben eine ältere Version der Spezifikation implemetiert, die diese Eigenschaft nicht kennt.

Tipp

{{{Tipp}}}