Abo
  • Services:

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. 549,99€ (Bestpreis!)
  2. 54€
  3. (aktuell u. a. Corsair GLAIVE RGB als neuwertiger Outlet-Artikel für 34,99€ + Versand statt ca...
  4. 59,90€ (Bestpreis!)

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
       


Sony Xperia L3 - Hands on (MWC 2019)

Sony hat das Xperia L3 auf dem MWC 2019 in Barcelona vorgestellt. Das Einsteiger-Smartphone mit Dual-Kamera steckt in einem schmalen 2:1-Gehäuse. Es hat den Fingerabdrucksensor wieder auf der rechten Seite. Das Smartphone erscheint Anfang März 2019 zum Preis von 200 Euro.

Sony Xperia L3 - Hands on (MWC 2019) Video aufrufen
Verschlüsselung: Die meisten Nutzer brauchen kein VPN
Verschlüsselung
Die meisten Nutzer brauchen kein VPN

VPN-Anbieter werben aggressiv und preisen ihre Produkte als Allheilmittel in Sachen Sicherheit an. Doch im modernen Internet nützen sie wenig und bringen oft sogar Gefahren mit sich.
Eine Analyse von Hanno Böck

  1. Security Wireguard-VPN für MacOS erschienen
  2. Security Wireguard-VPN für iOS verfügbar
  3. Outline Digitalocean und Alphabet-Tochter bieten individuelles VPN

Uploadfilter: Voss stellt Existenz von Youtube infrage
Uploadfilter
Voss stellt Existenz von Youtube infrage

Gut zwei Wochen vor der endgültigen Abstimmung über Uploadfilter stehen sich Befürworter und Gegner weiter unversöhnlich gegenüber. Verhandlungsführer Voss hat offenbar kein Problem damit, wenn es Plattformen wie Youtube nicht mehr gäbe. Wissenschaftler sehen hingegen Gefahren durch die Reform.

  1. Uploadfilter SPD setzt auf Streichung von Artikel 13
  2. Uploadfilter Koalition findet ihren eigenen Kompromiss nicht so gut
  3. Uploadfilter Konservative EVP will Abstimmung doch nicht vorziehen

Tom Clancy's The Division 2 im Test: Richtig guter Loot-Shooter
Tom Clancy's The Division 2 im Test
Richtig guter Loot-Shooter

Ubisofts neuer Online-Shooter beweist, dass komplexe Live-Spiele durchaus von Anfang an überzeugen können. Bis auf die schwache Geschichte und Gegner, denen selbst Dauerbeschuss kaum etwas anhaben kann, ist The Division 2 ein spektakuläres Spiel.
Von Jan Bojaryn

  1. Netztest Connect Netztest urteilt trotz Funklöchern zweimal sehr gut
  2. Netztest Chip verteilt viel Lob trotz Funklöchern

    •  /