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. SAP-Entwickler (m/w) für ABAP & Process Integration
    Star Cooperation GmbH, Großraum Stuttgart
  2. Software Engineer (m/w)
    Cognitec Systems GmbH, Dresden
  3. Funktions- / Software-Entwickler/-in Complex Driver für Motorsteuerung
    Robert Bosch GmbH, Schwieberdingen
  4. ERP Systembetreuer (m/w) für Microsoft Dynamics NAV und Datenbanklösungen
    Elektrokeramik Sonneberg GmbH, Sonneberg

 

Detailsuche


Hardware-Angebote
  1. TIPP: USB-Ventilatoren von Arctic
    ab ca. 7,65€ inkl. Versand
  2. PCGH-Extreme-PC GTX980Ti-Edition
    (Core i7-5820K + Geforce GTX 980 Ti)
  3. TIPP: Twitfish Retro USB-Ventilator - Schwarz
    3,75€ +2,99€ Versand

 

Weitere Angebote


Folgen Sie uns
       


  1. Media Broadcast

    DVB-T2 verspricht exklusive Inhalte in 1080p/50

  2. Airbus E-Fan 2.0

    In 38 Minuten nach Calais

  3. Square Enix

    Mac-Version von Final Fantasy 14 zurückgezogen

  4. Smartphone

    Oneplus Two soll unter 450 US-Dollar kosten

  5. Derek Smart

    "Star Citizen wird es nie geben"

  6. IETF

    Rätselaufgaben gegen DDoS-Angriffe auf TLS

  7. Windows 10

    RTM-Version für diese Woche geplant

  8. Hero 4 Session ausprobiert

    Gopros neuer Zauberwürfel

  9. Protest

    WLAN-Störerhaftung soll gegen EU-Recht verstoßen

  10. Mojang

    Spezielle Version von Minecraft für Windows 10



Haben wir etwas übersehen?

E-Mail an news@golem.de



Unity: "Inzwischen entstehen viele tolle Spiele ohne Programmierer"
Unity
"Inzwischen entstehen viele tolle Spiele ohne Programmierer"
  1. Unity Technologies 56.289 Engine-Tests in einer Nacht
  2. Engine Unity 5.1 mit neuer Rendering-Pipeline für Virtual Reality
  3. Microsoft Hololens setzt auf die Unity-Engine

Linux Mint 17.2 im Test: Desktops ohne Schnickschack, aber mit Langzeitunterstützung
Linux Mint 17.2 im Test
Desktops ohne Schnickschack, aber mit Langzeitunterstützung
  1. Fedora 22 im Test Das Ende der Experimentierphase
  2. Linux Mint Cinnamon 2.6 verringert CPU-Last deutlich
  3. Linux-Distributionen im Test Rosa Desktop Fresh kooperiert mit aktueller Hardware

Airbus E-Fan 2.0: Elektromobilität geht auch in der Luft
Airbus E-Fan 2.0
Elektromobilität geht auch in der Luft
  1. Oneweb Airbus baut gigantische Internet-Satelliten-Konstellation
  2. Raumfahrt Airbus entwickelt wiederverwendbares Raketentriebwerk
  3. Airbus Flugzeugtragflächen sollen mit Piezoelementen Strom erzeugen

  1. Re: Sick and tired...

    AlphaStatus | 19:51

  2. Re: ÖRs und auch private Sender bieten keinen...

    laserbeamer | 19:51

  3. Re: Was hat cryengine mit welt-berechnungen zu tun?

    theonlyone | 19:45

  4. Re: Erst Batman Arkham Knight und jetzt das

    Spiritogre | 19:44

  5. Re: Was ich nicht verstehe ist...

    vulkman | 19:43


  1. 18:12

  2. 18:04

  3. 17:46

  4. 17:38

  5. 16:52

  6. 15:38

  7. 15:11

  8. 15:00


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel