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.

Anzeige

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.

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.

CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen 

datenimperator 13. Sep 2007

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

squanto 13. Sep 2007

es gibt übrigens schon ähnliche Projekte welche dies mit herkömmlichem CSS schaffen...

Crocus 13. Sep 2007

Sry, aber ich gebe dem Plattler hier vollkommen recht. Das was das W3C schon verbrochen...

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...

Kommentieren


Thomas goes .NET / 13. Sep 2007

CSS3 wird mehrspaltige Layouts ermöglichen

YellowLeds Weblog / 12. Sep 2007

CSS3 - bitte beschleunigen!



Anzeige

  1. Microsoft Dynamics CRM Architect & Developer (m/w)
    DVB Bank SE, Frankfurt
  2. Mitarbeiter/-in Informationstechnologie, Produktdatenmanagement / Bill of Materials Support und Prozesse
    Daimler AG, Sindelfingen
  3. Release- und Projekt-Manager mobile - international (m/w)
    PAYBACK GmbH, München
  4. APP-Entwickler (m/w) für iOS / Android
    GIGATRONIK Holding GmbH, Ingolstadt

 

Detailsuche


Folgen Sie uns
       


  1. Verband

    "Uber-Verbot ruiniert Ruf der Startup-Stadt Berlin"

  2. Kabel Deutschland

    2.000 Haushalte zwei Tage von Kabelschaden betroffen

  3. Cridex-Trojaner

    Hamburger Senat bestätigt großen Schaden durch Malware

  4. Ubuntu 14.04 LTS im Test

    Canonical in der Konvergenz-Falle

  5. Überwachung

    Snowden befragt Putin in Fernsehinterview

  6. Bleichenbacher-Angriff

    TLS-Probleme in Java

  7. Cyanogenmod-Smartphone

    Oneplus One kann nur auf Einladung bestellt werden

  8. Heartbleed-Bug

    Strato und BSI warnen Nutzer

  9. Gameface Labs Mark IV

    Virtuelle, drahtlose Android-Realität mit 1440p

  10. Verbraucherwarnung

    Nokia ruft Netzteile des Lumia 2520 zurück



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Test LG L40: Android 4.4.2 macht müde Smartphones munter
Test LG L40
Android 4.4.2 macht müde Smartphones munter

Mit dem L40 präsentiert LG eines der ersten Smartphones mit der aktuellen Android-Version 4.4.2, das unter 100 Euro kostet. Dank der Optimierungen von Kitkat überrascht die Leistung des kleinen Gerätes - und es dürfte nicht nur für Einsteiger interessant sein.

  1. LG G3 5,5-Zoll-Smartphone mit 1440p-Display und Kitkat
  2. LG L35 Smartphone mit Android 4.4 für 80 Euro
  3. Programmierbare LED-Lampe LG kündigt Alternative zur Philips Hue an

Vorratsdatenspeicherung: Totgesagte speichern länger
Vorratsdatenspeicherung
Totgesagte speichern länger

Die Interpretationen des EuGH-Urteils zur Vorratsdatenspeicherung gehen weit auseinander. Für einen endgültigen Abgesang auf die anlasslose Speicherung von Kommunikationsdaten ist es aber noch zu früh.

  1. Bundesregierung Vorerst kein neues Gesetz zur Vorratsdatenspeicherung
  2. Innenministertreffen Keine schnelle Neuregelung zur Vorratsdatenspeicherung
  3. Urteil zu Vorratsdatenspeicherung Regierung uneins über neues Gesetz

Windows 8.1 Update 1 im Test: Ein lohnenswertes Miniupdate
Windows 8.1 Update 1 im Test
Ein lohnenswertes Miniupdate

Microsoft geht wieder einen Schritt zurück in die Zukunft. Mit dem Update 1 baut der Konzern erneut Funktionen ein, die vor allem für Mausschubser gedacht sind. Wir haben uns das Miniupdate für Windows 8.1 pünktlich zur Veröffentlichung angesehen.

  1. Microsoft Installationsprobleme beim Windows 8.1 Update 1
  2. Windows 8.1 Update 1 Wieder mehr minimieren und schließen
  3. Microsoft Windows 8.1 Update 1 vorab verfügbar

    •  / 
    Zum Artikel