Mit dem Grid Layout Module ist es möglich, responsive zweidimensionale Layouts zu erstellen. Dabei wird ein Raster angelegt, indem sich die Kindelemente ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear bequem und flexibel positionieren (lassen).
Body
Grid Raster können Verschachtelt werden. Als erstes ist der Body in zwei Spalten aufgeteilt. Dabei darf die Seite maximal 90em breit werden.
Die minimale Breite für die erste Spale ist auf 15em gesetzt bzw. maximal 1 Fragment (1fr). die zweite Spalte ist fest 15em breit.
Die Aufteilung des Bodys in zwei
Spalten gilt erst ab einer Anzeige von mindestens 35em. Dies wird mit einem MediaQuerry abgefragt. Ist die Anzeige kleiner, ist das Layout einspaltig.
body
{
display: grid;
max-width: 90em;
grid-template-columns: minmax(15em, 1fr) 15em;
box-sizing: border-box;
}
Innerhalb des Bodys sind zur Strukturierung die Container:
Header>
Im Header wird die Aufteilung des Bodys in zwei Spalten wieder aufgehoben, indem die Spalte von der ersten Linie bis zur Dritten Linie definiert wird. Zudem wird
die höhe auf 16rem festgelegt und der Inhalt wird zentriert.
header
{
grid-column: 1 / 3;
max-height: 16rem;
align-items: center;
}
Nav und Footer
Auch im Navigationsbereich und im Fuß der Website wird die Aufteilung des Bodys in zwei Spalten wieder aufgehoben, indem die Spalte von der ersten Linie bis zur Dritten Linie definiert wird.
nav
{
grid-column: 1 / 3;
}
Mainidex
Der Main Container ist in der ersten Spalte des Body-Containers angesiedelt. Durch display: gird wird ein neues Raster aufgemacht. Dieses Raster hat eine dynamische
Anzahl an Spalten (auto-fill). Eine Spalte ist dabei mindesten 15em breit und maximal ein Fragment breit. Da für alle Container sowohl Außen- als auch Innenabstände definiert
wurden können bei der maximalen Breite von 90em 4 Spalten angezeigt werden. Die 5 Spalte ist das Seitenmenü (asside). Die rechnerisch mögliche 6 Spalte geht durch die
definierten Abstände verloren.
.mainindex
{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
Mainvorlage
Die Anzahl der Spalten ist abhängig von der Bildschirmbreite. Mit einem MediaQuerry wird diese
abgefragt. Ab einer Breite von 50em wir der Main-Bereich zum Grid und in zwei Spalten aufgeteilt.
Eine spalte ist dabei mindesten 15em breit.
@media (min-width: 50em)
{
.mainvorlage
{
display: grid;
grid-template-columns: repeat(2, minmax(15em, 1fr));
}
}