Abo
  • Services:
Anzeige

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.

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.

Anzeige

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 

eye home zur Startseite
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...


Thomas goes .NET / 13. Sep 2007

YellowLeds Weblog / 12. Sep 2007

CSS3 - bitte beschleunigen!



Anzeige

Stellenmarkt
  1. T-Systems International GmbH, Bonn, Frankfurt am Main, Leinfelden-Echterdingen, München
  2. T-Systems International GmbH, München, Leinfelden-Echterdingen, Nürnberg
  3. Energiedienst Holding AG, Rheinfelden (Baden) bei Lörrach
  4. T-Systems International GmbH, München, Darmstadt, Bonn, Leinfelden-Echterdingen


Anzeige
Hardware-Angebote
  1. (reduzierte Überstände, Restposten & Co.)
  2. (u. a. Asus GTX 1070 Strix, MSI GTX 1070 Gaming X 8G, Inno3D GTX 1070 iChill)
  3. ab 229,00€

Folgen Sie uns
       


  1. Maru

    Quellcode von Desktop-Android als Open Source verfügbar

  2. Linux

    Kernel-Sicherheitsinitiative wächst "langsam aber stetig"

  3. VR-Handschuh

    Dexta Robotics' Exoskelett für Motion Capturing

  4. Dragonfly 44

    Eine Galaxie fast ganz aus dunkler Materie

  5. Gigabit-Breitband

    Google Fiber soll Alphabet zu teuer sein

  6. Google-Steuer

    EU-Kommission plädiert für europäisches Leistungsschutzrecht

  7. Code-Gründer Thomas Bachem

    "Wir wollen weg vom Frontalunterricht"

  8. Pegasus

    Ausgeklügelte Spyware attackiert gezielt iPhones

  9. Fenix Chronos

    Garmins neue Sport-Smartwatch kostet ab 1.000 Euro

  10. C-94

    Cratoni baut vernetzten Fahrradhelm mit Crash-Sensor



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Lernroboter-Test: Besser Technik lernen mit drei Freunden
Lernroboter-Test
Besser Technik lernen mit drei Freunden
  1. Kinderroboter Myon Einauge lernt, Einauge hat Körper
  2. Landwirtschaft 4.0 Swagbot hütet das Vieh
  3. Künstliche Muskeln Skelettroboter klappert mit den Zähnen

Mobilfunk: Eine Woche in Deutschland im Funkloch
Mobilfunk
Eine Woche in Deutschland im Funkloch
  1. Netzwerk Mehrere regionale Mobilfunkausfälle bei Vodafone
  2. Hutchison 3 Google-Mobilfunk Project Fi soll zwanzigmal schneller werden
  3. RWTH Ericsson startet 5G-Machbarkeitsnetz in Aachen

No Man's Sky im Test: Interstellare Emotionen durch schwarze Löcher
No Man's Sky im Test
Interstellare Emotionen durch schwarze Löcher
  1. No Man's Sky für PC Läuft nicht, stottert, nervt
  2. No Man's Sky Onlinedienste wegen Überlastung offline
  3. Hello Games No Man's Sky bekommt Raumstationsbau

  1. Re: Wird Zeit zu wechseln

    tomatentee | 13:40

  2. Re: Was für ein Unfug...

    tomatentee | 13:39

  3. Re: IMHO: FTTH ist auch ziemlicher overkill

    ChMu | 13:37

  4. Re: OT: Galaxy S5 bekommt auch Update

    Niaxa | 13:37

  5. Re: Der schwerste Schritt für Entwickler

    Strongground | 13:37


  1. 12:59

  2. 15:33

  3. 15:17

  4. 14:29

  5. 12:57

  6. 12:30

  7. 12:01

  8. 11:57


  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