Wie CSS Grid die Inhaltsstrukturierung ändert

Jeder, der zumindest ein bisschen Website-Entwicklung betrieben hat, weiß, dass die <div> -Tags ein wichtiger Baustein für die Steuerung des Layouts sind.

HTML5 führte neue semantische Elemente ein, um dies zu unterstützen. Und obwohl sie eine fantastische Ergänzung der Sprache sind, sind sie ein bisschen wie das Dekorieren unserer Suppe mit <div> -Elementen.



Mit dem Aufkommen von CSS Grid müssen wir uns nicht mehr auf <div> -Elemente verlassen, um eine Seitenstruktur oder eine noch komplexere Komponente zu erstellen. Die Struktur wird buchstäblich vom übergeordneten Element bestimmt, nicht davon, wie sich der Inhalt darin befindet.

Dies bedeutet, dass wir ein schönes einfaches Layout erhalten können, das den Inhalt strukturiert, ohne darauf zu achten, wie er ursprünglich mithilfe der <div> -Elemente organisiert wurde.

---

CSS Grid kann kompliziert sein, aber auch Flexbox

Ich habe viele Leute beschweren hören, dass das Grid zu komplex ist und dass Flexbox den gleichen Job macht. Ich würde sagen, dass sie mit Flexbox nur vertraut sind und daher keine Lust haben, mehr über CSS Grid zu erfahren.

Die CSS-Grid-Technologie führt viele neue Eigenschaften und Werte ein. Ja, es gibt eine Lernkurve. Flexbox ist aber auch ziemlich kompliziert.

Können Sie über die Vorteile der Verwendung der flex-basis Eigenschaft anstelle der width sprechen? Oder wie berechnet Flexbox die Breite von Flex-Elementen, wenn wir sie nicht explizit definiert haben?

Wenn Sie beispielsweise das folgende Beispiel jemandem zeigen, der Flexbox noch nie verwendet hat, wie erklären Sie die Tatsache, dass es für beide Spaltengruppen dasselbe Layout und dieselben Stile hat? Erschwerend kommt hinzu, dass die zweite Spalte in beiden Fällen 50% breit ist. Offensichtlich setzt eine Breite von 50% die Elementgröße nicht auf 50%.


„Nun, alles beginnt mit der Tatsache, dass die Elemente komprimiert werden, wenn nicht genügend Platz im Container vorhanden ist. Selbst wenn wir die Elementbreite auf 50% setzen, hat sie nicht genügend Platz, sodass sie komprimiert wird, um sich in den Container zu quetschen, da die anderen <div> benötigt mehr Platz. 50% ist eher die ideale Größe für den Block, aber nicht die tatsächliche Größe. “

„Im obigen Beispiel ist der Inhalt des ersten Blocks daher so groß, dass ein Problem entsteht, da er als Flex-Element standardmäßig schrumpft, um den Inhalt aufzunehmen. In diesem Beispiel hat dieses Element viel Inhalt, also ...

Also ja, Flexbox ist großartig und macht einen großartigen Job beim Erstellen von Layouts, aber bitte sag mir nicht, dass es einfach ist. Sobald Sie von idealen Beispielen zu Arbeitsaufgaben übergehen, ist ein solches Verhalten oft weit vom intuitiven Verständnis entfernt, und manchmal kann es offen gesagt seltsam sein.

Ein Raster ist insofern komplex, als es viele neue Eigenschaften und Werte mit sich bringt, aber sie geben uns viel mehr Kontrolle als Flexbox.

In diesem Artikel möchte ich darüber nachdenken, wie diese zusätzliche Steuerungsebene unser Markup vereinfacht und es uns ermöglicht, weniger Code zu schreiben, ohne auch nur lernen zu müssen, wie einige seiner bizarren Funktionen verwendet werden.

Flexbox-Einschränkungen

Selbst wenn wir eine einfache Komponente mit Flexbox erstellen, da sie nur in einer Dimension wirkt (Flex-Elemente sind entweder Zeilen oder Spalten, sie können nicht beide sein), haben wir viel Die Anzahl der Elemente, die zum Erstellen von Zeilen verwendet werden, die dann in Spalten unterteilt werden können.

Wenn wir zum Beispiel an einer Karte wie dieser arbeiten:



Dies ist kein kompliziertes Layout, aber wir müssen unsere Inhalte dennoch auf eine bestimmte Art und Weise organisieren, damit sie funktionieren.



In dieser Situation werden die gelben und orangefarbenen Blöcke benötigt, damit beim Hinzufügen der Eigenschaft display: flex für das Element .card (roter Block) zwei Spalten erstellt werden. Um den gesamten Inhalt zu strukturieren, erhalten wir ein Markup, das ungefähr so ​​aussieht:

 <div class="card"> <div class="profile-sidebar"> <!--       --> </div> <div class="profile-body"> <!-- , ,  --> </div> </div> 

Sobald Sie die Funktionsweise von Flexbox verstanden haben, ist es einfach, diese Struktur zu verstehen.

Wenn wir die Eigenschaft display: flex für das Element .card , erhalten wir zwei Spalten, nach denen wir jede einzeln .card müssen.

Hier ist ein Arbeitsbeispiel mit allen Stilen:


Tatsache ist, dass wir beim Erstellen von Inhaltsspalten ein etwas komplizierteres Markup erhalten und uns auch einschränken, da wir verschiedene Teile des Inhalts zur Gruppierung zwingen.

Vereinfachen Sie alles mit CSS Grid

Da CSS Grid zweidimensional ist, können wir Zeilen und Spalten gleichzeitig erstellen. Dies bedeutet, dass der Grid-Container (auf den wir die Eigenschaft display: grid ) die volle Kontrolle über das Layout im Inneren hat.

Zuvor waren hierfür zusätzliche Elemente erforderlich, wie im obigen Flexbox-Beispiel. Mit dem Grid können wir sie vollständig entfernen.

 <div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div> 

Ist das aus Markup-Sicht nicht sinnvoller?

Es gibt ein Element in der Klasse .card in das wir den unmittelbaren Inhalt .card . Wir müssen uns nicht um die Struktur und das Layout der Elemente kümmern, sondern setzen nur den Inhalt ein, den wir benötigen, und gehen weiter.

Strukturierung des Layouts

Genau wie bei der Verwendung von Flexbox müssen wir das Layout noch strukturieren, obwohl es aufgrund der Besonderheiten des Grids etwas anders aussieht.

Dies ist eine der Situationen, in denen Leute argumentieren können, dass das Raster komplizierter ist, aber tatsächlich zeichne ich nur Blöcke um jeden Inhalt.



Mit Flexbox haben wir zwei Blöcke erstellt, die als Spalten hervorstechen. Wenn Sie stattdessen das Raster verwenden, konfigurieren wir das gesamte Raster für das übergeordnete Element und geben dann den untergeordneten Elementen an, wo sie in diesem Raster sitzen sollen.

Um das Raster einzurichten, können wir Folgendes tun:

 .card { display: grid; grid-template-columns: 1fr 3fr; } 

Die Maßeinheit fr ist für das Raster eindeutig und gibt den Anteil des verfügbaren Speicherplatzes an. Diese Verwendung ist der Installation von zwei Spalten in Flexbox und der Bestimmung der Breite von 25% bzw. 75% sehr ähnlich.

Elemente in einem Raster platzieren

Vielleicht aufgrund der Tatsache, dass ich jahrelang Float verwendet habe, um Markups zu erstellen, scheinen Situationen, in denen Elemente einfach genau dort platziert werden, wo sie benötigt werden, wenig magisch zu sein.

Sie können grid-row und grid-column für jedes Element verwenden, um sie genau dort zu platzieren, wo wir möchten. Je häufiger ich Raster verwende, desto mehr verliebe ich mich in die Eigenschaft "Rastervorlagenbereiche" und platziere Elemente mithilfe von Bereichsdefinitionen.

Dieser Ansatz dauert etwas länger, lohnt sich jedoch, insbesondere wenn wir ein adaptives Design erstellen (wir werden bald darauf zurückkommen).

Zuerst müssen wir .card für das .card Element definieren, wonach wir alle .card Elemente diesen Bereichen zuweisen können:

 .card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } 

Im folgenden Beispiel können Sie dies alles in Aktion sehen:

So einfach ist das

Einer der Gründe, warum ich gerne grid-template-areas ist, dass jemand anderes, der sich den Code ansieht, sofort versteht, was passiert ...

Wenn Ihnen jemand den Code zeigt, in dem grid-row und grid-column mit Zahlen und span , ist es recht einfach zu berechnen und zu verstehen, wo und wie sich Elemente befinden. Für einfache Layouts oder für die Verwendung von span an einigen Stellen halte ich ihre Verwendung für angemessen, aber viel angenehmer. Wenn Sie nur den Code des übergeordneten Elements betrachten, verstehen Sie sofort, wie das gesamte Layout aussehen wird .

Wenn Sie ein Raster verwenden, ist es einfacher, die tatsächliche Größe eines Elements zu ermitteln

In unserem allerersten Beispiel, in dem wir die Breite eines der Flexelemente auf 50% eingestellt haben, war sie tatsächlich nicht gleich 50%. Wenn Sie verstehen, warum dies passiert ist, großartig, aber manchmal kann es immer noch ärgerlich sein. Dies ist leicht zu umgehen, aber wenn Sie ein Raster verwenden, wird es zu einem viel kleineren Problem.

Da wir das gesamte Layout definieren, geben wir auch genau an, wie viel Platz Elemente einnehmen sollen.

Und natürlich verfügen wir über die Funktion minmax() und die Maßeinheiten fr , die das Wasser ein wenig aufrühren, da sie es uns ermöglichen, Größen flexibler zu definieren (wie die im obigen Beispiel verwendeten), aber selbst dann haben wir immer noch die volle Kontrolle über ihre Flexibilität, und all dies wird vom Elternteil gesteuert, ohne dass einige Eigenschaften für das Elternteil und einige für die Kinder festgelegt werden müssen.

Begrenzte Änderungen

Wenn wir uns das Flexbox-Beispiel ansehen, können wir es nicht wie das folgende Layout aussehen lassen, ohne das HTML-Markup zu ändern:



Wir haben uns darauf beschränkt, wie wir Elemente mit einem <div> gruppiert haben. Wir mussten diese <div> , damit das Layout funktioniert, aber jetzt ist es ein Hindernis für uns geworden.

Mit den Kindern unseres Gittercontainers auf derselben Ebene können Sie alles tun . Und als zusätzlichen Bonus ist es sehr einfach, diese Änderungen vorzunehmen, da wir alles mithilfe von grid-template-areas konfiguriert haben.

 .card { /*   grid-template-areas: "image name" "image position" "social description"; */ /*   */ grid-template-areas: "image name" "image position" "image social" ". description"; } 

Wenn Sie auf diese Weise mit Rastervorlagenbereichen spielen, können Sie die Symbole sozialer Netzwerke schnell und einfach dahin verschieben, wo wir sie sehen möchten (der Punkt im letzten Teil zeigt eine leere Zelle an).

Es erleichtert das Leben bei der Arbeit mit Medienabfragen.

Wie ich bereits mehrfach erwähnt habe, ist dies der Fall, wenn die Verwendung von Rastervorlagenbereichen gewährleistet ist. Wir können unser Layout nur mithilfe der Eigenschaften des übergeordneten Elements vollständig steuern:

 .card { /*     */ display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } /*      */ @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } } 

Der folgende CodePen enthält ein vollständig gestaltetes Beispiel. Sie können es studieren, mit Rasterbereichen spielen und sehen, wie einfach es ist, das Layout vollständig neu zu erstellen.

Flexbox hat immer noch einen eigenen Bereich

Ich benutze Grid immer häufiger, aber ich denke, Flexbox hat immer noch einen eigenen Bereich. Wenn ich ein Logo und eine Navigation nebeneinander habe, wäre es schön, eine einfache Möglichkeit zu haben, so etwas zu tun und zu wissen, dass sie dort sind, wo ich sie haben möchte:

 .header { display: flex; justify-content: space-between; } 

Gleiches gilt für das <ul> , das wir für die Navigation verwenden, nur um die Elemente aufeinander folgen zu lassen, oder, wie Sie im Beispiel mit der von uns untersuchten Karte sehen können, ideal für die .social-list .

Für einfache Komponenten, für die wir kein kompliziertes Layout benötigen, funktioniert dies wirklich gut. Aber immer mehr minmax() ich eine Bewegung in Richtung Raster, manchmal wegen der offensichtlichen Notwendigkeit, manchmal weil ich die minmax() -Funktion oder die Maßeinheiten fr verwenden minmax() .

Letztendlich denke ich, dass das Beste an Grid die Möglichkeit ist, unser Markup erheblich zu vereinfachen.

Wir sind immer noch gezwungen, das <div> , aber dank des Grids können wir sie immer weniger verwenden.

Abschließend

Egal wie gut Flexbox ist, es ist nicht einfacher als Grid. In bestimmten Situationen funktioniert es wirklich hervorragend, aber wenn wir mit komplexeren Layouts arbeiten, können wir mit dem Grid viel mehr Kontrolle haben. Diese Steuerung wird verbessert, wenn Sie mit reaktionsschnellem Design arbeiten, wenn Sie Änderungen an Medienabfragen vornehmen.

Bei Verwendung von Flexbox können wir die flex-direction am besten ändern. Mithilfe eines Rasters können wir das Design einer Komponente schnell und einfach vollständig ändern.

Sowohl Flexbox als auch Grid bieten viel mehr Funktionen. Jedes hat seinen eigenen Zweck, aber wenn Sie das Gefühl haben, nicht zu wissen, welchen Ansatz Sie wählen sollen, oder wenn Sie nicht in der Lage sind, Responsive Design im Allgemeinen zu verstehen, habe ich kürzlich bei Scrimba einen Kurs angekündigt, der sich mit den Themen Responsive Design namens The Responsive Web Design Bootcamp befasst.