So erstellen Sie komplexe Layouts mit CSS
Das Layout für das Web war immer begrenzt, es gab wirklich nie etwas, das wirklich darauf abzielte, Inhalte einfach in einem sinnvollen Format anzuzeigen.
In den 90er Jahren, als sich das Web zum ersten Mal durchsetzte, fanden Designer, die es gewohnt waren, Inhalte in einem Raster darzustellen, die einzige Möglichkeit, das gleiche Ergebnis im Browser zu erzielen, darin, die Tabelle zu verwenden. Das Zusammenführen von Zellen führte zu Komplexen Website-Layouts , aber dies spielte Chaos mit Zugänglichkeit und SEO. Schneller Vorlauf und heute gibt es viele Möglichkeiten, Inhalte mit Floats, flexiblen Boxen usw. zu platzieren.
CSS3 hat die Fähigkeiten des Web wirklich vorangetrieben und seit 2014 gibt es sie CSS-Rasterlayout . Derzeit wird 75 Prozent des Browsers unterstützt, sodass es an der Zeit ist, ernsthafte Überlegungen anzustellen. Zurb's Foundation 6 Framework ist an Bord und nutzt das, um sein Netz mit Strom zu versorgen.
Dieses Tutorial konzentriert sich auf die Erstellung einer Funktion im Stil eines Magazins, die Ihnen zeigt, wie Sie perfektionieren können sich anpassendes Webdesign für mittlere und kleine Bildschirmgrößen.
Laden Sie hier die Tutorial-Dateien herunter
01. Fangen Sie an
Öffnen Sie die Datei 'grid1.html' aus dem Startordner im Projektdateien . Das HTML-Layout hierfür enthält fünf div-Tags, die einfach als CSS-Klassen item1–5 bezeichnet werden. Dies ist der Inhalt, der in das Raster eingefügt wird. Der Container, der dies umschließt, definiert das Raster, das vier Spalten enthält.
item 1 item 2 item 3 item 4 item 5 02. Überprüfen Sie CSS für das Raster
Wenn Sie in den Kopfbereich schauen, können Sie sehen, dass der 'Container' als Raster mit automatischer Höhe für die Zeilen angeordnet wurde, während die Spalten auf vier festgelegt werden sollen, wobei jeder auf 25 Prozent des Browsers festgelegt ist . Überprüfen Sie dies im Browser und Sie werden sehen, dass jedem Element automatisch die nächste verfügbare Rasterposition zugewiesen wird.
.container { display: grid; grid-template-rows: auto; grid-template-columns: repeat(4, 25%); }03. Rasterpositionen definieren
Schauen Sie sich jetzt die Datei 'grid2.html' an. Es ist dasselbe wie die erste Datei, außer dass 'item1' und 'item2' bestimmte Positionen erhalten. Die erste befindet sich in Zeile 1 und endet vor Zeile 2. Die Spalte beginnt bei 1 und endet bei 3, sodass sie zwei Spalten umfasst. Die zweite beginnt in Spalte 3 und umfasst die nächsten beiden Spalten. Die verbleibenden Elemente füllen die nächsten verfügbaren Rasterplätze.
.item1 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; } .item2 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 5; }04. Verwenden Sie eine Rastervorlage
Öffnen Sie 'grid3.html' und sehen Sie sich den HTML-Text an. Sie werden sehen, dass es ein Layout mit einer Kopfzeile, einer Seitenleiste, einem Hauptinhaltsbereich und einer Fußzeile gibt. Sie können dem Inhalt mehr Text hinzufügen, um zu sehen, was passiert, wenn dieser platziert wird. Das Raster verwendet eine Vorlagenfunktion, um diese Abschnitte in ein Layout zu verwandeln.
Header Sidebar Content Footer 05. Definieren Sie die Vorlage
Schauen Sie sich das CSS für den Container an. Es wird wieder als Raster definiert. Die obere Reihe ist 200 Pixel hoch, die mittlere wird automatisch dimensioniert und die letzte Reihe wird 100 Pixel hoch sein. Die Spalten sind auf 33 Prozent Breite eingestellt und füllen den Rest automatisch aus. Die Vorlage gibt an, dass die Kopfzeile beide Spalten füllt. Die nächste Zeile ist die Seitenleiste in der ersten Spalte und der Inhalt in der nächsten. Die Fußzeile geht über beide.
.container { display: grid; grid-template-rows: 200px auto 100px; grid-template-columns: 33% auto; grid-template-areas: 'header header' 'sidebar content' 'footer footer'; } 
06. Verknüpfen Sie die Vorlage mit der Klasse
Um die Klasse mit der Vorlage zu verknüpfen, definiert der hier gezeigte Code dies. Jeder Rasterbereich wird benannt und der Link erstellt. Der Inhalt wird hier nicht angezeigt, befindet sich jedoch im Dokument 'grid3.html'. Sehen Sie sich dies im Browser an, um das Layout des Rasters zu sehen. Da zwei Spalten definiert sind, benötigt die Vorlage zwei Bereiche in jedem der Anführungszeichen.
.header { grid-area: header; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }07. Mach es reaktionsschnell
Um 'grid3.html' ansprechbar zu machen, wird eine Medienabfrage eingefügt und die oberste Zeile bei 200 Prozent gehalten, während die Größe der verbleibenden Zeilen automatisch angepasst wird. Es gibt nur eine Spalte in voller Breite, daher enthält die Vorlage ein Wort in jedem Anführungszeichen, um das Layout zu definieren. Diese können einfach neu angeordnet werden, ohne den HTML-Code zu verschieben.
@media screen and (max-width: 699px) { .container { display: grid; grid-template-rows: 200px auto; grid-template-columns: 100%; grid-template-areas: 'header' 'sidebar' 'content' 'footer'; } } 
08. Arbeiten Sie an einem echten Layout
Öffnen Sie jetzt 'index.html' - der gesamte HTML-Code für den Inhalt wurde bereits erstellt, ebenso wie ein Teil des CSS für die Designelemente. Fügen Sie dieses Raster zu den Stil-Tags im Kopfbereich hinzu. Auf diese Weise wird ein dreispaltiges Raster mit der Vorlage für jeden Abschnitt erstellt. Beachten Sie den Punkt für die leeren Gitterabschnitte.
.container1 { width: 80%; margin: 0 auto; display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% auto; grid-template-areas: 'header header header' '. standfirst standfirst''. . article1' 'focus pullquote pullquote' 'article2 article2 .'; }09. Verknüpfen Sie die Vorlage
Wie im vorherigen Schritt wird der Header mit der Vorlage verknüpft. Der Header wird angewiesen, alle drei Spalten des Rasters zu überspannen. Dann wird der Standfirst so eingestellt, dass er zwei Spalten enthält und links eine leere Spalte enthält. Wenn Sie den Browser überprüfen, wird diese Spalte gefüllt, da der verbleibende Inhalt den nächsten verfügbaren Speicherplatz automatisch ausfüllt. Dies ist jedoch nicht der Fall, wenn alles eingerichtet ist.
.header { grid-area: header; } .standfirst { grid-area: standfirst; }10. Fügen Sie die nächsten Bereiche hinzu
Nun werden der erste Artikel, das Pull-Zitat und das Fokusbild in das Design eingefügt. Das Pull-Zitat und das Bild befinden sich nebeneinander in derselben Zeile. Zu diesem Zeitpunkt wurde Artikel 2 noch nicht platziert, sodass der erste verfügbare Platz im Raster neben dem ersten Platz belegt wird.
.article1 { grid-area: article1; } .pullquote { grid-area: pullquote; } .focus { grid-area: focus; text-align: center; } 
11. Beenden Sie das erste Raster
Durch Hinzufügen des CSS des zweiten Artikels kann das gesamte erste Raster korrekt platziert werden. Wenn Sie dies im Browser betrachten, wird angezeigt, dass das Layout mit dem Hintergrundbild funktioniert und das Layout erstellt, das in Magazinen angezeigt wird, in denen der Designer ein großes Hintergrundbild umgeht.
.article2 { grid-area: article2; column-gap: 65px; column-count: 2; }12. Fügen Sie einen weißen Hintergrund hinzu
Bevor Sie das zweite Raster starten, fragen Sie sich möglicherweise, warum zwei Raster erforderlich sind. Der Grund dafür ist, dass dieses Raster einen weißen Hintergrund in voller Breite haben wird, sodass dieses CSS das zweite Raster umschließt. Dies soll diesem Abschnitt das Gefühl einer zweiten Seite im Design geben.
.whitebg { padding: 100px 0; background-color: #ddd; }13. Machen Sie ein zweites Gitter
Das zweite Raster ist einfacher als das erste. Es gibt drei Spalten mit einer automatischen Höhe in den Zeilen. Der Inhalt wird jeweils eine Spalte füllen, sodass die Vorlagenbereiche nicht definiert werden müssen. Wenn das Tablet-Design hinzugefügt wird, muss jedoch in zwei Spalten gewechselt werden, sodass ein Reflow erforderlich ist und die Namen wichtig sind.
.container2 { width: 80%; margin: 0 auto; display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% auto; grid-template-areas: 'img1 img2 article3'; } 
14. Fügen Sie die Spalten hinzu
Jede der CSS-Klassen im zweiten Raster wird angewiesen, sich mit der entsprechenden Spalte zu verknüpfen, wie in der Rastervorlage definiert. Die Farbe des Artikeltextes wird geändert, um ihn vom helleren Hintergrund dieses Abschnitts abzuheben. Da nur die Fußzeile fertiggestellt werden muss, ist das Design des Layouts im Stil eines Magazins fast fertig.
.img1 { grid-area: img1; } .img2 { grid-area: img2; } .article3 { grid-area: article3; color: #333; }15. Vervollkommnen Sie den Fuß der Seite
Wenn Sie die Seite fertig stellen, wird ein Div in voller Breite über den Bildschirm gelegt, das mit einer schwarzen Farbe gefüllt wird und der Text wird nur zentriert. Damit ist die Desktop-Version des Designs fertiggestellt. Bewegen Sie den Bildschirm jedoch unter eine Breite von 1200 Pixel, und die Site beginnt zu brechen.
.footer { background-color: #000; color: #999; text-align: center; padding: 50px 20px 100px; }16. Passen Sie das mittlere Bildschirmdesign an
Hier wird eine Medienabfrage eingefügt, um das Design zu überwachen, wenn die Breite des Browsers weniger als 1200 Pixel beträgt. Der Code für die Schritte 17 und 18 wird in die Klammern gesetzt, in denen sich der Kommentar befindet. In diesem Fall wird die Layoutstruktur beider Raster geändert.
@media screen and (max-width: 1200px) { /* code here */ }17. Reflow das erste Gitter
Das erste Raster füllt jetzt die gesamte Breite des Browsers mit nur zwei statt drei Spalten. Die Reihenfolge der Abschnitte wird in die Vorlage eingefügt, wobei die Artikel die Seiten wechseln, da dies besser zum Hintergrundbild bei dieser Bildschirmgröße passt.
.container1 { width: 100%; grid-template-rows: auto; grid-template-columns: 50% 50%; grid-template-areas: 'header header' 'standfirst standfirst' 'article1 .' 'pullquote pullquote' 'article2 focus'; } .article2 { column-count: 1; } 
18. Testen Sie Ihr Layout
Die Größe des zweiten Rasters wird ebenfalls so geändert, dass die gesamte Breite des Browsers und zwei hinzugefügte Spalten berücksichtigt werden. Die Bilder werden nebeneinander in der Zeile über dem Text platziert, sodass sie genau auf das Display passen. Sie können dieses Layout im Browser testen, indem Sie die Größe Ihres Browsers unter 1200px ändern.
.container2 { width: 100%; margin: 0 auto; grid-template-rows: auto; grid-template-columns: 50% 50%; grid-template-areas: 'img1 img2' 'article3 article3'; }19. Design für Handys optimieren
Jeder Browser mit einer Breite von weniger als 769 Pixel erhält den Code, der in den letzten Schritten hinzugefügt wird. Alles, was wir hier tun müssen, ist sicherzustellen, dass jedes der Raster ein einzelnes Spaltenlayout hat, damit der Inhalt auf kleinerem Raum richtig angezeigt werden kann.
@media screen and (max-width: 768px) { /* final steps code here */ }20. Überprüfen Sie das einspaltige Raster
Jetzt wird das erste Raster auf eine einzelne Spalte mit 100 Prozent der Breite des Browsers festgelegt und die Reihenfolge der Abschnitte in den Vorlagenbereichen hinzugefügt. Überprüfen Sie, wie der erste Teil der Seite auf mobilen Bildschirmen funktioniert.
.container1 { width: 100%; grid-template-rows: auto; grid-template-columns: 100%; grid-template-areas: 'header' 'standfirst' 'article1' 'pullquote' 'focus' 'article2'; } 
21. Beenden Sie das Layout
Hier wird auch das zweite Raster erstellt, um eine einzelne Spalte zu füllen, und das Layout der Abschnitte wird definiert. Speichern Sie nun das fertige Design und zeigen Sie es auf Bildschirmen unterschiedlicher Größe an, um die volle Layoutfunktion des CSS-Rasters zu sehen und zu sehen, wie einfach es war, den Inhalt für verschiedene Breiten neu zu ordnen.
.container2 { width: 100%; margin: 0 auto; grid-template-rows: auto; grid-template-columns: 100%; grid-template-areas: 'img1' 'img2' 'article3'; }Dieser Artikel wurde ursprünglich im kreativen Webdesign-Magazin Web Designer veröffentlicht. Kaufen Ausgabe 271 oder abonnieren .
Zum Thema passende Artikel:
