Advertisement
  1. Web Design
  2. HTML & CSS

Eine einfache Mixin-Alternative zu Standard-CSS-Grids

Scroll to top
Read Time: 23 min

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

CSS-Grid-Systeme haben sich in den letzten Jahren zu einer sehr beliebten Methode entwickelt, um schnell Layout-Gerüste im Webdesign zu erstellen.

Sie können eine fantastische zeitsparende Ressource sein, da talentierte Programmierer über intelligent gestaltete Systeme verfügen, die eine breite Palette möglicher Layouts abdecken, die Designer möglicherweise erstellen müssen. Dies ist jedoch nicht die einzige Möglichkeit, sich rasterbasierten Weblayouts zu nähern, und heute werden wir eine Alternative untersuchen.


Wie CSS Grid-Systeme funktionieren

Ein Rastersystem besteht normalerweise aus einer bestimmten Anzahl von Spalten (normalerweise zwölf oder sechzehn) und der Möglichkeit, ein Element (normalerweise ein div mit einer angewendeten Klasse) auf eine Breite von X dieser Spalten zu setzen.

Ein Inhaltsbereich kann beispielsweise auf neun von zwölf Spalten festgelegt sein, während eine Seitenleiste daneben auf drei oder zwölf Spalten festgelegt ist. Layouts enthalten oft auch einen äußeren Container mit fester Breite, darin enthaltene Zeilencontainer, die Spalten umschließen und Bundstege zwischen den Spalten festlegen.

Werfen wir einen kurzen Blick darauf, wie das klassische Website-Layout "Kopfzeile, Inhalt, Seitenleiste, Fußzeile" mit den für CSS-Grids üblichen Techniken erstellt werden könnte:

examplecssgridexamplecssgridexamplecssgrid

Die Verwendung von CSS-Rastersystemen zum Erstellen solcher Layouts kann sehr schnell und einfach sein. Obwohl das Angebot viel Wert ist, gibt es auch eine Reihe von Nachteilen bei der Verwendung eines solchen Systems. Diese Nachteile bedeuten nicht, dass CSS-Grid-Systeme "schlecht" sind, nur dass Sie sich wie bei jedem Tool mit den Vor- und Nachteilen vertraut machen sollten, um richtig zu bestimmen, ob es für Ihr spezielles Projekt geeignet ist.


Die Nachteile von CSS-Grids

Obwohl alle CSS-Grid-Systeme unterschiedlich sind, gehören zu den bemerkenswertesten Nachteilen, die bei ihnen häufig vorkommen:

  • Potenziell hohe Menge an ungenutztem Code Eine vollständige Bibliothek von Grid-Klassen umfasst in der Regel 200 bis 700 Codezeilen (nicht minimiert), doch in einem relativ einfachen Design wird ein Großteil dieses Codes möglicherweise nie verwendet.
  • Einschränkungen beim Layout Da Raster vorberechnet sind, neigen sie dazu, festgelegte Breiten zu haben, die schwer zu ändern sind, z.B. für Container, Spaltenbreiten, Rinnenbreiten. Das Design beschränkt sich dann auf das Arbeiten mit diesen Breiten.
  • Feste Pixel anstelle von em / rem oder prozentualen Layouts Rasterbreiten und/oder Medienabfragen basieren oft auf Pixelwerten, was die Verwendung flexiblerer und skalierbarer em/rem- oder Prozentwerte für das Design verhindert.Hinweis: Für Informationen zu den Vorteilen von em / rem vs. px-basiertem Design lesen Sie bitte Das "Erm.." aus Ems herausnehmen
  • Anzahl der Gesamtspalten einstellen Vorberechnete Raster verwenden in der Regel entweder zwölf oder sechzehn Spalten, was bedeutet, dass Sie kein Glück haben, wenn Sie eine andere Anzahl von Gesamtspalten wünschen.
  • Nicht semantisches Markup Die Verwendung vorberechneter Rasterklassen erfordert die Platzierung zahlreicher nicht-semantischer Klassennamen in einem Dokument, wie beispielsweise "row", "col" und so weiter.
  • Einschränkungen beim Verschachteln Rastersysteme können oft nur ein- oder zweimal ineinander verschachtelte Spalten haben, was die Komplexität und Flexibilität der Layouterstellung einschränkt.

Wenn es darauf ankommt, verwenden Designer CSS-Rastersysteme, um die Layout-Generierung schneller und einfacher zu machen. Die Frage ist also:

Lässt sich die Layouterstellung genauso schnell und einfach gestalten und gleichzeitig die oben genannten Einschränkungen überwinden?

Dank des Aufkommens von CSS-Präprozessoren wie LESS und SASS / SCSS, die mit Variablen arbeiten, Berechnungen durchführen und CSS nach Bedarf über Mixins ausgeben können, lautet die Antwort für viele Anwendungsfälle:

Ja, das kann es absolut!


Eine alternative, vorverarbeitete Lösung

Der Schlüssel zu der alternativen Lösung, die wir behandeln werden, sind "Mixins", die sowohl in LESS als auch in SASS / SCSS erhältlich sind. Kurz gesagt, Mixins sind wiederverwendbare Regelpakete, die unterschiedliche CSS ausgeben können, je nachdem, welche Informationen ihnen zur Verarbeitung übergeben werden.

Von nun an gehen wir davon aus, dass Sie ein grundlegendes Verständnis davon haben, was Präprozessoren sind und wie sie mit Mixins und Variablen arbeiten. Wenn Sie also mit diesen Konzepten noch nicht vertraut sind, empfehle ich Ihnen, zunächst die Informationen unter http://lesscss.org/ zu lesen

Bevor wir beginnen, möchte ich auch darauf hinweisen, dass es bereits einige vorhandene Bibliotheken von LESS- und SASS-Mixins gibt, die daran arbeiten, die Einschränkungen vorberechneter CSS-Grids zu beheben, wie zum Beispiel:

Wir werden jedoch einen Ansatz verfolgen, der sich in vielerlei Hinsicht von diesen Bibliotheken unterscheidet. Auch hier gibt es keine strikt richtige oder falsche Herangehensweise. Es ist eine Frage des Verständnisses der Vor- und Nachteile bei der Entscheidung, welche Vorgehensweise für Ihr Projekt verwendet werden soll.

Hinweis: Ich werde diese Mixins in LESS schreiben, weil es etwas schwieriger sein kann, LESS dazu zu bringen, anspruchsvolle Operationen auszuführen als SASS, so dass es für SASS-Benutzer einfacher ist, LESS-Mixins anzupassen als umgekehrt.

Sie können Ihre eigene bevorzugte Methode zum Kompilieren Ihrer Präprozessordateien verwenden, ich werde jedoch ein grundlegendes "LESScompiler"-Paket hinzufügen, das auf Node.js/NPM und Grunt ausgeführt wird, das Sie verwenden können. Anweisungen sind in der Datei readme.md enthalten.


Das klassische Layout angehen

Oben haben wir uns angesehen, wie das allgegenwärtige Layout "Kopfzeile, Inhalt, Seitenleiste, Fußzeile" mit einem typischen Satz von CSS-Rasterklassen erstellt werden kann, wobei etwa 200 bis 700 Codezeilen verwendet werden. Schauen wir uns nun an, wie wir dasselbe Layout mit LESS-Mixins erstellen können, die Menge an erforderlichem CSS auf ein absolutes Minimum beschränken, keine Pixelwerte verwenden und semantisches Markup beibehalten.

Schauen wir uns zuerst unseren HTML-Code an:

Beachten Sie, dass in dieser Phase keine einzige Klasse verwendet wird, sondern nur reine semantische HTML5-Tags. Auf diesen HTML-Code werden wir den folgenden WENIGER Code anwenden, wobei Mixins und Variablen verwendet werden, die in Kürze erklärt werden:

...was die folgenden 35 CSS-Zeilen generiert:

...und das Ergebnis, das wir im Browser bei einer Bildschirmauflösung von 1920 x 1080 sehen werden, ist:

classiclayoutclassiclayoutclassiclayout

Beachten Sie, dass dieses Layout bereits von Anfang an über eine grundlegende Reaktionsfähigkeit verfügt, da wir nicht mit festen Pixelbreiteneinstellungen arbeiten. Das gleiche Layout sieht bei einer Breite von 1024px so aus:

classiclayout1024classiclayout1024classiclayout1024

Und so bei 768px Breite:

classiclayout768classiclayout768classiclayout768

Wir werden die Reaktionsfähigkeit bei kleineren Größen später behandeln, aber zuerst sehen wir uns die WENIGER Mixins und Variablen an, die zum Erstellen des obigen Layouts verwendet wurden.

Lassen Sie uns die einzelnen Elemente von dem, was oben vor sich geht, durchgehen.

Einfache Konvertierung von px zu em / rem

Die Variablen im oberen Abschnitt des Codes ermöglichen es uns, einfach skalierbare em- oder rem-Werte anstelle von px-Werten im gesamten Stylesheet auszugeben. Die Verwendung dieser Variablen ermöglicht es uns jedoch auch, unser Design zunächst in Pixeln zu konzipieren, da es eine einfachere mentale Übung ist, sich vorzustellen, wie 500 Pixel Platz aussehen als 31,25 Rem.

In unserem Basisdesign möchten wir beispielsweise nicht, dass die Kopf-, Haupt- oder Fußzeilenelemente zu irgendeinem Zeitpunkt breiter als 1200 Pixel sind. Aber anstatt 1200px als max-width anzugeben, konvertieren wir diesen 1200-Wert in rems, indem wir ihn wie folgt mit der @toRems-Variablen multiplizieren:

Dies gibt einen Wert von 75rem aus, was bedeutet, dass das gesamte Site-Layout proportional skaliert wird, wenn ein Browser oder Benutzer die Standardschriftgröße auf einen anderen als den gängigsten Standardwert von 16px eingestellt hat.

Dasselbe kann auch zum Generieren von em-Werten durchgeführt werden, indem stattdessen die @toEms-Variable verwendet wird.

.Row() mixin

Das erste verwendete Mixin ist das .Row() Mixin.

Anstatt ".container"-Klassen zu verwenden, rufen wir dieses Mixin überall dort auf, wo ein Element mit einer maximalen Breite zentriert werden soll. Bei unserem klassischen Layout nennen wir dies Mixin auf den header, main und footer-Enelementen.

Das Mixin setzt eine max-width zusammen mit einer width von 100%. Dies gibt uns eine grundlegende Reaktionsfähigkeit, indem das Element automatisch angepasst wird, um den verfügbaren Platz auszufüllen, wenn das Ansichtsfenster kleiner als der Wert für die max-width ist.

Es setzt auch den margin auf 0 auto, damit das Element automatisch zentriert wird.

Schließlich fügt es die Pseudoelemente :before und :after hinzu und verwendet sie zum automatischen Löschen am Ende des Elements. Dies ist erforderlich, damit beim Hinzufügen von Spalten innerhalb des Elements deren Float-Einstellungen gelöscht werden.

Das Mixin akzeptiert einen Parameter, einen @width-Wert:

Dieser Wert wird dann an die max-width-Eigenschaft übergeben:

Wenn dem Mixin ein width-Parameter übergeben wird, z.B. .Row( 40rem ), wird dieser Wert auf die Eigenschaft max-width angewendet.

Wenn das Mixin jedoch aufgerufen wird, ohne einen Parameter zu übergeben, z. B. .Row, wird stattdessen ein Standardwert verwendet. Dieser Standardwert wird in der Variablen @default-width gespeichert, die dort festgelegt ist, wo Sie Folgendes sehen:

Wie Sie jetzt aus dem, was wir oben bezüglich der @toRems-Variablen besprochen haben, verstehen werden, bedeutet dies, dass die maximale Standardbreite jedes Elements, für das dieses Mixin verwendet wird, 1200 Pixel beträgt, umgewandelt in rem-Werte.

Durch die Verwendung dieses Mixins können Sie jetzt jedes Element so einstellen, dass es auf Ihre standardmäßige max-width oder auf eine andere max-width, die Sie anwenden möchten, zentriert wird. Dies bedeutet, dass Sie die Breite der gesamten Site ändern können, indem Sie einfach den Wert der Variablen @default-width ändern. Beispielsweise:

...ändert das Grundlayout zu:

classiclayout800classiclayout800classiclayout800

Oder Sie können die Breite eines einzelnen Elements gleichzeitig ändern, indem Sie einen Breitenparameter durch das Mixin übergeben.

Wenden Sie das Mixin beispielsweise wie folgt an:

...würde dir geben:

classiclayout_differentwidthsclassiclayout_differentwidthsclassiclayout_differentwidths

.Cols() mixin

Da wir keine festen Pixelbreiten verwenden und unser Layout vollständig flexibel bleiben soll, basieren alle unsere Spaltenbreiten auf Prozentsätzen. Wir verwenden das .Cols()-Mixin, um diese Prozentsätze zu berechnen.

Basierend auf den Werten, die Sie an das Mixin übergeben, wird eine einfache Formel verwendet, um den prozentualen Breitenwert zu bestimmen, der auf das Element angewendet werden soll. Der float-Wert des Elements wird auch auf left gesetzt, damit die Spalten nebeneinander stehen (Sie erinnern sich, dass wir Floats, die auf die Spalten angewendet wurden, automatisch über das .Row()-Mixin löschen).

Mit dem .Cols()-Mixin können Sie festlegen, wie viele Spalten Ihr Element haben soll, genau wie bei einem normalen CSS-Rastersystem. Dies geschieht, indem ein @colspan-Parameter durch das Mixin übergeben wird oder indem der Standardwert für das Mixin über die @default-colspan-Variable festgelegt wird.

Im Gegensatz zu den meisten CSS-Rastersystemen haben Sie jedoch auch die vollständige Kontrolle darüber, zu wie vielen Gesamtspalten dieser Wert relativ ist, anstatt bei Gesamtspalten von entweder 12 oder 16 festzuhalten. Die Gesamtspalten können durch Übergabe eines @total_cols-Parameters durch die through mixin, oder indem Sie den Standardwert des Mixins über die Variable @default-total_cols festlegen.

In unserem früheren Beispiel, wie unser "klassisches" Layout mit einem typischen CSS-Raster erstellt würde, wurde der Inhaltsbereich auf 9 von 12 Spalten (dh drei Viertel) gesetzt, während die Seitenleiste 3 von 12 Spalten (dh ein Viertel). Für die einfachen Zwecke dieses Layouts benötigen wir jedoch nicht wirklich alle zwölf Spalten.

Wir versuchen lediglich, unseren Inhaltsbereich auf 3/4 Breite und die Seitenleiste auf 1/4 der Breite zu setzen. Das Layout in Zwölftel zu unterteilen wäre also übertrieben, wenn wir nur Viertel brauchen.

Da wir wissen, dass wir dieses Layout nur in Viertel aufteilen müssen, können wir den Wert unserer @default-total_cols-Variable auf 4 setzen:

Wenn wir dann das Mixin wie in unserem "klassischen" Layout-Beispiel verwenden, geht das Mixin davon aus, dass Ihre Spalten aus einer möglichen Gesamtspalte von vier bestehen sollen. Um unser Artikelelement auf eine Dreiviertelbreite zu setzen, müssen wir nur Folgendes tun:

Um unsere Beiseite / Seitenleiste dann auf eine Viertelbreite zu setzen, verwenden wir einfach:

Wenn wir uns jedoch entscheiden, eine völlig andere Anzahl von Gesamtspalten zu verwenden, können wir dies einfach tun, indem wir unterschiedliche Werte durch das .Cols()-Mixin übergeben.

Dadurch können wir die Breiten der Artikel und Seitenelemente ganz einfach beliebig ändern, zum Beispiel:

Was uns gibt:

classiclayout_colschangedclassiclayout_colschangedclassiclayout_colschanged

Dies wiederum macht es sehr einfach, zusätzliche Spalten hinzuzufügen, zum Beispiel, wenn wir in unserem HTML vor dem article-Element ein zweites aside-Element hinzufügen und dann unser LESS in Folgendes ändern:

...wir bekommen:

classiclayout_extracolclassiclayout_extracolclassiclayout_extracol

Füllen und Ränder hinzufügen

Sobald Sie mit dem Hinzufügen von Inhalten in Ihren Containern beginnen, möchten Sie natürlich den Abstand um ihn herum steuern können. Wenn wir jetzt Inhalte hinzufügen, werden sie bündig an den Rändern anliegen:

classiclayout_contentflushclassiclayout_contentflushclassiclayout_contentflush

Es gibt mehrere Möglichkeiten, wie Sie Ihren Abstand steuern können, und welche am besten zu verwenden ist, hängt davon ab, was Sie mit dem spezifischen Design erreichen möchten, das Sie erstellen.

Polsterung hinzufügen

Der einfachste Weg, den Abstand zu kontrollieren, ist das einfache Hinzufügen von Padding-Parametern zu den Mixins .Row() und .Cols().

Unser Mixin-Code wird wie folgt angepasst:

Jetzt können wir unseren Kopf-, Artikel-, Seiten- und Fußzeilenelementen Auffüllen hinzufügen.

Beachten Sie, dass wir auch die standardmäßige box-sizing-Eigenschaft im gesamten Design auf border-box setzen, damit das Auffüllen nicht in die Browserberechnung der Breite von Elementen einbezogen wird:

Dies gibt uns jetzt Platz für jeden unserer Inhalte:

classiclayout_paddedclassiclayout_paddedclassiclayout_padded

Wrapper-Ränder hinzufügen

Manchmal befindet sich der Abstand, den Sie Ihrem Design hinzufügen möchten, auf der Außenseite eines Elements, nicht auf der Innenseite, z. B. wenn der Hintergrund einer Site zwischen den Elementen durchscheinen soll. Um dies zu ermöglichen, werden wir einige weitere Ergänzungen zu den Mixins .Row() und .Cols() vornehmen.

Lassen Sie uns zunächst den Abstand über und unter Elementen hinzufügen, auf die unser .Row()-Mixin angewendet wird. Dies geschieht ganz einfach, indem Sie den Wert unserer vorhandenen margin-Eigenschaft durch eine Variable ersetzen, die als Parameter durch das Mixin gesendet werden kann.

Beachten Sie, dass der Standardwert für den Zeilenrand immer noch auf 0 auto gesetzt ist. Wenn also kein Parameter übergeben wird, zentriert das Mixin das Element immer noch automatisch.

Wenn wir jedoch einen @margin-Wert durch das Mixin übergeben:

...können wir vertikale Abstände wie folgt hinzufügen:

classiclayout_vertspacerowclassiclayout_vertspacerowclassiclayout_vertspacerow

Wenn Sie außerdem entscheiden, dass Ihr Element nicht mehr zentriert werden soll, können Sie auch einen @margin-Wert von 0 auto 0 0 übergeben, um ein Element links auszurichten, oder 0 0 0 automatisch, um ein Element rechts auszurichten.

Hinzufügen von Spaltenstegen

Ein weiteres gemeinsames Merkmal von CSS-Rastersystemen ist die Möglichkeit, Zwischenräume zwischen Spalten hinzuzufügen, d. h. Ränder, die zwischen den einzelnen Spalten gelten, jedoch nicht außerhalb der äußersten Spalten.

Auch hier können wir diese Funktionalität mit einigen Ergänzungen zum Cols()-Mixin hinzufügen:

Das Mixin macht jetzt zwei zusätzliche Dinge. Zunächst wird über den neuen @gutter-Parameter nach einem Wert gesucht und dieser in die Breitenberechnung für die Spalte einbezogen.

Hinweis: Der @gutter-Wert sollte eine Zahl sein, die als Prozentwert verwendet werden soll, z. 2 für eine 2% Dachrinne.

Zweitens überprüft es die neue @edge-Variable, um zu sehen, ob sie auf true oder false gesetzt ist. Wenn @edge auf false gesetzt ist, wird der Wert des @gutter-Parameters als Prozentsatz zum rechten Rand hinzugefügt. Wenn @edge auf true gesetzt ist, wird der rechte Rand auf 0 gesetzt. Dadurch können Sie angeben, wo sich eine Spalte am Rand Ihres Layouts befindet und daher kein Bundsteg angewendet werden soll.

Um die Auswirkung dieser Änderung auf das Mixin deutlicher zu zeigen, habe ich unserem HTML zwei zusätzliche article-Elemente hinzugefügt. Der LESS für die article- und aside-Elemente wurde wie folgt angepasst:

Was uns jetzt gibt:

classiclayout_guttersclassiclayout_guttersclassiclayout_gutters

Um die Kontrolle über die vertikalen Ränder von Spalten zuzulassen, müssen Sie wieder nur einige zusätzliche Parameter in das Mixin aufnehmen und es anpassen:

Einstellungen für den oberen und unteren Rand können jetzt auch bei der Verwendung des .Cols()-Mixins berücksichtigt werden, zum Beispiel:

Dies würde den Spalten wie folgt vertikale Ränder hinzufügen:

classiclayout_vertmargincolsclassiclayout_vertmargincolsclassiclayout_vertmargincols

Verschachtelung und Erhöhung der Layoutkomplexität

Wir fügen unserem Beispiellayout nun eine weitere Komplexitätsebene hinzu, indem wir die Anzahl der article-Elemente auf sechs erhöhen und sie in einem section-Element-Wrapper platzieren und dann unsere Mixins anwenden, um das folgende Layout zu erstellen:

classiclayout_nestedclassiclayout_nestedclassiclayout_nested

Um dieses Layout zu erreichen, wird der HTML-Code jetzt geändert in:

Der LESS-Code, den wir zur Steuerung des Layouts verwenden, wurde jetzt geändert in:

Um zusammenzufassen, was im obigen LESS-Code enthalten ist:

Das section-Element ist so eingestellt, dass es drei Spalten der standardmäßig vier Gesamtspalten belegt. Daneben befindet sich das aside-Element, das immer noch auf eine Viererspalte gesetzt ist.

Das section-Element fungiert als Wrapper für die article-Elemente. Da die article-Elemente jetzt verschachtelt sind, können auf sie alle neuen Spaltenbreiten angewendet werden, und sie nehmen jeweils einen Prozentsatz des Inneren des übergeordneten Elements ein. Daher wird jede Spalte auf eine von drei Spalten mit einem Bundsteg von 2% festgelegt.

Jedes dritte article-Element wird mithilfe des Selektors :nth-of-type(3n) identifiziert und so eingestellt, dass es keinen rechten Rand / Bund hat.


Anpassung an kleinere Displays

Zuvor in diesem Artikel haben wir gezeigt, wie mit diesem Ansatz von Anfang an grundlegende Reaktionsfähigkeit hinzugefügt wird. Eine andere Sache, die wir anders als viele andere machen werden, ist unser Ansatz, Haltepunkte hinzuzufügen und das Verhalten an diesen Punkten zu bestimmen.

Anstatt zu versuchen, die genauen Bildschirmgrößen verschiedener Geräte zu identifizieren und gezielt einzusetzen, möchten wir unser Layout bei jeder einzelnen Auflösung funktionieren lassen. Auf diese Weise werden wir geräteunabhängig.

Um dies zu erreichen, werden wir einfach Breakpoints in beliebiger Breite einführen, wenn das Layout zu gequetscht wird, um bequem lesbar zu sein, und die Spalten ändern, um den Inhalt wieder präsentierbar zu machen.

Bei diesem Layout fügen wir die folgenden Medienabfragen hinzu:

Wie oben erwähnt, werden Breakpoints von Fall zu Fall für jedes Design festgelegt.

Dazu verwende ich das Firefox-Plugin Firesizer, um mir anzuzeigen, wie breit mein Browserfenster in Pixeln ist. Ich verkleinere die Browserbreite nach und nach und wenn ich einen Punkt erkenne, der zu eng ist, notiere ich mir die Anzeigebreite.

Leider lässt LESS keine Operationen mit den Werten zu, die wir für unsere Medienabfragen verwenden, daher sind wir nicht in der Lage, etwas wie @media (max-width: 1000 * @toRems) auszuführen.

Da die Variable @toRems hier nicht zum Konvertieren des Pixelwerts verwendet werden kann, konvertiere ich stattdessen die Breite mit http://pxtoem.com/ in ems.

Nachdem wir die identifizierte Breite in rem umgewandelt haben, fügen wir einen Breakpoint an dieser Breite hinzu und wenden ein neues .Cols()-Mixin auf das Element an. Dies kann den colspan-Wert und / oder den totalcols-Wert ändern, je nachdem, was bei dieser Breite am besten aussieht.

Bei Bedarf umschließen wir auch jeden nth-of-type()-Selektor in eine auf der min-width basierende Medienabfrage. Dadurch wird sichergestellt, dass bei kleiner werdendem Layout und abnehmender Spaltenanzahl die Randspalte korrekt als jede zweite statt als jede dritte erkannt wird.

Zum Beispiel ändere ich am ersten Breakpoint von 68rem die Artikel von jeweils einer von drei Spalten in eine von zwei Spalten.

Ich füge auch eine min-width: 68rem-Medienabfrage um den Selektor :nth-of-type(3n) hinzu, sodass sie nur bei Größen größer als 68rem gilt.

Dann füge ich unserer Medienabfrage für Größen unter 68rem einen neuen :nth-of-type(2n)-Selektor hinzu, der jeden zweiten Beitrag als keinen Bund benötigt.

Diese Änderungen erstellen das folgende Layout, wenn das Ansichtsfenster kleiner als 68rem ist:

classiclayout_2colsclassiclayout_2colsclassiclayout_2cols

Beim nächsten Breakpoint von 53rem reduziere ich die Anzahl der Artikelspalten wieder auf eine einzige Spalte, also @colspan 1 von @total_cols 1, wobei jeder Artikel übereinander gestapelt wird.

Wieder füge ich eine min-width: 53rem-Medienabfrage um den oben hinzugefügten Selektor nth-of-type(2n) hinzu, sodass er nicht mehr gilt, wenn unsere Artikel auf eine von einer Spalte reduziert werden.

Ich ändere auch die section-Breite von 3/4 Spalten auf 2/3, und ich ändere die aside-Breite von 1/4 Breite auf 1/3. Dies lässt etwas mehr Platz für die Seitenleiste, damit sie bei dieser Breite nicht zu gequetscht wird.

Wenn das Design nun auf weniger als 53rem in der Breite reduziert wird, sieht es so aus:

classiclayout_singlearticlecolclassiclayout_singlearticlecolclassiclayout_singlearticlecol

Schließlich, bei 36rem, wenn das Layout zu eng wird, um überhaupt mehrere Spalten unterzubringen, ändere ich sowohl die section- als auch die aside-Elemente nach unten auf 1 / 1-Spalte, wodurch die aside wand unter das section-Element gedrückt wird.

Das Layout sieht nun bei jeder Breite von weniger als 36rem so aus:

classiclayout_collapsedclassiclayout_collapsedclassiclayout_collapsed

Einpacken

Wir haben oben viele Details zur Funktionsweise der Mixins .Row() und .Cols() beschrieben, um Ihnen ein umfassendes Verständnis zu vermitteln, damit Sie sie bei Bedarf noch weiter hinzufügen oder ändern können. Das Endergebnis von allem, was wir behandelt haben, ist jedoch ein supereinfaches und benutzerfreundliches Layoutsystem.

Durch die Verwendung von nur zwei Mixins können Sie jetzt hochkomplexe, aber flexible und skalierbare Layouts praktisch ohne Einschränkungen erstellen, nur das benötigte CSS ausgeben und hochsemantisches Markup verwenden.

Sie können für Ihr Raster eine beliebige Anzahl von Gesamtspalten, eine beliebige Breite einzelner Spalten und eine beliebige Breite von Bundstegen verwenden. Außerdem sind Ihre Raster unendlich verschachtelbar.

Laden Sie Ihre eigene Kopie der Mixins herunter, die für dieses Tutorial geschrieben wurden, und probieren Sie sie für Ihr nächstes Projektlayout aus!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.