Best Practices mit CSS-Grid-Layout

Eine immer häufiger gestellte Frage – jetzt, wo Leute CSS Grid Layout in der Produktion verwenden – scheint zu sein: „Was sind die Best Practices?“ Die kurze Antwort auf diese Frage ist die Verwendung der Layoutmethode, wie sie in der Spezifikation definiert ist. Die einzelnen Teile der Spezifikation, die Sie verwenden, und wie Sie Grid mit anderen Layoutmethoden wie Flexbox kombinieren, hängt davon ab, was für die Muster funktioniert, die Sie erstellen möchten, und wie Sie und Ihr Team arbeiten möchten.

Wenn ich genauer hinsehe, denke ich, dass diese Bitte um „Best Practices“ vielleicht auf einen Mangel an Vertrauen in die Verwendung einer Layoutmethode hinweist, die sich sehr von der vorherigen unterscheidet. Vielleicht eine Sorge, dass wir Grid für Dinge verwenden, für die es nicht entwickelt wurde, oder dass wir Grid nicht verwenden, wenn wir es sollten. Vielleicht liegt es an Bedenken hinsichtlich der Unterstützung älterer Browser oder daran, wie Grid in unseren Entwicklungsworkflow passt.

In diesem Artikel werde ich versuchen, einige der Dinge zu behandeln, die entweder als Best Practices bezeichnet werden könnten, und einige Dinge, über die Sie sich wahrscheinlich keine Gedanken machen müssen.

Die Umfrage

Um diesen Artikel zu informieren, wollte ich herausfinden, wie andere Leute das Grid-Layout in der Produktion verwenden, welchen Herausforderungen sie gegenüberstanden und was ihnen daran wirklich Spaß machte? Gab es gemeinsame Fragen, Probleme oder angewandte Methoden? Um das herauszufinden, habe ich eine kurze Umfrage zusammengestellt, in der ich Fragen dazu stellte, wie die Leute das Grid-Layout verwenden, und insbesondere, was ihnen am besten gefällt und was sie als Herausforderung empfindet.

In dem folgenden Artikel werde ich auf einige dieser Antworten verweisen und sie direkt zitieren. Ich werde auch auf viele andere Ressourcen verlinken, wo Sie mehr über die beschriebenen Techniken erfahren können. Wie sich herausstellte, gab es in den Umfrageantworten weit mehr als einen Artikel voller interessanter Dinge zu entpacken. Ich werde einige der anderen Dinge ansprechen, die in einem zukünftigen Beitrag auftauchten.

Barrierefreiheit

Wenn es einen Teil der Grid-Spezifikation gibt, den Sie bei der Verwendung beachten müssen, dann bei der Verwendung von irgendetwas, das eine Neuordnung der Inhalte verursachen könnte:

„Autoren dürfen die Reihenfolge und die Rasterplatzierungseigenschaften nur für die visuelle, nicht logische Neuordnung von Inhalten verwenden. Stylesheets, die diese Funktionen verwenden, um eine logische Neuordnung durchzuführen, sind nicht konform.“

— Grid-Spezifikation: Neuordnung und Zugänglichkeit

Dies ist nicht nur bei Grid der Fall, aber die Möglichkeit, Inhalte so einfach in zwei Dimensionen neu anzuordnen, macht es zu einem größeren Problem für Grid. Wenn Sie jedoch eine Methode verwenden, die eine Neuordnung von Inhalten ermöglicht – sei es Grid, Flexbox oder sogar absolute Positionierung – müssen Sie darauf achten, das visuelle Erlebnis nicht von der Struktur des Inhalts im Dokument zu trennen. Screenreader (und Personen, die nur mit einer Tastatur im Dokument navigieren) folgen der Reihenfolge der Elemente in der Quelle.

Die Stellen, an denen Sie besonders vorsichtig sein müssen, sind die Verwendung von flex-direction , um die Reihenfolge in Flexbox umzukehren; die order in Flexbox oder Grid; jede Platzierung von Rasterelementen mit einer beliebigen Methode, wenn Elemente aus der logischen Reihenfolge im Dokument verschoben werden; und den dichten Packmodus von grid-auto-flow verwenden.

Weitere Informationen zu diesem Problem finden Sie in den folgenden Ressourcen:

• Grid-Layout und Barrierefreiheit – MDN
• Flexbox und die Tastaturnavigation trennen sich

Welche Grid-Layout-Methoden sollte ich verwenden?

„Bei so viel Auswahl in Grid war es eine Herausforderung, sich an eine konsistente Schreibweise zu halten (z. B. Gitterlinien benennen oder nicht, Grid-Template-Bereiche definieren, Fallbacks, Medienabfragen), damit es vom Ganzen wartbar wäre Mannschaft."

– Michelle Barker

Wenn Sie sich Grid zum ersten Mal ansehen, mag es mit so vielen verschiedenen Möglichkeiten zum Erstellen eines Layouts überwältigend erscheinen. Letztendlich kommt es jedoch darauf an, dass die Dinge von einer Linie des Rasters zur anderen positioniert werden. Sie haben Auswahlmöglichkeiten basierend auf dem Layout, das Sie erreichen möchten, sowie auf dem, was für Ihr Team und die Website, die Sie erstellen, gut funktioniert.

Es gibt keinen richtigen oder falschen Weg. Im Folgenden werde ich einige der häufigsten Themen der Verwirrung aufgreifen. Ich habe auch bereits viele andere mögliche Bereiche der Verwirrung in einem früheren Artikel „Grid Fallstricke und Stolpersteine“ behandelt.

Soll ich ein implizites oder explizites Raster verwenden?

Das Raster, das Sie mit grid-template-columns und grid-template-rows definieren, wird als explizites Raster bezeichnet. Das explizite Raster ermöglicht die Benennung von Linien im Raster und gibt Ihnen auch die Möglichkeit, mit -1 auf die Endlinie des Rasters zu zielen. Sie wählen ein explizites Raster, um eines dieser Dinge zu tun, und im Allgemeinen, wenn Sie ein fertig entworfenes Layout haben und genau wissen, wo Ihre Rasterlinien verlaufen sollen und wie groß die Spuren sind.

Ich verwende das Implizite Raster am häufigsten für Zeilenspuren. Ich möchte die Spalten definieren, aber dann werden die Zeilen automatisch angepasst und wachsen, um den Inhalt aufzunehmen. Sie können das implizite Raster bis zu einem gewissen Grad mit grid-auto-columns und grid-auto-rows steuern, aber Sie haben weniger Kontrolle, als wenn Sie alles definieren würden.

Sie müssen entscheiden, ob Sie genau wissen, wie viel Inhalt Sie haben und damit die Anzahl der Zeilen und Spalten – in diesem Fall können Sie ein explizites Raster erstellen. Wenn Sie nicht wissen, wie viel Inhalt Sie haben, aber einfach Zeilen oder Spalten erstellen möchten, die alles enthalten, was vorhanden ist, verwenden Sie das implizite Raster.

Trotzdem ist es möglich, beides zu kombinieren. Im folgenden CSS habe ich drei Spalten im expliziten Raster und drei Zeilen definiert, sodass die ersten drei Inhaltszeilen wie folgt aussehen:

• Eine Spur mit einer Höhe von mindestens 200 Pixel, die jedoch erweitert werden kann, um Inhalte aufzunehmen, die größer sind,
• Eine Strecke mit einer Höhe von 400 Pixel,
• Eine Spur von mindestens 300 Pixel Höhe (aber erweiterbar).

Alle weiteren Inhalte werden in eine im impliziten Raster erstellte Zeile eingefügt, und ich verwende die Eigenschaft grid-auto-rows rows, um diese Spuren mindestens 300 Pixel hoch zu machen und auf auto zu erweitern.

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Ein flexibles Raster mit einer flexiblen Anzahl von Spalten

Durch die Verwendung von Repeat Notation, Autofill und Minmax können Sie ein Muster aus so vielen Tracks erstellen, wie in einen Container passen, wodurch die Notwendigkeit von Media Queries in gewissem Maße entfällt. Diese Technik ist in diesem Video-Tutorial zu finden und wird zusammen mit ähnlichen Ideen auch in meinem kürzlich erschienenen Artikel „Using Media Queries For Responsive Design In 2018“ demonstriert.

Wählen Sie diese Technik, wenn Sie damit zufrieden sind, dass Inhalte unter frühere Inhalte fallen, wenn weniger Platz vorhanden ist, und gerne viel Flexibilität bei der Größe zulassen. Sie haben ausdrücklich darum gebeten, dass Ihre Spalten mit einer Mindestgröße angezeigt und automatisch ausgefüllt werden .

Es gab ein paar Kommentare in der Umfrage, die mich fragen ließen, ob die Leute diese Methode wählen, wenn sie wirklich ein Raster mit einer festen Anzahl von Spalten wollen. Wenn Sie an bestimmten Haltepunkten mit einer unvorhersehbaren Anzahl von Spalten enden, ist es möglicherweise besser, die Anzahl der Spalten festzulegen – und sie bei Bedarf mit Medienabfragen neu zu definieren – anstatt auto-fill oder auto-fit verwenden.

Welche Methode zur Streckendimensionierung sollte ich verwenden?

Ich habe die Spurgröße ausführlich in meinem Artikel „Wie groß ist diese Kiste? Understanding Sizing In Grid Layout“, bekomme ich jedoch oft Fragen dazu, welche Methode zur Spurgrößenanpassung verwendet werden soll. Insbesondere werde ich nach dem Unterschied zwischen der prozentualen Größenangabe und der fr -Einheit gefragt.

Wenn Sie einfach die fr -Einheit wie angegeben verwenden, unterscheidet sie sich von der Verwendung eines Prozentsatzes, da sie den verfügbaren Speicherplatz verteilt. Wenn Sie ein größeres Objekt in einer Spur platzieren, funktioniert fr until so, dass diese Spur mehr Platz einnimmt und verteilt, was übrig bleibt.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Damit die fr -Einheit den gesamten Platz im Grid-Container verteilt, müssen Sie ihr mit minmax() eine Mindestgröße von 0 geben.

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Sie können sich also entscheiden, fr in einem dieser Szenarien zu verwenden: in solchen, in denen Sie eine Platzverteilung auf der Basis von auto (dem Standardverhalten) wünschen, und in solchen, in denen Sie eine gleichmäßige Verteilung wünschen. Ich würde normalerweise die fr -Einheit verwenden, da sie dann die Größe für Sie berechnet und die Verwendung von Spuren oder Lücken mit fester Breite ermöglicht. Das einzige Mal, dass ich stattdessen einen Prozentsatz verwende, ist, wenn ich Rasterkomponenten zu einem vorhandenen Layout hinzufüge, das auch andere Layoutmethoden verwendet. Wenn ich möchte, dass meine Rasterkomponenten mit einem Float- oder Flex-basierten Layout übereinstimmen, das Prozentsätze verwendet, bedeutet die Verwendung in meinem Rasterlayout, dass alles dieselbe Größenmethode verwendet.

Objekte automatisch platzieren oder ihre Position festlegen?

Sie werden oft feststellen, dass Sie nur ein oder zwei Elemente in Ihrem Layout platzieren müssen und der Rest sich basierend auf der Reihenfolge der Inhalte ergibt. Tatsächlich ist dies ein wirklich guter Test, dass Sie die Quelle und die visuelle Anzeige nicht getrennt haben. Wenn die Dinge aufgrund der automatischen Platzierung ziemlich genau in Position geraten, sind sie wahrscheinlich in einer guten Reihenfolge.

Sobald ich jedoch entschieden habe, wohin alles führt, neige ich dazu, allem eine Position zuzuordnen. Das bedeutet, dass am Ende keine seltsamen Dinge passieren, wenn jemand dem Dokument etwas hinzufügt und das Raster es automatisch an einer unerwarteten Stelle platziert, wodurch das Layout über den Haufen geworfen wird. Wenn alles platziert ist, fügt Grid dieses Element in die nächste verfügbare leere Rasterzelle ein. Das ist vielleicht nicht genau dort, wo Sie es wollen, aber am Ende Ihres Layouts zu sitzen ist wahrscheinlich besser, als in die Mitte zu springen und andere Dinge herumzuschieben.

Welche Positionierungsmethode soll verwendet werden?

Bei der Arbeit mit Grid Layout kommt es letztendlich darauf an, Elemente von einer Zeile zur anderen zu platzieren. Alles andere ist im Wesentlichen ein Helfer dafür.

Entscheiden Sie mit Ihrem Team, ob Sie Linien benennen, Rastervorlagenbereiche verwenden oder eine Kombination verschiedener Layouttypen verwenden möchten. Besonders für kleine Bauteile nutze ich Grid Template Areas gerne. Es gibt jedoch kein Richtig oder Falsch. Finden Sie heraus, was für Sie am besten ist.

Raster in Kombination mit anderen Layout-Mechanismen

Denken Sie daran, dass das Grid-Layout nicht die einzig wahre Layout-Methode ist, um sie alle zu beherrschen, es ist für eine bestimmte Art von Layout konzipiert – nämlich zweidimensionales Layout. Es gibt noch andere Layoutmethoden, und Sie sollten jedes Muster und das, was am besten zu ihm passt, berücksichtigen.

Ich denke, das ist eigentlich ziemlich schwierig für diejenigen von uns, die es gewohnt sind, mit Layout-Methoden herumzuhacken, um sie dazu zu bringen, etwas zu tun, für das sie nicht wirklich entwickelt wurden. Es ist wirklich ein guter Zeitpunkt, einen Schritt zurückzutreten, sich die Layoutmethoden für die Aufgaben anzusehen, für die sie entwickelt wurden, und daran zu denken, sie für diese Aufgaben zu verwenden.

Insbesondere, egal wie oft ich über Grid versus Flexbox schreibe, werde ich gefragt, welches man verwenden sollte . Es gibt viele Muster, bei denen beide Layout-Methoden absolut sinnvoll sind, und es liegt wirklich an Ihnen. Niemand wird Sie anschreien, wenn Sie Flexbox über Grid oder Grid über Flexbox wählen.

In meiner eigenen Arbeit neige ich dazu, Flexbox für Komponenten zu verwenden, bei denen ich möchte, dass die natürliche Größe von Elementen ihr Layout stark kontrolliert und im Wesentlichen die anderen Elemente herumschiebt. Ich verwende auch oft Flexbox, weil ich eine Ausrichtung haben möchte, da die Box-Ausrichtungseigenschaften nur für die Verwendung in Flexbox und Grid verfügbar sind. Ich habe möglicherweise einen Flex-Container mit einem untergeordneten Element, damit ich dieses Kind ausrichten kann.

Ein Zeichen dafür, dass Flexbox vielleicht nicht die Layoutmethode ist, die ich wählen sollte, ist, wenn ich anfange, prozentuale Breiten zu Flex-Elementen hinzuzufügen und flex-grow auf 0 zu setzen. Der Grund, prozentuale Breiten zu Flex-Elementen hinzuzufügen, ist oft, weil ich versuche zu linieren sie in zwei Dimensionen anordnen (Dinge in zwei Dimensionen aneinanderreihen ist genau das, wofür Grid da ist). Probieren Sie jedoch beide aus und finden Sie heraus, was am besten zum Inhalt oder Designmuster passt. Es ist unwahrscheinlich, dass Sie dadurch Probleme verursachen.

Verschachteln von Grid- und Flex-Elementen

Dies kommt auch häufig vor, und es ist absolut kein Problem, ein Grid-Element auch zu einem Grid-Container zu machen und so ein Grid in ein anderes zu verschachteln. Sie können dasselbe mit Flexbox tun, indem Sie ein Flex-Element und einen Flex-Container erstellen. Sie können auch ein Grid-Element und einen Flex-Container oder ein Flex-Element zu einem Grid-Container machen – nichts davon ist ein Problem!

Was wir derzeit nicht tun können, ist, ein Raster in ein anderes zu verschachteln und das verschachtelte Raster die auf dem übergeordneten übergeordneten Element definierten Rasterspuren verwenden zu lassen. Dies wäre sehr nützlich und ist es, was die Subgrid-Vorschläge in Level 2 der Grid-Spezifikation zu lösen hoffen. Ein verschachteltes Raster wird derzeit zu einem neuen Raster, sodass Sie bei der Größenanpassung vorsichtig sein müssen, um sicherzustellen, dass es an allen übergeordneten Spuren ausgerichtet ist.

Sie können viele Raster auf einer Seite haben

In der Umfrage tauchte ein paar Mal ein Kommentar auf, der mich überraschte, es scheint eine Idee zu geben, dass ein Raster auf das Hauptlayout beschränkt werden sollte und dass viele Raster auf einer Seite vielleicht nicht gut wären. Sie können so viele Gitter haben, wie Sie möchten! Verwenden Sie Raster für große und kleine Dinge, wenn es als Raster sinnvoll ist, verwenden Sie Raster.

Fallbacks und Unterstützung älterer Browser

„Die Verwendung von Grid in Verbindung mit @supports hat es uns ermöglicht, die Anzahl der zu erwartenden Layoutvariationen besser zu kontrollieren. Es hat auch sehr gut mit unserem progressiven Erweiterungsansatz funktioniert, was bedeutet, dass wir diejenigen mit modernen Browsern belohnen können, ohne den Zugriff auf Inhalte für diejenigen zu verhindern, die nicht die neueste Technologie verwenden.“

— Joe Lambert arbeitet an rareloop.com

In der Umfrage erwähnten viele Leute ältere Browser, aber es gab eine ziemlich gleiche Aufteilung zwischen denen, die der Meinung waren, dass die Unterstützung älterer Browser schwierig sei, und denen, die es aufgrund von Funktionsabfragen und der Tatsache, dass Grid andere Layoutmethoden außer Kraft setzt, einfach fanden. Ich habe ausführlich über die Mechanismen zum Erstellen dieser Fallbacks in „Using CSS Grid: Supporting Browsers Without Grid“ geschrieben.

Im Allgemeinen sind moderne Browser viel interoperabler als ihre früheren Gegenstücke. Wir sehen in der Regel viel weniger tatsächliche „Browser-Bugs“, und wenn Sie HTML und CSS korrekt verwenden, werden Sie im Allgemeinen feststellen, dass das, was Sie in einem Browser sehen, dasselbe ist wie in einem anderen.

Wir haben natürlich Situationen, in denen ein Browser noch keine Unterstützung für eine bestimmte Spezifikation oder einige Teile einer Spezifikation geliefert hat. Mit Grid hatten wir das große Glück, dass Browser Grid-Layout innerhalb kurzer Zeit auf sehr vollständige und interoperable Weise auslieferten. Daher neigen unsere Überlegungen zum Testen dazu, Browser mit Grid und ohne Grid zu testen. Möglicherweise haben Sie sich auch dafür entschieden, die Version mit dem Präfix -ms in IE10 und IE11 zu verwenden, was dann als dritter Browsertyp getestet werden müsste.

Browser, die modernes Grid-Layout unterstützen (nicht die IE-Version), unterstützen auch Feature Queries. Dies bedeutet, dass Sie die Grid-Unterstützung testen können, bevor Sie sie verwenden.

Testen von Browsern, die Grid nicht unterstützen

Wenn Sie Fallbacks für Browser ohne Unterstützung für das Grid-Layout verwenden (oder die Version mit dem Präfix -ms für IE10 und 11 verwenden), sollten Sie testen, wie diese Browser das Grid-Layout rendern. Dazu benötigen Sie eine Möglichkeit, Ihre Website in einem Beispielbrowser anzuzeigen.

Ich würde nicht den Ansatz wählen, Ihre Funktionsabfrage zu unterbrechen, indem Sie nach Unterstützung für etwas Unsinniges suchen oder das grid falsch schreiben. Dieser Ansatz funktioniert nur, wenn Ihr Stylesheet unglaublich einfach ist und Sie absolut alles, was mit Ihrem Grid-Layout zu tun hat, in die Funktionsabfragen gepackt haben. Dies ist eine sehr anfällige und zeitaufwändige Arbeitsweise, insbesondere wenn Sie Grid ausgiebig verwenden. Darüber hinaus wird einem älteren Browser nicht nur die Unterstützung für das Grid-Layout fehlen, es werden auch andere CSS-Eigenschaften nicht unterstützt. Wenn Sie nach „Best Practice“ suchen, dann stellen Sie sich so auf, dass Sie in einer guten Position sind, um Ihre Arbeit zu testen, ganz oben!

Es gibt ein paar einfache Möglichkeiten, sich mit einer geeigneten Methode zum Testen Ihrer Fallbacks einzurichten. Die einfachste Methode – wenn Sie über eine einigermaßen schnelle Internetverbindung verfügen und nichts dagegen haben, eine Abonnementgebühr zu zahlen – ist die Verwendung eines Dienstes wie BrowserStack. Dies ist ein Dienst, der es ermöglicht, Websites (auch solche, die sich auf Ihrem Computer in der Entwicklung befinden) auf einer ganzen Reihe von echten Browsern anzuzeigen. BrowserStack bietet kostenlose Konten für Open-Source-Projekte.

Um lokal zu testen, würde ich vorschlagen, eine virtuelle Maschine mit installiertem Zielbrowser zu verwenden. Microsoft bietet kostenlose Virtual Machine-Downloads mit Versionen von IE zurück zu IE8 und auch Edge an. Sie können auf der VM auch eine ältere Version eines Browsers ohne jegliche Grid-Unterstützung installieren. Zum Beispiel, indem Sie sich eine Kopie von Firefox 51 oder niedriger besorgen. Stellen Sie nach der Installation Ihres älteren Firefox sicher, dass Sie die automatischen Updates wie hier erklärt deaktivieren, da er sich sonst still und leise aktualisiert!

Sie können Ihre Website dann in IE11 und in einem nicht unterstützenden Firefox auf einer VM testen (eine weitaus weniger anfällige Lösung als das Rechtschreiben von Werten). Die Einrichtung kann etwa eine Stunde dauern, aber dann sind Sie an einem wirklich guten Ort, um Ihre Fallbacks zu testen.

Alte Gewohnheiten verlernen

„Ich habe das Grid-Layout zum ersten Mal verwendet, daher gab es viele Konzepte zu lernen und Eigenschaften zu verstehen. Konzeptionell fand ich es am schwierigsten, all die Dinge zu verlernen, die ich jahrelang getan hatte, wie das Räumen von Schwimmern und das Packen von allem in Container-Divs.“

— Hidde arbeitet an hiddedevries.nl/en

Viele der Teilnehmer an der Umfrage erwähnten die Notwendigkeit, alte Gewohnheiten zu verlernen und dass das Erlernen von Layout für CSS-Neulinge einfacher wäre. Ich neige dazu, zuzustimmen. Wenn Menschen persönlich unterrichtet werden, haben völlige Anfänger wenig Probleme mit der Verwendung von Grid, während erfahrene Entwickler sich bemühen, Grid wieder zu einer eindimensionalen Layoutmethode zu machen. Ich habe Versuche mit „Grid-Systemen“ mit CSS Grid gesehen, die die für ein Float- oder Flex-basiertes Grid erforderlichen Zeilenumbrüche wieder hinzufügen.

Scheuen Sie sich nicht, neue Techniken auszuprobieren . Wenn Sie die Möglichkeit haben, in einigen Browsern zu testen und potenzielle Probleme der Barrierefreiheit im Auge behalten, können Sie wirklich nicht allzu viel falsch machen. Und wenn Sie eine großartige Möglichkeit finden, ein bestimmtes Muster zu erstellen, lassen Sie es alle anderen wissen. Wir sind alle neu in der Verwendung von Grid in der Produktion, daher gibt es sicherlich viel zu entdecken und zu teilen.

„Grid Layout ist die aufregendste CSS-Entwicklung seit Media Queries. Es ist so gut durchdacht, dass es für die Anforderungen realer Entwickler geeignet ist, und es ist eine absolute Freude, es in der Produktion einzusetzen – für Designer und Entwickler gleichermaßen.“

— Trys Mudford arbeitet an trysmudford.com

Zum Abschluss ist hier eine sehr kurze Liste aktueller Best Practices! Wenn Sie Dinge entdeckt haben, die in Ihrer eigenen Situation gut oder nicht gut funktionieren, fügen Sie sie den Kommentaren hinzu.

1. Seien Sie sich der Möglichkeit der Neuordnung von Inhalten sehr bewusst. Vergewissern Sie sich, dass Sie die visuelle Anzeige nicht von der Dokumentenbestellung getrennt haben.
2. Testen Sie mit echten Zielbrowsern mit einer lokalen oder entfernten virtuellen Maschine.
3. Vergessen Sie nicht, dass ältere Layoutmethoden immer noch gültig und nützlich sind. Probieren Sie verschiedene Möglichkeiten aus, um Muster zu erzielen. Lassen Sie sich nicht davon abhalten, Grid verwenden zu müssen.
4. Seien Sie sich bewusst, dass Sie als erfahrener Front-End-Entwickler wahrscheinlich eine ganze Reihe von Vorurteilen darüber haben, wie Layout funktioniert. Versuchen Sie, diese neuen Methoden neu zu betrachten, anstatt sie in alte Muster zurückzudrängen.
5. Probieren Sie die Dinge weiter aus. Wir sind alle neu dabei. Testen Sie Ihre Arbeit und teilen Sie, was Sie entdecken.