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

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


Thomas goes .NET / 13. Sep 2007

YellowLeds Weblog / 12. Sep 2007

CSS3 - bitte beschleunigen!



Anzeige

Stellenmarkt
  1. ROHDE & SCHWARZ GmbH & Co. KG, München
  2. Phoenix Contact Electronics GmbH, Bad Pyrmont
  3. Planet Sports GmbH, München
  4. über Robert Half Technology, Frankfurt am Main


Anzeige
Hardware-Angebote
  1. 18,99€ inkl. Versand
  2. 99,90€ statt 204,80€
  3. (reduzierte Überstände, Restposten & Co.)

Folgen Sie uns
       


  1. Jahresgehalt

    Erfahrene Softwareentwickler verdienen 55.500 Euro

  2. Sync 3

    Ford bringt Carplay und Android Auto in alle 2017er-Modelle

  3. Netzwerk

    Mehrere regionale Mobilfunkausfälle bei Vodafone

  4. Hello Games

    No Man's Sky braucht kein Plus und keine Superformel

  5. Master Key

    Hacker gelangen per Reverse Engineering an Gepäckschlüssel

  6. 3D-Druck

    Polizei will Smartphone mit nachgemachtem Finger entsperren

  7. Modesetting

    Debian und Ubuntu verzichten auf Intels X11-Treiber

  8. Elementary OS Loki im Test

    Hübsch und einfach kann auch kompliziert sein

  9. Mobilfunkausrüster

    Ericsson feuert seinen Konzernchef

  10. Neuer Algorithmus

    Google verkleinert App-Downloads aus dem Play Store



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Festplatten mit Flash-Cache: Das Konzept der SSHD ist gescheitert
Festplatten mit Flash-Cache
Das Konzept der SSHD ist gescheitert
  1. Ironwolf, Skyhawk und Barracuda Drei neue 10-TByte-Modelle von Seagate
  2. 3PAR-Systeme HPE kündigt 7,68- und 15,36-TByte-SSDs an
  3. Dells XPS 13 mit Ubuntu im Test Endlich ein Top-Notebook mit Linux!

Nuki Smart Lock im Test: Ausgesperrt statt aufgesperrt
Nuki Smart Lock im Test
Ausgesperrt statt aufgesperrt

Xiaomi Mi Band 2 im Hands on: Fitness-Preisbrecher mit Hack-App
Xiaomi Mi Band 2 im Hands on
Fitness-Preisbrecher mit Hack-App
  1. Xiaomi Hugo Barra verkündet Premium-Smartphone
  2. Redmi 3S Xiaomis neues Smartphone kostet umgerechnet 95 Euro
  3. Mi Band 2 Xiaomis neues Fitness-Armband mit Pulsmesser kostet 20 Euro

  1. Re: Als FISI dann einzige Möglichkeit ein Studium?

    Lemo | 22:01

  2. Re: Vollidiot

    narfomat | 22:00

  3. Re: Lieber mal das Darknet verbieten

    ip_toux | 21:59

  4. Re: Basisgehalt?

    crazypsycho | 21:59

  5. Brot und Spiele ... können beide verdammt...

    cicero | 21:58


  1. 18:35

  2. 17:31

  3. 17:19

  4. 15:58

  5. 15:15

  6. 14:56

  7. 12:32

  8. 12:05


  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