Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Rasterlayout

Das CSS3-Rasterlayout (Cascading Stylesheets, Level 3), genannt "das Raster", ist neu in Internet Explorer 10 und Windows Store-Apps mit JavaScript. Wie Flexbox ermöglicht auch das Raster ein flüssigeres Layout, als mit der Positionierung anhand von Anzeigeelementen oder Skripts möglich ist. Es ermöglicht das Aufteilen des Platzes für die Hauptbereiche einer Webseite oder Webanwendung und das Definieren der Beziehung zwischen den Teilen eines HTML-Steuerelements hinsichtlich der Größe, Position und Ebene.Daher muss kein festes Layout erstellt werden, das verfügbaren Platz im Browserfenster nicht nutzen kann.

Das CSS3-Rasterlayout ist zum Zeitpunkt dieses Schreibens immer noch in der Entwicklung. Die Implementierung des CSS3-Rasterlayouts in der aktuellen Vorabversion basiert auf dem CSS-Rasterlayoutmodul, derzeit ein Arbeitsentwurf des World Wide Web Consortium (W3C).

Da das Raster das Anordnen von Elementen in Spalten und Zeilen ermöglicht, aber keine Inhaltsstruktur hat, ermöglicht es auch Szenarios, die mit HTML-Tabellen nicht möglich sind. Verwenden Sie das Raster mit Medienabfragen, damit das Layout Änderungen am Geräteformularfaktor, der Ausrichtung, dem verfügbaren Platz usw. nahtlos übernimmt.

Das "Grid"-Element

Die Grundlage des Rasterlayouts bildet das "Grid"-Element, das durch Festlegen der display-Eigenschaft eines Elements auf -ms-grid (bei einem "Grid"-Element auf Blockebene) oder auf -ms-inline-grid (bei einem Inline-"Grid"-Element) deklariert wird. (Da der Entwurf des Rasterlayouts noch vorläufig ist, müssen dieser Wert und alle Eigenschaften in diesem Abschnitt mit dem Anbieterpräfix "-ms-" für Microsoft verwendet werden, damit sie mit Internet Explorer 10 und Windows Store-Apps mit JavaScript unter Windows 8 funktionieren.) Im folgenden Codebeispiel wird ein "Grid"-Element in einem Element mit der ID "myGrid" erstellt:


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


Tracks (Spalten und Zeilen)

Legen Sie nach dem Erstellen des "Grid"-Elements die Größe der Spalten und Zeilen mithilfe folgender Eigenschaften fest:

EigenschaftBeschreibung

-ms-grid-columns

Gibt die Breite jeder Spalte im Raster an. Die einzelnen Spalten werden durch Leerzeichen voneinander getrennt.

-ms-grid-rows

Gibt die Höhe jeder Zeile im Raster an. Die einzelnen Zeilen werden durch Leerzeichen voneinander getrennt.

 

Sie können die Größe von Spalten und Zeilen (zusammenfassend als Tracks bezeichnet) mit folgenden Optionen anpassen:

  • standardmäßigen Längeneinheiten als Prozentsatz der Objektbreite (bei Spalten) oder -höhe (bei Zeilen)
  • dem auto-Schlüsselwort, das angibt, dass sich die Breite der Spalte bzw. Höhe der Zeile nach den darin enthaltenen Elementen richtet
  • dem min-content-Schlüsselwort, das angibt, dass die Mindestbreite oder -höhe untergeordneter Elemente verwendet wird
  • dem max-content-Schlüsselwort, das angibt, dass die maximale Breite oder -höhe untergeordneter Elemente verwendet wird
  • dem minmax(a, b)-Schlüsselwort, das angibt, dass sich die Breite bzw. Höhe je nach verfügbarem Platz zwischen a und b befindet
  • Bruchteileinheiten ("fr"), die angeben, dass der verfügbare Platz je nach deren Bruchwerten unter den Spalten oder Zeilen verteilt wird, wie im folgenden Beispiel dargestellt
Sehen Sie sich die folgende erweiterte Version der ID-Auswahl "myGrid"  an, um ein Beispiel für Bruchteileinheiten zu erhalten:

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


Dieses Raster hat vier Spalten, von denen jede angezeigt wird, wie hier beschrieben:

  • Spalte 1 (auto-Schlüsselwort): Die Größe der Spalte wird an ihren Inhalt angepasst.
  • Spalte 2 ("100px"): Die Spalte ist 100 Pixel breit.
  • Spalte 3 ("1fr"): Die Spalte nimmt eine Bruchteileinheit des verbleibenden Platzes ein.
  • Spalte 4 ("2fr"): Die Spalte nimmt zwei Bruchteileinheiten des verbleibenden Platzes ein.

Da dieses Raster insgesamt drei Bruchteileinheiten aufweist, wird Spalte 3 ein Drittel — 1 Bruchteileinheit geteilt durch 3 Bruchteileinheiten — des verbleibenden Platzes zugewiesen. Spalte 4 werden zwei Drittel des verbleibenden Platzes zugewiesen.

Dieses Raster hat auch drei Zeilen, von denen jede angezeigt wird, wie hier beschrieben:

  • Zeile 1 ("50px"): Die Zeile ist 50 Pixel hoch.
  • Zeile 2 ("5em"): Die Zeile ist 5 em hoch.
  • Spalte 3 (auto-Schlüsselwort): Die Größe der Zeile wird an ihren Inhalt angepasst.

Wiederholen von Rastertracks

Wenn zahlreiche Spalten oder Zeilen vorhanden sind, die identisch sind oder ein sich wiederholendes Muster aufweisen, kann eine Wiederholungssyntax angewendet werden, um die Spalten oder Zeilen in kompakterer Form zu definieren. Die nächsten beiden Beispiele sind gleichwertig. Es gibt eine einzelne Zeile und ein Muster sich wiederholender Spalten: eine Spalte von 250 px, gefolgt von einem Bundsteg von 10 px.


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


Rasterelemente

Untergeordnete Elemente des Rasters werden als Rasterelemente bezeichnet. Sie werden mit den folgenden Eigenschaften positioniert:

EigenschaftBeschreibung

-ms-grid-column

Gibt an, in welcher Spalte des Rasters das Rasterelement platziert werden soll.

-ms-grid-row

Gibt an, in welcher Zeile des Rasters das Rasterelement platziert werden soll.

 

Die Nummerierung der Tracks ist ein 1-basierter Index, wobei 1 der Standardwert ist. Sehen Sie sich für das zuvor deklarierte Raster die folgenden beiden ID-Auswahlen an:


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Wenden Sie diese Auswahlen nun auf das folgende Markup an:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


Sie können diese Seite anzeigen. (Sie benötigen Internet Explorer 10, damit die Seite richtig gerendert wird.)

Beispiel für Rasterelemente

Ausrichten von Rasterelementen

Sie können Rasterelemente mithilfe der folgenden Eigenschaften entlang beliebiger Kanten der von den Spalten und Zeilen, die das Element umfasst, gebildeten Zellen positionieren:

EigenschaftBeschreibung

-ms-grid-column-align

Gibt die horizontale Ausrichtung des Rasterelements innerhalb der Rasterspalte an. Mögliche Werte sind center, end, start und stretch.

-ms-grid-row-align

Gibt die vertikale Ausrichtung des Rasterelements innerhalb der Rasterzeile an. Mögliche Werte sind center, end, start und stretch.

 

Ändern Sie die Auswahl "item2" wie folgt (indem Sie die letzten vier Zeilen hinzufügen):


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

Fügen Sie außerdem die folgende Auswahl hinzu:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Wenden Sie diese Auswahlen nun auf das folgende Markup an:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


Sie können diese Seite anzeigen. (Sie benötigen Internet Explorer 10, damit die Seite richtig gerendert wird.)

Beispiel für die Rasterausrichtung und -positionierung

Stapeln von Rasterelementen

Sie können Rasterelemente stapeln, indem Sie sie einfach in denselben Spalten oder Zeilen platzieren. Standardmäßig wird ein Element, das im Markup an späterer Stelle steht, über vorherigen Elementen gezeichnet.

Um dies zu demonstrieren, wird nun die Auswahl für Element 3 ("item3") geändert, sodass das Element nun in Spalte 2 und Zeile 2 platziert wird, wo sich schon Element 2 befindet:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Da div für Element 3 nach div für Element 2 kommt, wird Element 3 über Element 2 gezeichnet. Sie können diese Seite anzeigen. (Sie benötigen Internet Explorer 10, damit die Seite richtig gerendert wird.)

Beispiel für das Stapeln von Rasterelementen

Dieses Standardverhalten können Sie mit der folgenden z-index-Eigenschaft außer Kraft setzen:

EigenschaftBeschreibung

z-index

Gibt die Ebene (Z-Index) des Rasterelements innerhalb der Rasterzelle an.

 

Während die z-index-Eigenschaft normalerweise nur für Objekte gilt, bei denen die position-Eigenschaft nicht auf static festgelegt ist, gilt die z-index-Eigenschaft für "Grid"-Elemente auch dann, wenn die position-Eigenschaft auf static festgelegt ist.

Weisen Sie in der Auswahl für Element 3 der z-index-Eigenschaft einen Wert von "-1" zu, um das Element in der Stapelreihenfolge zurückzustellen:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

Dies bewirkt, dass Internet Explorer 10 Element 2 über Element 3 zeichnet. Sie können diese Seite anzeigen. (Sie benötigen Internet Explorer 10, damit die Seite richtig gerendert wird.)

Festlegen einer Spanne für Rasterelemente

Mit den folgenden beiden Eigenschaften können Sie festlegen, dass Rasterelemente mehrere Spalten oder Zeilen umspannen:

EigenschaftBeschreibung

-ms-grid-column-span

Gibt die Zahl der Spalten im Raster an, die das Rasterelement umspannt. Der Standardwert ist "1".

-ms-grid-row-span

Gibt die Zahl der Zeilen im Raster an, die das Rasterelement umspannt. Der Standardwert ist "1".

 

Weisen Sie in der Auswahl für Element 3 der -ms-grid-column-span-Eigenschaft den Wert "4" zu (und ändern Sie den Wert der -ms-grid-column-Eigenschaft in "1"), damit das Element die Breite von vier Spalten (alle Spalten) umspannt:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

Sie können diese Seite anzeigen. (Sie benötigen Internet Explorer 10, damit die Seite richtig gerendert wird.)

Beachten Sie Folgendes: Wenn Sie versuchen, mehr als die Zahl der im Raster definierten Spalten oder Zeilen zu umspannen (wenn Sie z. B. im vorherigen Beispiel den Wert der -ms-grid-column-Eigenschaften auf "2" belassen und die -ms-grid-column-span-Eigenschaft auf "4" festlegen, haben Sie die Zahl der definierten Spalten um 1 überschritten), wird implizit für jede über die definierte Zahl hinausgehende Spalte oder Zeile eine weitere Spalte bzw. Zeile erstellt, deren Breite bzw. Höhe auf auto (an Inhalt anpassen) festgelegt wird.

API-Referenz

Grid Layout

Beispiele und Lernprogramme

Beispiel für CSS-Rasterüberlagerung
So erstellen Sie mit dem CSS-Raster ein adaptives Layout
Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

So geht's: CSS3-Rasterlayout
Das Rastersystem
Griddle

IEBlog-Beiträge

IE10 Platform Preview und CSS-Features für adaptive Layouts

Spezifikation

CSS-Rasterlayout

 

 

Anzeigen:
© 2014 Microsoft