CSS-Grid-Layout: Multiplizieren & Erobern - oder wie man mit The Grid tatsächlich entwirft.

Sie können mir auf Twitter folgen, um Tutorials, JavaScript-Tipps usw. zu erhalten.

In diesem Tutorial werden wir ein responsives Layout mit CSS Grid entwerfen. Und hier sehen Sie aus der Vogelperspektive, was Sie von diesem Prozess erwarten können:

Probieren Sie den Flex-Layout-Editor auf dieser Seite aus, um eine gute Vorstellung von der Funktionsweise von Flex zu erhalten.

Die ganze Enchilada. Ich poste gerne Bildinhalte aus der Vogelperspektive im Voraus, um Zeit beim Scrollen zu sparen.

Mit auflösungsunabhängigen Handheld-Geräten wurde es nur noch kompliziert. Sie bewirken, dass sich sogar klassische Regeln für reaktionsschnelles Design ändern, IM.

Also habe ich mich auf die Suche gemacht, das responsive Design zu standardisieren, indem ich alle Möglichkeiten des CSS-Grids durchgespielt habe, als wäre es ein IQ-Test ... oder so ... Und dies ist mein allererstes Tutorial in der Reihe zur Erstellung realer Layouts mit CSS-Grid.

Was ich entdeckt habe, folgt.

Grundlegende Ideen hinter Column Division

Ich habe versucht herauszufinden, was wir tatsächlich aus jeder Säulenteilung gewinnen.

Einspaltige Designs helfen uns, den gesamten Inhalt in eine lange vertikale Liste zu stellen.

Zweispaltige Designs eignen sich für Mini-Bildergalerien / Portfolios (Tablet?).

Baumsäulendesigns sind die ersten ihrer Art, die Rahmen (Ränder) bieten.

Vierspaltige Designs eignen sich gut als Vollbildgalerien.

Ich habe festgestellt, dass Spaltenlayouts mit ungeraden Zahlen (≥ 1) für rahmenbasierte Layouts funktionieren.

Hmm. was ist mit dem 5-Säulen-Design? Denken Sie daran, dass ungerade Spalten häufig zum Erstellen von Rahmen verwendet werden. Weil sie immer zwei zusätzliche Seiten haben.

Fünf-Spalten-Designs können ein ziemlich anständiges @ Medium-artiges Artikelformat ergeben.

Im weiteren Verlauf dieses Tutorials werden wir uns mit dem Erstellen eines Tutorials befassen.

Verwenden Sie fr-Einheiten, um sie so zu erweitern, als würden Sie margin: auto für reguläre Elemente verwenden. Es spielt keine Rolle, ob es sich um 1fr oder 2fr oder n-fr für Ränder handelt, sofern der primäre Inhalt mit Pixeln oder einem großen (r) fr-Wert (10fr, 20fr usw.) angegeben wird:

Der einzige Unterschied besteht darin, dass Medium 1000px für breite Inhalte und 700px für die Hauptartikelspalte verwendet. Aber die Idee ist dieselbe.

Responsive Grid + Going Mobile

Bisher haben wir das Hauptgerüst erstellt. Aber was ist mit Responsive Design?

CSS Grid macht es einfacher als Sie denken!

Merken:

responsive content! = responsive borders.

Die beiden Techniken sollten getrennt behandelt werden. Aber…

Oft ist es - wie in diesem Fall - möglich, das Problem mit reagierenden Inhalten durch Lösen des Problems mit reagierenden Rändern zu lösen.

Wenn Sie mit Ihrer Kreativität mehrere Probleme mit einer Technik lösen können, umso besser.

In diesem Fall können wir dies jedoch einfach lösen, indem wir die äußeren Spuren Ihrer Vorlage auf 0,5 fr (die violetten und blauen) ändern. Außerdem können wir entweder die Bereiche span oder template ändern, um sie in mehrere Spalten zu erweitern und so einen breiten Inhaltsbereich zu schaffen . (Der rosa Bereich darüber.)

Sie können dies über Medienabfragen oder JavaScript tun.

Schließlich… wechseln Sie die Hauptfahrspur (grün) auf 10fr. (Sie können einen ähnlichen Wert verwenden, aber ≥10 funktioniert normalerweise einwandfrei.) Dadurch wird Ihre Hauptfahrspur (grün) automatisch auf die aktuelle Bildschirmauflösung skaliert. Da beide Ränder jetzt 0.5fr sind, wird alles, einschließlich Ränder und Inhalt, richtig skaliert.

Wenn Sie 0.5fr-Ränder vollständig entfernen müssen, können Sie sie auf 0fr setzen. Aber ich persönlich mag es, wenn die mobilen Ansichten einen winzigen Rand haben. Meiner Meinung nach sieht die Inhaltsspur dadurch nur besser aus.

Mobil werden

Sobald alle oben genannten Schritte ausgeführt wurden… Wenn Sie auf ein kleineres Feld gedrückt werden, sollten Sie zu so etwas gelangen (oben).

Lektion hier gelernt?

Versuchen Sie immer, die eleganteste Lösung zu finden. Das heißt, es ist sauber, unkompliziert und löst nach Möglichkeit mehrere Probleme, indem Sie eine oder zwei Änderungen vornehmen. Dies ist nicht so schwierig, wie es sich anhört.

  • Ist das die einzige Lösung? Nein.
  • Ist das eine perfekte Lösung? Nein.
  • Aber es löst das Problem und es funktioniert - genug.

Und das ist gut so. Der in diesem Tutorial gezeigte Ansatz ist:

1. Mehr Belohnung und Spaß
 2. Es ist anständig.
 3. Es lädt Sie ein zu verstehen, wie und warum etwas funktioniert.
 4. Es ist ganz einfach. Erstellt daher einfach zu wartenden Code.
 5. Es wird sauberer Code erzeugt.
 6. Hält dein Gewissen sauber.

Apropos ... sonst ... könnten Sie anfangen, Code zu hacken. (Der Versuch, Probleme durch Ausprobieren zu lösen, oft ohne zu verstehen, wie es tatsächlich funktioniert.) Sie werden die Dinge immer noch auf diese Weise erledigen. Und wahrscheinlich fühlen sich sogar einige Art von Leistung. Aber ... es wird kein Spaß.

Dynamischer Artikel-Editor Gefällt dir Medium?

Natürlich müssen Sie in einem dynamisch generierten Artikeleditor die Spalten mit breitem Inhalt codieren, um algorithmisch arbeiten zu können. Sie wissen nie, welche Kombination aus Text und breitem Inhalt der Autor verwenden möchte.

Sie können beliebig angeordnet werden. Aber ich denke, mit JavaScript und ein paar Stunden Ihrer Zeit ist es möglich, einen dynamisch generierten Artikel-Editor (genau wie bei Medium) zu erstellen, indem Sie die Raster-Vorlagenbereiche wie oben beschrieben austauschen.

Sie können dieses Layout (natürlich) weiterhin für einfache statische Artikel verwenden, wenn Sie sie selbst von Hand entwerfen und vorher wissen, welche Art von Inhalten nach welchen folgt.

Nicht CSS Grid-Alternative zur Gestaltung von Medium-artigen Artikeln?

Die Alternative ohne CSS-Gitter? Na ja ... kein großer Unterschied. Vielleicht komplexer. Es ist immer noch algorithmisch, aber Sie verwenden am Ende normale DIV-Elemente.

Viel Glück damit .

Ich denke, CSS-Raster vereinfacht den Prozess, ohne auf sauberen Code zu verzichten.

Ich habe auf nach meiner Tutorial-Seite für Medium gesucht. Es ist ein Chaos.

Letzte Worte

In erster Linie als JavaScript-Programmierer war ich noch nie gut mit Website- oder Anwendungslayouts vertraut. Besonders nach der reaktionsschnellen Zeit. Aber das CSS-Raster inspiriert mich, diese schwer fassbare Aufgabe zu überdenken.

Ich musste mir nur schrittweise Anweisungen und Beispiele für ein reales Layout mit CSS-Raster anzeigen lassen, damit ich meine eigenen erstellen konnte.

Aber… ich konnte kein einziges Online-Tutorial finden, das dies demonstrierte. Also habe ich beschlossen, meine eigene zu schreiben und sie mit Ihnen zu teilen!

Es geht darum, Dinge zu verstehen, die auf ihrem beabsichtigten Zweck beruhen.

Wenn Sie Zeit haben, um sich mit dem CSS-Raster vertraut zu machen, ist das wie Schummeln.

Es gibt mir fast das Gefühl, dass ich das Layoutdesign besser beherrsche als ich es eigentlich bin.

Ich muss sagen, dass ich an dieser Stelle süchtig nach CSS Grid bin und es von nun an für die Erstellung aller meiner zukünftigen Layouts verwenden werde.

Ich hoffe, diese einfachen Ideen haben Ihnen geholfen, sich mit CSS Grid vertraut zu machen.

Für mehr wöchentliches Freemium…

Sie können mir auf Twitter für ein Wochenende als PDF-Werbegeschenk folgen.

Folgen Sie mir auf Instagram, um einen schnellen Treffer mit JavaScript zu erzielen.

Du kannst mir auf Facebook folgen, um kostenlose Codierungssachen zu erhalten.

Zeitlich befristetes Angebot

Die Diagramme in diesem Tutorial wurden direkt vom Manuskript beeinflusst!

CSS Visual Dictionary 28% RABATT für mittelgroße Leser.

28% RABATT

Nur für mittlere Leser:

CSS Visual Dictionary

== nimm eine Kopie ==

Enthält alle CSS-Eigenschaften.