CSS-Grid-Bereiche

Einführung

• CSS Grid wird seit 2017 von allen wichtigen Browsern unterstützt
• Dennoch nutzen auch 2024 noch viele Menschen die Funktion grid-template-areas nicht
• Dieser Artikel möchte die Einfachheit und Leistungsfähigkeit von grid-template-areas erläutern

Benannte Grid-Bereiche in CSS

• In CSS Grid kann jeder Grid-Bereich mit einem Namen versehen und im gesamten CSS referenziert werden
• Zum Beispiel lässt sich ein Grid-Layout mit zwei Spalten definieren und jedem Element ein grid-area zuordnen

Regeln für Grid-Template-Bereiche

• Definierte Bereiche müssen rechteckig sein
• Alle Bereiche müssen definiert sein

Syntax für Grid-Templates

• Grid-Bereiche müssen mit der Eigenschaft grid-template-areas definiert werden
• Es können mehrere Bereichs-Strings verwendet werden
• Ein einzelner String bedeutet ein eindimensionales Layout, mehrere Strings bedeuten ein mehrdimensionales Layout

Benannte Grid-Linien in CSS

• Grid-Linien können mit eindeutigen Namen versehen werden
• In einem Grid mit 3 Spalten kann zum Beispiel jede Linie benannt werden
• Benannte Grid-Linien ersetzen die standardmäßigen Liniennummern nicht

Anwendungsfälle für Grid-Template-Bereiche

• Umkehr der Grid-Richtung: Mit grid-template-areas lässt sich die Layout-Richtung einfach ändern
• Header-Layout: Mit grid-template-areas kann ein Header-Layout definiert und responsiv gestaltet werden
• Editorial-Layout: Layouts mit verschiedenen Inhaltstypen lassen sich einfach definieren und ändern

Bedingte Layouts und CSS :has()

• Mit dem CSS-Selektor :has() kann das Layout abhängig davon geändert werden, ob ein Element vorhanden ist

Mehrsprachige Unterstützung (LTR/RTL)

• CSS Grid passt das Layout an die Seitenrichtung (LTR oder RTL) an
• Das bedeutet, dass auch benannte Grid-Bereiche der Seitenrichtung folgen

Grid-Bereiche und DevTools

• Alle wichtigen Browser bieten gute Werkzeuge für Grid-Bereiche (Chrome, Safari, Firefox)
• Jeder Browser visualisiert Grid-Bereiche auf unterschiedliche Weise

Zusammenfassung von GN⁺

• Die Funktion grid-template-areas von CSS Grid ist nützlich, um Layouts visuell zu verstehen und zu verwalten
• Besonders hilfreich ist sie, wenn Teammitglieder Layouts ändern müssen
• Dieser Artikel erklärt die Einfachheit und Leistungsfähigkeit von grid-template-areas und möchte so mehr Menschen dazu bringen, die Funktion zu nutzen
• Ein anderes Projekt mit ähnlicher Funktionalität ist Flexbox

[GN⁺]

Hacker-News-Kommentare

• Die Animationsdemo fand ich interessant, aber sie ist nicht mit CSS umgesetzt

  • Ich habe Flexbox gelernt und war zufrieden damit, daher hatte ich nicht das Gefühl, Grid lernen zu müssen
  • Es gibt Gründe, Grid zu bevorzugen, aber ich habe in der Praxis nie die Notwendigkeit gespürt
  • Für Datentabellen verwende ich echte Tabellen

• Dieser Artikel hebt die Vorteile von Grid und zugleich die Umständlichkeit der CSS-Syntax hervor

  • Es gibt zwei Dimensionen und drei Parameter (Start, Ende, Größe)
  • Für jeden Parameter gibt es mindestens drei Möglichkeiten, ihn zu deklarieren
  • Durch die Kurzschreibweisen ist es schwer zu lesen
  • Es ist schwer, Grid-Code anderer Entwickler zu lesen

• 1/3 ist kein Bruch, sondern ein Bereich von 1 bis 3

  • Ich kann nicht nachvollziehen, warum man sich für diese Syntax entschieden hat
  • In der Programmierung gibt es bessere Syntax für Bereiche (z. B. 1..3)

• Zu Grid Garden und Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• Ich hatte weder Grid noch Flexbox verstanden

  • Die letzte Layout-Strategie, die ich gut beherrscht habe, waren Floats
  • Dieser Artikel gibt mir das Selbstvertrauen, beim nächsten Layout-Design CSS Grid zu verwenden
  • Vielen Dank für den gut gemachten Artikel

• Ich frage mich, ob es eine vorgeschaltete Einführungsversion dieses Dokuments gibt

  • Ich habe mich schon in der Einleitung verloren
  • Ich habe nicht verstanden, was eine line number ist
  • Bei den Brüchen wie 1/3 und 1/4 bin ich hängen geblieben

• Ich empfehle Jen Simmons’ Mondrian with auto flow nachdrücklich

  • Jen Simmons Mondrian
  • Es sieht sehr cool aus, wenn man die Fenstergröße verändert
  • Ich würde gern verstehen, wie auto flow Lücken erkennt und füllt

• Ich frage mich, warum die Syntax als 1/2 und 3/4 definiert ist

  • Eine Syntax wie 1-2 oder 1->2 wäre wohl leichter zu verstehen

• Ich mag interaktive Blogposts

  • Ich empfehle, Grid-Bereiche im Tool auszuprobieren
  • Ich benutze Grid Layoutit seit Jahren, und damit ist das Anpassen von Abständen viel einfacher geworden

• Ich glaube, ich habe CSS Grid zum ersten Mal verstanden

  • Die Nummerierung war eine große Hilfe
  • Großartiger Artikel, auf den ich oft zurückkommen werde