So erstellen Sie mit CSS Grid ein adaptives Layout

Dass Webentwicklern beim Gestalten ihrer Webseiten eine große Auswahl an Möglichkeiten zur Verfügung stehen versteht sich von selbst. Bei der Entscheidung, welche Methoden verwendet werden sollen, ist es wichtig darauf zu achten, dass Ihr Layout an verschiedene Geräte, Ausrichtungen und Bildschirmgrößen angepasst werden kann. Das Grid-Layout ist eine neue Layoutmethode, die das Teilen des Raums für die Hauptbereiche einer Webseite entweder basierend auf eine festgelegten Menge, dem verfügbaren Platz im Browserfenster oder einer Kombination aus beidem ermöglicht.

Da das Grid-Layout die Ausrichtung von Elementen als Spalten und Zeilen ermöglicht aber über keine Inhaltsstruktur verfügt, ermöglicht es auch Szenarien — wie in diesem Artikel beschrieben —, die mit HTML- oder CSS (Cascading Style Sheets)-Tabellen nicht möglich oder nur sehr schwer zu erzielen sind. Verwenden Sie außerdem das Grid-Layout mit Medienabfragen, damit das Layout Änderungen am Geräteformularfaktor, der Ausrichtung, dem verfügbaren Platz usw. nahtlos übernimmt.

Die Spezifikation zu CSS Grid Layout des World Wide Web Consortium (W3C) befindet sich derzeit in der Arbeitsentwurfsphase und wird in Internet Explorer 10 im Format mit Herstellerpräfix unterstützt. Eine vollständige Liste mit unterstützten Eigenschaften finden Sie in MSDN unter Grid Layout. Da sich die Grid Layout-Spezifikation zurzeit noch in der Entwicklungsphase befindet, entspricht die Unterstützung in Internet Explorer 10 u. U. nicht genau den Angaben in der Spezifikation.

Wir führen Sie durch die Erstellung einer einfachen Lightbox-Seite zum Anzeigen von Fotos in einer Fotogalerie. Wir verwenden das Grid-Layout zum Organisieren des Seiteninhalts und Medienabfragen zum Optimieren des Layouts für die Anzeige im Hoch- oder Querformat. Im Hochformatlayout ist die Höhe des Browsers größer als die Breite; im Querformat ist die Breite des Browsers größer als die Höhe.

Dieses Thema enthält die folgenden Abschnitte:

Entwerfen der Seite

Diese Lightbox-Seite soll in Internet Explorer in der neuen Windows-Benutzeroberflächenumgebung ohne Verwendung des Bildlaufs den gesamten Bildschirm ausfüllen. Selbstverständlich soll die Seite genauso für die Anzeige in Internet Explorer für den Desktop geeignet sein und sich an die Bedienelemente dieses Browsers anpassen.

Die folgende Skizze zeigt das gewünschte Aussehen der Lightbox-Seite im Querformat. Diese Skizze setzt voraus, dass der Browser eine Breitbildanzeige mit einem Seitenverhältnis von 16:9 vollständig ausfüllt.

Modell einer Fotogalerie-Lightbox-Seite mit Bereichen für ein Logo, erklärenden Text, ein großes Foto und mehrere Miniaturansichten von Fotos

In dieser Skizze ist A ein kleiner Bereich für ein Logo, B ist für eine Bildunterschrift oder -beschreibung vorgesehen, C ist der Hauptanzeigebereich für Fotos, und D ist für Miniaturansichten der weiteren Fotos in der Sammlung vorgesehen.

Da die Lightbox-Seite für die Vollbildansicht vorgesehen ist, müssen wir verschiedene Bildschirmgrößen berücksichtigen. Der Fokus der Seite ist das große Foto. Daher soll bei einem größeren Bildschirm das Fotopanel (C) erweitert werden. Zudem soll Panel A nie, Panel B nicht horizontal und Panel D nicht vertikal erweitert werden.

Erstellen des Rasters

Dieses Szenario eignet sich besonders für die Verwendung des Grid-Layouts. Zur Erstellung des Rasters fügen wir gepunktete Linien hinzu, um die nicht bereits sichtbaren Rasterlinien zu ergänzen. Um Abstände zwischen Seitenelementen beizubehalten und zu verhindern, dass das Design überfüllt wirkt, fügen wir einige Bundstege hinzu. Bundstege können einfach zusätzliche Spalten und Zeilen mit fester Breite oder Höhe sein.

Auf dieser Abbildung stellt die violette gepunktete Linie das Grid-Element oder den Grid-Layoutcontainer dar. Die roten gepunkteten Linien stellen die Rasterlinien dar.

Das vorhergehende Bild mit einer hinzugefügten violetten gepunkteten Linie um das gesamte Grid-Element und hinzugefügten roten gepunkteten Linien, die angeben, wo sich die Spalten und Zeilen später befinden sollen.

Dieses Raster umfasst insgesamt fünf Zeilen und drei Spalten:

  • Die zweite und die vierte Zeile sowie die zweite Spalte sind die Bundstege
  • Die erste und die letzte Zeile haben feste Höhen, die der festen Höhe der Panels A und D entsprechen
  • Die Höhe der dritten Zeile ist variabel, damit das Layout auf alle Bildschirme skaliert werden kann
  • Die erste Spalte hat eine feste Breite, die der festen Breite der Panels A und B entsprechen
  • Die Breite der letzten Spalte ist variabel, damit das Layout auf alle Bildschirme skaliert werden kann

Strukturieren der Seite

Beginnen wir mit dem Erstellen von Markup für das Raster. Zunächst schreiben wir ein wenig einfaches HTML, um eine grundlegende Seitenstruktur zu erhalten. Beachten Sie, dass die Reihenfolge der Abschnitte nicht unbedingt unserer Skizze entspricht – genau dies ist einer der Vorteile von Grid: Mit dem Dokumentobjektmodell (DOM) können Sie Elemente beliebig neu anordnen.


<!DOCTYPE html>
<html>

<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
<style>
</style>
</head>

<body>

<div id="body">
  <div id="grid">
    <div id="text_box" class="orange">
      Text box</div>
    <div id="big_pic" class="red">
      <img id="mainphoto" alt="mainphoto" src="images/img1.jpg"></div>
    <div id="photos" class="blue">
      Photos</div>
    <div id="logo" class="green">
      <div id="logotype">
        CONTOSO<br>IMAGES</div>
      <div id="pagedesc">
        Lightbox</div>
    </div>
  </div>
</div>

</body>

</html>


Erstellen des Grid-Elements und Festlegen von Zeilen und Spalten

Jetzt erstellen Sie das Grid-Element und legen Zeilen und Spalten fest.

Der erste Schritt ist das Hinzufügen des display-Elements und das Festlegen dieses Elements auf -ms-grid. Hiermit wird das Grid-Element erstellt.

Im Grid-Element verwenden wir die -ms-grid-columns-Eigenschaft, um die Breite aller Spalten in einer durch Leerzeichen getrennte Liste festzulegen. Wir verwenden die -ms-grid-rows-Eigenschaft ebenso, um die Höhe aller Spalten in einer durch Leerzeichen getrennte Liste festzulegen.

Für das Element mit der ID "grid" sieht unser CSS dann folgendermaßen aus:


#grid {
  height: calc(100vh - 65px);  /* 65px to account for scrollbar */;  
  display: -ms-grid;
  -ms-grid-columns: 200px 25px 1fr;
  -ms-grid-rows: 160px 25px 1fr 25px 200px; 
  border: 1px solid red;	      /* for a visual guide */
}

Informationen zu Bruchteileinheiten

Um festzulegen, dass die Größe des Rasters dem verfügbaren Platz entsprechend automatisch angepasst wird, verwenden wir Bruchteileinheiten ("fr"). Die Größe einer Bruchteileinheit hängt sowohl vom gesamten verfügbaren Platz als auch von der festgelegten Gesamtanzahl der Bruchteileinheiten ab. Für unsere Lightbox-Beispielseite verwenden wir nur eine Bruchteileinheit, komplexere Layout sind jedoch ebenfalls möglich. Gehen wir beispielsweise von einem Fall aus, bei dem vier Spalten mit automatischer Länge, 100 Pixel, 1 Bruchteileinheit und 2 Bruchteileinheiten festgelegt sind. Die Spalten werden wie folgt angezeigt:

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

Zuweisen von Seitenelementen an Spalten und Zeilen

Sehen Sie sich die Seite jetzt an – sie ist ganz offensichtlich noch nicht fertig. Alle die verschiedenen Seitenelemente überschneiden einander, da wir noch festgelegt haben, welche Elemente sich in welchen Spalten befinden sollen. Dazu verwenden wir eine Kombination der Eigenschaften-ms-grid-row, -ms-grid-column, -ms-grid-row-span und -ms-grid-column-span.

Wenn die Eigenschaften -ms-grid-row und -ms-grid-column auf ein Seitenelement angewendet werden, geben sie die Rasterzelle an, bei der das Seitenelement beginnt. In Sprachen, die von links nach rechts und von oben nach unten gelesen werden, gibt die -ms-grid-row-Eigenschaft die oberste Zeile an, die das Element belegen soll. Entsprechend geben Sie mit der -ms-grid-column-Eigenschaft die äußerste linke Spalte an, die das Element belegen soll.

Wenn die Eigenschaften -ms-grid-row-span und -ms-grid-column-span auf ein Seitenelement angewendet werden, geben sie an, wie viele Zeilen und Spalten das Seitenelement umspannen soll.

Beachten Sie Folgendes: Wenn Sie versuchen, mehr als die im Raster definierten Spalten oder Zeilen zu umspannen, 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.


#text_box {
  -ms-grid-row: 3;
  -ms-grid-column: 1; 
  -ms-grid-row-span: 3;
  padding: 15px;
}
#big_pic {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
}
#photos {
  -ms-grid-row: 5; 
  -ms-grid-column: 3;
  padding: 15px;
}
#logo {
  -ms-grid-row: 1; 
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}


Zeigen Sie die Seite mit diesen Auswahlelementen und einigen Formaten von anderen Seitenelementen an.

Screenshot einer Vollbild-Webseite mit einem grünen Panel für ein Logo, einem langen vertikalen orangen Panel für eine Beschreibung, einem langen horizontalen blauen Panel für Miniaturansicht von Fotos und einem weißem Panel in der Mitte, in dem sich oben links ein Foto von Wolken befindet

Ausrichten von Grid-Elementen

Die Seite sieht bereits ansprechend aus, im Idealfall ist das Foto im Panel jedoch zentriert. Dazu verwenden wir die Eigenschaften -ms-grid-row-align und -ms-grid-column-align. Diese Eigenschaften definieren die Ausrichtung eines Elements innerhalb einer Zeile bzw. Spalte. In diesem Fall legen wir mit der ID-Auswahl für "big_pic " für beide Eigenschaften center fest:


#big_pic { 
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
}


Gleiches Bild wie zuvor, der weiße Rahmen um das Foto ist jedoch schmaler und das Foto ist im Panel zentriert

Sie können diese Version der Seite anzeigen.

Verwenden von Grid mit Medienabfragen

Unser Layout wird im Querformat korrekt dargestellt. Aber wie sieht es aus, wenn sich das Anzeigegerät im Hochformat befindet? In diesem Fall können wir Medienabfragen verwenden.

Mithilfe von Medienabfragen definieren wir Aspekte des Layouts neu, sodass sie an das Hochformat angepasst werden. Fügen Sie zunächst die Medienabfragesyntax hinzu, um dem Stylesheet Layout-spezifische Stile für das Hochformat hinzuzufügen:


@media all and (orientation: portrait) {

}

Im Zusammenhang mit Medienabfragen definiert das Hochformat eine Seite, die höher als breit ist. Im Gegenzug ist eine Seite im Querformat breiter als hoch.

Jetzt fügen wir ein neues Grid-Layout und einige neue Formate für weitere Seitenelemente hinzu. Wir fügen diese Formate zwischen den geschweiften Klammern der Medienabfrage hinzu:


#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
  -ms-grid-row: 1; 
  -ms-grid-column: 3;
  -ms-grid-row-span: 1;
}
#big_pic {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#photos {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}
#logotype {
  font-size: 15px;
}
#pagedesc {
  font-size: 12px;
}
#mainphoto {
  width: 100%; 
  border-width: 10px;
  border-color: white;
}


Jetzt können Sie die fertige Seite anzeigen. Wenn Sie kein Gerät zu Hand haben, das Sie drehen können, um die Seite im Hochformat anzuzeigen, öffnen Sie die Seite in Internet Explorer für den Desktop und verkleinern Sie das Fenster so, dass es höher als breit ist.

Dieselbe Fotogalerie im Hochformat; das Foto nimmt nun den Großteil des Bildschirms ein, und die orangen und blauen Panels befinden sich oberhalb bzw. unterhalb des Fotos

Erstellen einer Überschneidung von Elementen mit Grid

CSS Grid eröffnet zahlreiche Möglichkeiten für das Seitenlayout. Beispielsweise können Sie mit Grid einfach Inhaltsüberlagerungen erstellen, die in Kombination mit der Opacity-Eigenschaft z. B. durchscheinende Textbänder auf einem Bild erstellen können. Weitere Informationen und Grid-Überlagerungen finden Sie unter Beispiel für eine CSSGrid-Überlagerung in der Internet Explorer-Beispielgalerie.

Schlussfolgerung

Sie haben jetzt eine Vorstellung von den Möglichkeiten des Grid-Layout und der Verwendung der Grid-Eigenschaften mit Medienabfragen. Weitere Informationen finden Sie unter den Links im folgenden Abschnitt.

Verwandte Themen

Contoso Images-Fotogalerie
Grid-Layout
Internet Explorer 10: Handbuch für Entwickler: Grid-Layout
IE-Blog: IE10 Platform Preview und CSS-Features für adaptive Layouts

 

 

Anzeigen:
© 2014 Microsoft