CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen

Präzise Positionierungen in mehrspaltigen Layouts

Mit CSS3 Grid Layout veröffentlicht das World Wide Web Consortium (W3C) seinen ersten Arbeitsentwurf (Working Draft - WD) einer Spezifikation, die Layouts ermöglicht, die denen von Zeitungen oder Büchern am ehesten entsprechen. Dabei funktioniert das Ganze ohne mehrfach verschachtelte Tabellen.

Artikel veröffentlicht am ,

Zusammen mit dem CSS3 Multi Column Layout Module (WD vom 6. Juni 2007), dem CSS3 Advanced Layout Module (WD vom 9. August 2007) und dem heute veröffentlichten Working Draft des CSS 3 Grid Positioning Module bietet CSS3 nun vieles, das mit CSS1 und CSS2 nur mit Mühen umzusetzen war oder den Einsatz von Tabellen erforderte. Von den ersten beiden Modulen gab es bereits Arbeitsentwürfe, die jedoch auf das Jahr 2005 datiert sind.

Inhalt:
  1. CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen
  2. CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen

Das Grid Positioning Module bietet die beiden Eigenschaften grid-columns für Spalten und grid-rows für Reihen an. Der Ansatz ist dabei vom Advanced Layout Module etwas verschieden. Letzteres unterteilt wie bei klassischen Tabellendesigns das Layout in einzelne Bereiche, die mehr oder weniger fest sind. Grid Positioning erlaubt hingegen die Positionierung an einem Gitternetz.

W3C Grid Layout: 3 Spalten; 6 und 2 Gittereinheiten sowie Standardabstände um das Layout herum
W3C Grid Layout: 3 Spalten; 6 und 2 Gittereinheiten sowie Standardabstände um das Layout herum

Das Bild in obigem Beispiel wird etwa mit

body { grid-columns: * * (0.5in * *)[2];
    grid-rows: 20% *;
    columns:3; column-gap:0.5in; }
    
img { float:page top left; float-offset: 4gr 1gr; }

positioniert. Die Eigenschaften Columns und column-gap sind aus dem Multi Column Layout Modul und beschreiben zunächst ein klassisches Drei-Spalten-Layout, das sich etwa in gedruckten Medien findet. Um das Bild zu definieren, braucht es jedoch weitere Möglichkeiten, die mit grid-columns bzw. -rows möglich werden. "* *" im Wert der grid-columns beschreibt die ersten beiden Spalten, in Klammern steht der Abstand zum Grid sowie weitere zwei Spalten und das "[2]" sorgt für eine Wiederholung der Werte, die in Klammern als wiederholbar gekennzeichnet wurden.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen 
  1. 1
  2. 2
  3.  


datenimperator 13. Sep 2007

Soll denn die zu erwartende Realität der mangelhaften Implementierungen dazu führen...

keinname 13. Sep 2007

Grids, Canvas, StackPanels, DockPanels... funktioniert alles wunderbar. Auch das Styling...

LeVito 13. Sep 2007

Das war/ist auch meine größte Hoffnung, als ich die Meldung gelesen habe. Leider geht...

LeVito 13. Sep 2007

Tabellenlayout muss nicht sein. Auch, wenn su "quick & dirty" manches erstmal einfacher...

Laury 12. Sep 2007

und ganz Oben stehen die Content-Strukturalisten, für die es eigentlich nur Text gibt...



Aktuell auf der Startseite von Golem.de
Raumfahrt
SpaceX-Rakete stürzt voraussichtlich im März auf den Mond

Ob sich Elon Musk so die erste Ankunft einer SpaceX-Rakete auf dem Mond vorgestellt hat?

Raumfahrt: SpaceX-Rakete stürzt voraussichtlich im März auf den Mond
Artikel
  1. Deutschland: E-Commerce wird immer mehr zum Normalfall
    Deutschland
    E-Commerce wird immer mehr zum Normalfall

    E-Commerce wird immer mehr als das Normale und Übliche empfunden, meint der Bundesverband E-Commerce und Versandhandel.

  2. Letzte Meile: Telekom will Preise für VDSL-Vermietung stark erhöhen
    Letzte Meile
    Telekom will Preise für VDSL-Vermietung stark erhöhen

    Die Telekom will von 1&1, Vodafone und Telefónica künftig erheblich mehr für die Anmietung der letzten Meile.

  3. G413 SE, G413 TKL SE: Logitech bringt zwei mechanische Tastaturen für weniger Geld
    G413 SE, G413 TKL SE
    Logitech bringt zwei mechanische Tastaturen für weniger Geld

    Normalerweise sind mechanische Tastaturen von Logitech sehr teuer - nicht so die G413 SE und TKL SE. Die verzichten dafür auf RGB.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • RTX 3090 24GB 2.349€ • RTX 3070 Ti 8GB 1.039€ • 1TB SSD PCIe 4.0 127,67€ • RX 6900XT 16 GB 1.495€ • Razer Gaming-Tastatur 155€ • LG OLED 65 Zoll 1.599€ • Razer Gaming-Maus 39,99€ • RX 6800XT 16GB 1.229€ • GOG New Year Sale: bis zu 90% Rabatt • Razer Gaming-Stuhl 179,99€ [Werbung]
    •  /