CSS-Layout-Tutorial: Von klassischen Ansätzen zu den neuesten Techniken

Veröffentlicht: 2022-03-11

Das Beherrschen des Weblayouts ohne Beherrschen von CSS ist ungefähr so machbar wie das Erlernen des Schwimmens auf dem Trockenen. Aber im Gegensatz zum Schwimmen – das, einmal gemeistert, eine Fähigkeit ist, die einem ein Leben lang erhalten bleibt – ist die Beherrschung von CSS ein Prozess, der nie wirklich endet, da sich CSS selbst ständig weiterentwickelt.

Die Herausforderung wird durch Unterschiede in der CSS-Implementierung und -Unterstützung in verschiedenen Browsern (und sogar in verschiedenen Versionen desselben Browsers) sowie durch unterschiedliche Akzeptanzraten von CSS-Empfehlungen verschärft. Seit mehr als einem Jahrzehnt kämpfen Webdesigner und Entwickler mit sporadischen und inkonsistenten Ausbrüchen zusätzlicher CSS3-Funktionen, die in jeder neuen Browserversion unterstützt werden.

Aber wie dem auch sei, die Beherrschung von CSS ist eine absolute Notwendigkeit für jeden soliden Webdesigner oder -entwickler. Dieser Artikel führt Sie durch einige grundlegende CSS-Layout-Prinzipien, von klassischen CSS2-Techniken bis hin zu den neuesten Layout-Ansätzen in CSS3.

HINWEIS: Alle Codebeispiele in diesem Artikel verwenden HTML5-Elemente und Sass-Syntax. Der vollständig funktionierende Code kann von https://github.com/laureanoarcanio/css-layout-examples geklont werden.

Anwendungsfall

Eine der besten Möglichkeiten, eine Technologie zu erlernen, besteht darin, einen bestimmten Anwendungsfall zu haben, den Sie unterstützen möchten, oder ein bestimmtes Problem, das Sie lösen möchten. Zu diesem Zweck konzentrieren wir uns auf einen Anwendungsfall mit bestimmten Anforderungen.

Unser Anwendungsfall besteht aus einem Web-App-Layout mit etwas dynamischem Verhalten. Es wird feste Elemente auf der Seite wie Kopfzeile, Fußzeile, Navigationsmenü und Unternavigation sowie einen scrollbaren Inhaltsbereich haben. Hier sind die spezifischen Layout-Anforderungen:

Grundlayout
- Kopfzeile, Fußzeile, Navigationsmenü und Unternavigation bleiben alle beim Scrollen fixiert
- Navigations- und Unternavigationselemente belegen den gesamten vertikalen Freiraum
- Der Inhaltsbereich nutzt den gesamten verbleibenden freien Platz auf der Seite und hat einen scrollbaren Bereich
Dynamisches Verhalten
- Das Navigationsmenü zeigt standardmäßig nur Symbole, kann aber erweitert werden, um auch Text anzuzeigen (und kann dann reduziert werden, um wieder nur Symbole anzuzeigen).
Layout-Variationen
- Einige Seiten haben eine Unternavigation neben dem Navigationsmenü und andere nicht

CSS-Tutorial mit klassischen CSS2-Techniken

Für den Anfang ist hier das HTML5-Markup, das wir mit unserer Beispielimplementierung mit klassischem CSS verwenden werden:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Feste Positionierung

In CSS2 können wir die festen Elemente auf der Seite (Kopfzeile, Fußzeile usw.) erreichen, indem wir ein positioniertes Layoutmodell verwenden, das eine feste Positionierung verwendet.

Darüber hinaus verwenden wir die CSS-Eigenschaft z-index , um sicherzustellen, dass unsere festen Elemente „über“ den anderen Inhalten auf der Seite bleiben. Die Eigenschaft z-index gibt die Stapelreihenfolge eines Elements an, wobei ein Element mit größerer Stapelreihenfolge immer „über“ einem Element mit niedrigerer Stapelreihenfolge liegt. Beachten Sie, dass die Eigenschaft z-index nur mit positionierten Elementen funktioniert. Für unser Beispiel verwenden wir willkürlich einen z-index Wert von 20 (der höher ist als der Standardwert), um sicherzustellen, dass unsere festen Elemente visuell im Vordergrund bleiben.

Außerdem setzen wir die Eigenschaft width auf 100 %, wodurch der Browser angewiesen wird, den gesamten verfügbaren Platz horizontal für das Element zu verwenden.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

OK, das ist also die Kopf- und Fußzeile. Aber was ist mit #nav und #subnav ?

CSS-Erweiterung

Für #nav und #subnav verwenden wir eine etwas ausgefeiltere Technik namens CSS Expansion , die verwendet werden kann, wenn Elemente fest (d. h. an einer festen Position auf der Seite) oder absolut (d. h. an einer Position) positioniert werden angegebene Position relativ zu seinem am nächsten positionierten Vorfahren oder zum umgebenden Block).

Die vertikale Erweiterung wird erreicht, indem sowohl die top als auch die bottom Eigenschaften eines Elements auf einen festen Wert gesetzt werden, sodass das Element vertikal erweitert wird, um den verbleibenden vertikalen Platz entsprechend zu nutzen. Im Grunde binden Sie den oberen Rand des Elements an einen bestimmten Abstand vom oberen Rand der Seite und den unteren Rand des Elements an einen bestimmten Abstand vom unteren Rand der Seite, sodass das Element erweitert wird und den gesamten vertikalen Raum ausfüllt zwischen diesen beiden Punkten.

In ähnlicher Weise wird die horizontale Erweiterung erreicht, indem sowohl die left als auch die right Eigenschaft eines Elements auf einen festen Wert gesetzt werden, sodass das Element horizontal erweitert wird, um den verbleibenden horizontalen Platz entsprechend zu nutzen.

Für unseren Anwendungsfall müssen wir die vertikale Erweiterung verwenden.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Standardpositionierung (statisch).

Der scrollbare Hauptinhaltsbereich kann sich einfach auf die standardmäßige (statische) Positionierung verlassen, wodurch Elemente in der Reihenfolge wiedergegeben werden, in der sie im Dokumentenfluss erscheinen. Da alles andere auf unserer Seite an einer festen Position steht, ist dieses Element das einzige, das sich im Belegfluss befindet. Um es richtig zu positionieren, müssen wir daher nur seine Randeigenschaft angeben, um eine Überlappung mit der festen Kopf-, Fuß- und Nav/ margin zu vermeiden:

 #main { margin: 6em 0 4em 20em; }

Damit haben wir die grundlegenden Layout-Anforderungen unseres Anwendungsfalls mit CSS2 erfüllt, aber wir müssen noch die zusätzlichen Anforderungen für die dynamische Funktionalität erfüllen.

Dynamisches Verhalten mit klassischen CSS2-Techniken

Die Anforderungen besagten, dass unser Navigationsmenü standardmäßig nur Symbole anzeigen würde, aber auch erweitert werden könnte, um Text anzuzeigen (und dann reduziert werden könnte, um wieder nur Symbole anzuzeigen).

Beginnen wir damit, einfach 5em zur Breite des Navigationsmenüs hinzuzufügen, wenn es erweitert wird. Dazu erstellen wir eine „erweiterte“ CSS-Klasse, die wir dynamisch zum Navigationsmenüelement hinzufügen oder daraus entfernen können:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Hier ist ein Beispiel für den JavaScript-Code (in diesem Beispiel verwenden wir jQuery), der verwendet werden kann, um das Navigationsmenü dynamisch zwischen dem erweiterten und reduzierten Modus umzuschalten, je nachdem, ob der Benutzer auf das Navigations-Umschaltsymbol klickt:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Und damit kann unser Navigationsmenü jetzt dynamisch erweitert oder reduziert werden. Toll.

Nun, irgendwie großartig, aber nicht ganz. Obwohl das Navigationsmenü jetzt erweitert und verkleinert werden kann, passt es nicht gut zum Rest der Seite. Das erweiterte Navigationsmenü überlappt jetzt das Unternavigationsmenü, was definitiv nicht das gewünschte Verhalten ist.

Dies offenbart eine der wichtigsten Einschränkungen von CSS2; Es gibt nämlich viel zu viel, das mit festen Positionswerten fest codiert werden muss. Infolgedessen müssen wir für die anderen Elemente auf der Seite, die neu positioniert werden müssen, um das erweiterte Navigationsmenü aufzunehmen, zusätzliche „erweiterte“ CSS-Klassen mit noch festeren Positionswerten definieren.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Wir müssen dann unseren JavaScript-Code erweitern, um auch diese anderen Elemente dynamisch anzupassen, wenn der Benutzer auf den Navigationsschalter klickt:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

Okay, das geht besser.

Layoutvariationen mit klassischen CSS2-Techniken

Lassen Sie uns nun die Anforderung ansprechen, einige Seiten zu haben, die das Unternavigationsmenü verbergen. Insbesondere möchten wir, dass das Unternavigationsmenü ausgeblendet wird, wenn der Benutzer auf das „Benutzer“-Symbol im Hauptnavigationsbereich klickt.

Also erstellen wir zuerst eine neue Klasse „hidden“, die display: none anwendet:

 .hidden { display: none; }

Und wieder verwenden wir JavaScript (jQuery), um die „versteckte“ CSS-Klasse auf das #subnav Element anzuwenden, wenn der Benutzer auf das Benutzersymbol klickt:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Mit diesem Zusatz wird das #subnav Element ordnungsgemäß ausgeblendet, wenn der Benutzer auf das „Benutzer“-Symbol klickt, aber der Platz, den es belegt hatte, bleibt ungenutzt , anstatt dass die anderen Elemente erweitert werden, um den durch das #subnav Element freigegebenen Platz zu nutzen.

Um das gewünschte Verhalten beim Ausblenden des #subnav Elements zu erzielen, verwenden wir einen der weniger bekannten, aber sehr nützlichen CSS-Selektoren, der als benachbarter gleichgeordneter Selektor bekannt ist.

Benachbarter Geschwister-CSS-Selektor

Mit dem nebengeordneten Selektor können Sie zwei Elemente angeben und nur die Instanzen des zweiten Elements auswählen, die unmittelbar auf das angegebene erste Element folgen.

Im Folgenden werden beispielsweise nur die Elemente mit der ID main ausgewählt, die unmittelbar auf ein Element mit der ID subnav :

 #subnav + #main { margin-left: 20em; }

Das obige CSS-Snippet setzt den linken Rand von #main genau dann auf 20em , wenn es unmittelbar auf ein angezeigtes #subnav folgt.

Wenn jedoch #nav erweitert wird (was dazu führt, dass die expanded Klasse basierend auf unserem früheren Code auch zu #main hinzugefügt wird), verschieben wir den linken Rand von #main auf 25em.

 #subnav + #main.expanded { margin-left: 25em; }

Und wenn #subnav ausgeblendet ist, verschieben wir den linken Rand von #main ganz nach 6em, um direkt neben #nav zu sein:

 #subnav.hidden + #main { margin-left: 6em; }

(Hinweis: Ein Nachteil der Verwendung des nebengeordneten Selektors besteht darin, dass wir gezwungen sind, immer #subnav im DOM vorhanden zu haben, unabhängig davon, ob es angezeigt wird oder nicht.)

Wenn schließlich #subnav ausgeblendet und #nav erweitert ist, setzen wir den linken Rand von #main auf 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Dadurch können wir die Dinge ohne schweren JavaScript-Code miteinander verbinden, aber wir können auch sehen, wie kompliziert dieser Code werden kann, wenn wir der Seite weitere Elemente hinzufügen. Wir sehen wieder einmal, dass bei CSS2 viel Hardcoding von Positionswerten erforderlich ist, damit die Dinge richtig funktionieren.

Verwendung von CSS3

CSS3 bietet erheblich verbesserte Funktionalität und Layouttechniken, die die Verwendung viel einfacher machen und viel weniger abhängig von fest codierten Werten sind. CSS3 ist von Natur aus darauf ausgelegt, ein dynamischeres Verhalten zu unterstützen, und ist in diesem Sinne „programmierbarer“. Sehen wir uns einige dieser neuen Funktionen in Bezug auf unseren Anwendungsfall an.

CSS3 `calc()` Funktion

Die neue CSS3-Funktion calc() kann zur dynamischen Berechnung von CSS-Eigenschaftswerten verwendet werden (beachten Sie jedoch, dass die Unterstützung je nach Browser unterschiedlich ist). Der für die Funktion calc() bereitgestellte Ausdruck kann ein beliebiger einfacher Ausdruck sein, der die grundlegenden arithmetischen Operatoren ( + , - , * , / ) unter Verwendung von Standardvorrangregeln für Operatoren kombiniert.

Die Verwendung der Funktion calc calc() kann dazu beitragen, einen Großteil der von CSS2 geforderten Hardcodierung von Werten zu vermeiden. In unserem Fall ermöglicht uns dies eine dynamischere CSS-Erweiterung. Zum Beispiel:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Mit der obigen height mit der Funktion calc() erzielen wir das gleiche Ergebnis wie in CSS2 mit top:6em und bottom:4em , aber auf eine viel flexiblere und adaptivere Weise und ohne die top und bottom Position hartcodieren zu müssen Werte.

CSS3-Flexbox-Layout

Flexbox ist ein neues Layout, das in CSS3 eingeführt wurde (die Unterstützung variiert je nach Browser). Das Flexbox-Layout macht es einfacher, Elemente auf einer Seite so anzuordnen, dass sie sich auf verschiedenen Bildschirmgrößen, Auflösungen und Geräten vorhersehbar verhalten. Es ist daher besonders im Kontext von responsivem Webdesign sinnvoll.

Zu den Hauptmerkmalen gehören:

Das Positionieren von untergeordneten Elementen ist viel einfacher und komplexe Layouts können einfacher und mit saubererem Code erreicht werden.
Untergeordnete Elemente können in jede Richtung angeordnet werden und können flexible Abmessungen haben, um sich an den Anzeigebereich anzupassen.
Untergeordnete Elemente erweitern den Vertrag automatisch, um sich an den verfügbaren freien Speicherplatz anzupassen.

Flexbox führt seine eigenen einzigartigen Begriffe und Konzepte ein. Einige davon sind:

Flex-Container. Ein Element, dessen display auf flex oder inline-flex gesetzt ist und das als Containerelement für Flex-Elemente dient.
Flex-Artikel. Jedes Element innerhalb eines Flex-Containers. (Hinweis: Text, der direkt in einem Flex-Container enthalten ist, wird in ein anonymes Flex-Element eingeschlossen.)
Achsen . Jedes Flexbox-Layout hat eine flex-directio , die die Hauptachse bezeichnet, entlang der die Flex-Elemente ausgelegt werden. Die Querachse ist dann die Achse senkrecht zur Hauptachse.
Linien. Flex-Artikel können je nach flex-wrap Eigenschaft entweder auf einer einzelnen Zeile oder auf mehreren Zeilen angeordnet werden.
Maße. Die Flexbox-Äquivalente von height und width sind main size und cross size , die die Größe der Hauptachse bzw. der Querachse des Flex-Containers angeben.

OK, also mit dieser kurzen Einführung, hier ist das alternative Markup, das wir verwenden können, wenn wir ein Flexbox-Layout verwenden:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

In unserem Beispielanwendungsfall ist unser Hauptlayout (Kopfzeile, Inhalt, Fußzeile) vertikal, also richten wir unsere Flexbox so ein, dass sie ein Spaltenlayout verwendet:

 .layout-flexbox { display: flex; flex-direction: column; }

Obwohl unser Hauptlayout vertikal ist, sind die Elemente in unserem Inhaltsbereich (nav, subnav, main) horizontal angeordnet. Jeder flexible Container kann nur eine Richtung definieren (dh sein Layout muss entweder horizontal oder vertikal sein). Wenn das Layout mehr als dies erfordert (ein häufiger Fall für ein App-Layout), können wir daher mehrere Container ineinander verschachteln, jeder mit einem anderen Richtungslayout.

Aus diesem Grund haben wir einen zusätzlichen Container hinzugefügt (den ich content-area genannt habe), der #nav , #subnav und #main . Auf diese Weise kann das Gesamtlayout vertikal sein, während die Inhalte des Inhaltsbereichs horizontal angeordnet werden können.

Um nun unsere Flex-Elemente zu positionieren, werden wir die Eigenschaft flex verwenden, die eine Abkürzung für flex: <flex-grow> <flex-shrink> <flex-basis>; . Diese drei Flex-Eigenschaften bestimmen, wie unsere Flex-Elemente den zwischen ihnen verbleibenden freien Raum in Fließrichtung wie folgt verteilen:

flex-grow: Gibt an, wie stark ein Gegenstand im Verhältnis zu den übrigen flexiblen Gegenständen im selben Container wachsen kann
flex-shrink: Gibt an, wie ein Element im Verhältnis zu den übrigen flexiblen Elementen im selben Container schrumpfen kann
Flex-Basis: gibt die Anfangsgröße eines Elements an (dh bevor es schrumpft oder wächst)

Das Festlegen von flex-grow und flex-shrink auf Null bedeutet, dass die Größe des Elements festgelegt ist und es nicht wächst oder schrumpft, um Platz für mehr oder weniger freien Speicherplatz zu schaffen. Das machen wir für unsere Kopf- und Fußzeile, da sie eine feste Größe haben:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Damit ein Element den gesamten verfügbaren freien Speicherplatz belegt, setzen Sie seine flex-grow und flex-shrink Werte auf 1 und seinen flex-basis Wert auf auto . Dies tun wir für den Inhaltsbereich, da wir möchten, dass er den gesamten verfügbaren freien Speicherplatz einnimmt.

Und wie wir bereits gesagt haben, möchten wir, dass die Elemente im content-area in Zeilenrichtung angeordnet werden, also fügen wir display: flex ; und flex-direction: row; . Dies macht content-area zu einem neuen flexiblen Container für #nav , #subnav und `#main.

Hier ist also, was wir für das CSS für den content-area erhalten:

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

Im Inhaltsbereich haben sowohl #nav als auch #subnav feste Größen, also setzen wir einfach die Eigenschaft flex entsprechend:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Beachten Sie, dass ich overflow-y: hidden zu diesen CSS-Spezifikationen hinzugefügt habe, um zu verhindern, dass Inhalte die Containerhöhe überschreiten und überlaufen. Chrome benötigt dies eigentlich nicht, FireFox jedoch.)

#main nimmt den Rest des freien Speicherplatzes ein:

 #main { flex: 1 1 auto; overflow-y: auto; }

Das sieht alles gut aus, also fügen wir jetzt unser dynamisches Verhalten hinzu und sehen, wie das geht.

Das JavaScript ist identisch mit dem, was wir zuvor hatten (außer dass die CSS-Element-Containerklasse, die wir hier angeben, layout-flexbox ist, während sie zuvor layout-classic war):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Wir fügen die expanded Klasse wie folgt zu CSS hinzu:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Und voila!

Beachten Sie, dass wir diesmal andere Elemente nicht über die Breitenänderung informieren müssen, da das Flexbox-Layout all das für uns erledigt.

Dann bleibt nur noch das Sub-Navi zu verstecken. Und rate was? Auch das „funktioniert“ ohne weitere Änderungen mit dem gleichen JavaScript-Code wie bisher. Flexbox kennt freien Speicherplatz und lässt unser Layout automatisch ohne zusätzlichen Code funktionieren. Ziemlich cool.

Flexbox bietet auch einige interessante Möglichkeiten, sowohl vertikale als auch horizontale Elemente zu zentrieren. Wir erkennen hier, wie wichtig es für eine Präsentationssprache ist, den Begriff des freien Raums einzubeziehen, und wie skalierbar unser Code mit dieser Art von Techniken werden kann. Andererseits kann die Beherrschung der Konzepte und Notation hier etwas mehr erfordern als klassisches CSS.

CSS3-Rasterlayout

Wenn das Flexbox-Layout an der Spitze von CSS3 steht, dann könnte man sagen, dass das Grid-Layout an der Spitze steht. Die W3C-Spezifikation befindet sich noch im Entwurfsstadium und bietet noch immer eine recht eingeschränkte Browserunterstützung. (Es wird in Chrome durch das Flag „experimentelle Webplattformfunktionen“ in chrome://flags aktiviert).

Allerdings halte ich persönlich diesen Entwurf nicht für revolutionär. Vielmehr heißt es in den HTML5-Designprinzipien: „Wenn eine Praxis unter Autoren bereits weit verbreitet ist, erwägen Sie, sie zu übernehmen, anstatt sie zu verbieten oder etwas Neues zu erfinden.“

Dementsprechend wurden Markup-basierte Grids schon lange verwendet, sodass das CSS-Grid-Layout jetzt wirklich nur dem gleichen Paradigma folgt und alle seine Vorteile und noch viel mehr in der Präsentationsebene ohne Markup-Anforderungen bietet.

Die allgemeine Idee ist, ein vordefiniertes, festes oder flexibles Rasterlayout zu haben, in dem wir unsere Elemente positionieren können. Wie die Flexbox arbeitet auch sie nach dem Freiraumprinzip und ermöglicht es uns, sowohl vertikale als auch horizontale „Richtungen“ im selben Element zu definieren, was Vorteile in Codegröße und Flexibilität bringt.

Grid-Layout führt 2 Arten von Grids ein; nämlich explizit und implizit . Der Einfachheit halber konzentrieren wir uns hier auf explizite Gitter.

Wie Flexbox führt Grid-Layout seine eigenen einzigartigen Begriffe und Konzepte ein. Einige davon sind:

Grid-Container. Ein Element, dessen display auf „grid“ oder „inline-grid“ eingestellt ist, in dem die enthaltenen Elemente durch Positionierung und Ausrichtung an einem vordefinierten Raster angeordnet werden (expliziter Modus). Das Raster ist ein sich überschneidender Satz horizontaler und vertikaler Rasterlinien, die den Raum des Rastercontainers in Rasterzellen unterteilen. Es gibt zwei Sätze von Gitterlinien; eine zum Definieren der Spalten und eine orthogonal dazu zum Definieren der Zeilen.
Gitterspur. Der Abstand zwischen zwei benachbarten Gitterlinien. Jeder Rasterspur ist eine Größenfunktion zugeordnet, die steuert, wie breit oder hoch die Spalte oder Zeile wachsen darf und wie weit ihre begrenzenden Rasterlinien voneinander entfernt sind.
Gitterzelle. Der Abstand zwischen zwei benachbarten Zeilen- und zwei benachbarten Spaltengitterlinien. Es ist die kleinste Einheit des Rasters, die beim Positionieren von Rasterelementen referenziert werden kann.
Flexible Länge. Eine mit der Einheit fr angegebene Dimension, die einen Bruchteil des freien Speicherplatzes im Grid-Container darstellt.

Hier ist das alternative Markup, das wir verwenden können, wenn wir ein Rasterlayout verwenden:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Beachten Sie, dass wir bei diesem Layout keinen zusätzlichen Wrapper für den Inhaltsbereich benötigen, wie wir es für die Flexbox getan haben, da diese Art von Layout es uns ermöglicht, die Elementraumbezeichnung in beiden Richtungen im selben Rastercontainer zu definieren.

Lassen Sie uns jetzt in das CSS eintauchen:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Wir haben display: grid; auf unserem Container. Die Eigenschaften grid-template-columns und grid-template-rows werden jeweils als Liste von Zwischenräumen zwischen Rasterspuren angegeben. Mit anderen Worten, diese Werte sind nicht die Position der Gitterlinien; Sie stellen vielmehr den Abstand zwischen zwei Spuren dar.

Beachten Sie, dass die Maßeinheiten wie folgt angegeben werden können:

eine Länge
ein Prozentsatz der Größe des Grid-Containers
eine Messung des Inhalts, der die Spalte oder Reihe belegt, oder
ein Bruchteil des freien Speicherplatzes im Raster

Also mit grid-template-columns: auto 0 auto 1em 1fr; wir werden haben:

1 Spur, die 2 Spalten mit auto Breite definiert ( #nav space)
1 Rinne von 0 (der Rand für #subnav ist auf Elementebene, da er vorhanden sein kann oder nicht, auf diese Weise vermeiden wir eine doppelte Rinne)
1 Spur, die 2 Spalten mit auto Breite definiert ( #subnav space)
1 Rinne von 1em
1 Track mit 1fr für #main (nimmt den gesamten verbleibenden Platz ein)

Hier verwenden wir stark den auto Wert für die Spur, wodurch wir dynamische Spalten haben können, bei denen die Position und Größe der Zeilen durch ihren maximalen Inhalt definiert werden. (Wir müssen daher die Größen für die #nav und #subnav Elemente angeben, was wir in Kürze tun werden.)

In ähnlicher Weise haben wir für die grid-template-rows: 5em 1em 1fr 1em 3em; Dadurch werden unsere #Kopf- und #footer fixiert und alle Elemente dazwischen, um den verbleibenden freien Platz zu nutzen, während #header -Rinnen verwendet 1em .

Sehen wir uns nun an, wie wir die tatsächlich zu positionierenden Elemente in unserem definierten Raster platzieren:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Dies gibt an, dass unsere Kopfzeile zwischen den Gitterlinien 1 und 6 (volle Breite) und zwischen den Gitterlinien 1 und 2 für unsere Zeilen liegen soll. Dasselbe gilt für die Fußzeile, aber zwischen den letzten beiden Zeilen (statt den ersten beiden). Und der Hauptbereich wird passend zu dem Platz gesetzt, den er einnehmen soll.

Beachten Sie, dass die Eigenschaften grid-column und grid-row abgekürzt sind, um jeweils grid-column-start / grid-column-end und grid-row-start / grid-row-end anzugeben.

OK, also zurück zu #nav und #subnav . Da wir zuvor #nav und #subnav mit Auto-Werten in den Track platziert haben, müssen wir angeben, wie breit diese Elemente sind (dasselbe gilt für den erweiterten Modus, wir ändern nur die Breite und das Grid-Layout kümmert sich um den Rest).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Jetzt können wir also unser #nav und auch das #subnav ausblenden/entfernen und alles funktioniert perfekt! Das Grid-Layout ermöglicht es uns auch, Aliase für unsere Linien zu verwenden, sodass das Ändern von Grids letztendlich keinen Code auslöst, da er einem Namen und nicht einer Grid-Linie zugeordnet ist. Ich freue mich auf jeden Fall darauf, dass dies von mehr Browsern unterstützt wird.

Fazit

Selbst mit klassischen CSS-Techniken kann viel mehr erreicht werden, als viele Webentwickler erkennen oder nutzen. Vieles davon kann jedoch ziemlich mühsam sein und das wiederholte Festcodieren von Werten in einem Stylesheet beinhalten.

CSS3 hat damit begonnen, viel ausgefeiltere und flexiblere Layout-Techniken bereitzustellen, die wesentlich einfacher zu programmieren sind und einen Großteil der Langeweile früherer CSS-Spezifikationen vermeiden.

Die Beherrschung dieser Techniken und Paradigmen – sowohl für CSS2 als auch für CSS3 – ist unerlässlich, um alles zu nutzen, was CSS zu bieten hat, um sowohl die Benutzererfahrung als auch die Qualität Ihres Codes zu optimieren. Dieser Artikel stellt wirklich nur die Spitze des Eisbergs von allem dar, was es zu lernen gibt und was mit der Leistungsfähigkeit und Flexibilität von CSS erreicht werden kann. Haben Sie es!

Siehe auch : *Exploring SMACSS: Scalable and Modular Architecture for CSS*