Abo
  • IT-Karriere:

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.

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


Anzeige
Top-Angebote
  1. (u. a. Nikon D5600 Kit 18-55 mm + Tasche + 16 GB für 444€ statt 525€ ohne Tasche und...
  2. (heute u. a. iRobot Roomba 960 für 399€ statt ca. 460€ im Vergleich)
  3. 399€ + Versand oder kostenlose Marktabholung (Vergleichspreis ab 443€)

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


Folgen Sie uns
       


Geforce RTX 2070 Super und Geforce RTX 2060 Super - Test

Die Geforce RTX 2070 Super und die Geforce RTX 2060 Super sind Nvidias neue Grafikkarten für 530 Euro sowie 420 Euro. Beide haben 8 GByte Videospeicher und unterstützen Raytracing in Spielen.

Geforce RTX 2070 Super und Geforce RTX 2060 Super - Test Video aufrufen
Arbeit: Hilfe für frustrierte ITler
Arbeit
Hilfe für frustrierte ITler

Viele ITler sind frustriert, weil ihre Führungskraft nichts vom Fach versteht und sie mit Ideen gegen Wände laufen. Doch nicht immer ist an der Situation nur die Führungskraft schuld. Denn oft verkaufen die ITler ihre Ideen einfach nicht gut genug.
Von Robert Meyer

  1. IT-Fachkräftemangel Freie sind gefragt
  2. Sysadmin "Man kommt erst ins Spiel, wenn es brennt"
  3. Verdeckte Leiharbeit Wenn die Firma IT-Spezialisten als Fremdpersonal einsetzt

Raspberry Pi 4B im Test: Nummer 4 lebt!
Raspberry Pi 4B im Test
Nummer 4 lebt!

Das Raspberry Pi kann endlich zur Konkurrenz aufschließen, aber richtig glücklich werden wir mit dem neuen Modell des Bastelrechners trotz bemerkenswerter Merkmale nicht.
Ein Test von Alexander Merz

  1. Eben Upton Raspberry-Pi-Initiator spielt USB-C-Fehler herunter
  2. 52PI Ice Tower Turmkühler für Raspberry Pi 4B halbiert Temperatur
  3. Kickstarter Lyra ist ein Gameboy Advance mit integriertem Raspberry Pi

Probefahrt mit Mercedes EQC: Ein SUV mit viel Wumms und wenig Bodenfreiheit
Probefahrt mit Mercedes EQC
Ein SUV mit viel Wumms und wenig Bodenfreiheit

Mit dem EQC bietet nun auch Mercedes ein vollelektrisch angetriebenes SUV an. Golem.de hat auf einer Probefahrt getestet, ob das Elektroauto mit Audis E-Tron mithalten kann.
Ein Erfahrungsbericht von Friedhelm Greis

  1. Freightliner eCascadia Daimler bringt Elektro-Lkw mit 400 km Reichweite
  2. Mercedes-Sicherheitsstudie Mit der Lichtdusche gegen den Sekundenschlaf
  3. Elektro-SUV Produktion des Mercedes-Benz EQC beginnt

    •  /