Grid Layout mit CSS3

Mit dem durch CSS3 eingeführtem Grid Layout lassen sich Elemente in einem Raster (ähnlich einer Tabelle) anordnen. Die Gestaltungsmöglichkeiten eines Grid Layouts sind sehr reichhaltig, weshalb ich mit dem Aufbau eines einfachen Beispiels beginnen möchte.

Raster-Aufbau mit 2×2 Kästchen

Das folgende Beispiel enthält ein Grid mit 200 Pixel Breite und 200 Pixel Höhe. Die Fläche des Grids wird gleichmäßig in 2 Spalten (engl. columns) und 2 Zeilen (engl. rows) gestückelt. Demzufolge gibt es vier Bruchstücke (engl. fractions) mit einem Ausmaß von jeweils 50×50 Pixeln.

CSS-Gestaltung:

#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
 
  width: 200px;
  height: 200px;
}
 
#topLeft      { -ms-grid-row: 1; -ms-grid-column: 1; }
#topRight     { -ms-grid-row: 1; -ms-grid-column: 2; }
 
#bottomLeft   { -ms-grid-row: 2; -ms-grid-column: 1; }
#bottomRight  { -ms-grid-row: 2; -ms-grid-column: 2; }

HTML-Auszeichnung:

<div id="grid">
  <div id="topLeft">top left</div>
  <div id="topRight">top right</div>
  <div id="bottomLeft">bottom left</div>
  <div id="bottomRight">bottom right</div>      
</div>