CSS-Grid-Layout erklärt: fr, Gap vs. Flexbox

Jahrelang war mein Instinkt, als ein Design ein echtes zweidimensionales Layout forderte, nach einem Stapel verschachtelter Flexcontainer zu greifen Eine Kartenreihe innerhalb einer Spalte innerhalb einer anderen Reihe, jede bog sich, jede kämpfte gegen die anderen um Platz Es funktionierte, in dem Sinne, dass die Pixel irgendwann dort landeten, wo ich wollte, aber es war nie das richtige Werkzeug, und jedes Mal, wenn ich das Design ändern musste, bezahlte ich für die Verknüpfung CSS Grid wurde genau dafür gebaut, und an dem Tag, an dem ich aufhörte, es zu vermeiden, wurde mein Layoutcode kürzer und mein Markup flacher.

Das, was mich zu lange vom Grid fernhielt, war die Syntax. grid-template-columns: repeat(3, minmax(0, 1fr)) Ist keine Phrase, die von den Fingern rollt, und die Beziehung zwischen den von Ihnen deklarierten Titeln und den angezeigten Kästchen ist erst dann offensichtlich, wenn Sie es ein paar Dutzend Mal gesehen haben. Diese Lücke zwischen & quot; Ich weiß, was ich will" und & quot; Ich kenne die Eigenschaft, die es produziert" ist genau das, was ein Generator schließt.

der CSS-Grid-Generator Lassen Sie die Anzahl der Spalten und Zeilen einstellen, eine Größe für jede Achse wählen, die Lücken einwählen und die Ausrichtung anpassen, während vor Ihnen eine Live-Vorschau wieder einfließt Das genaue CSS, das das erzeugt, was Sie sehen, befindet sich in einem kopierfertigen Feld darunter Es verwandelt das Raster von einer Spezifikation, die Sie sich merken müssen, in ein Layout, das Sie durch Klicken erstellen.

tl; dr: CSS Grid ist ein zweidimensionales Layoutmodell, das Zeilen und Spalten gleichzeitig steuert Der Container treibt es durch grid-template-columns, grid-template-rows, gap, und die vier rechtfertigen und ausrichten Eigenschaften Dieser Generator legt alle offen, zeigt eine Live-Vorschau an und sendet sauberes CSS aus, das verwendet wird repeat() und das fr Einheit. weil die Vorschau mit den gleichen Deklarationen rendert, die sie ausgibt, sehen Sie genau das, was Sie einfügen Es läuft vollständig in Ihrem Browser ohne Signup.

Welches Problem löst ein CSS-Grid-Generator?

Die Schwierigkeit bei CSS Grid ist nicht, dass es kompliziert ist Es ist, dass es abstrakt ist Man beschreibt eine Struktur (" drei gleiche Spalten mit etwas Platz zwischen ihnen") und der Browser berechnet die GeometrieDiese Indirektion ist der springende Punkt, denn sie macht Grids ohne eine einzige Medienabfrage responsiv Aber Indirektion ist schwer im Kopf zu halten Man kann nicht anschauen repeat(3, 1fr) Und spüren Sie das Ergebnis sofort so, wie Sie ein gerendertes Raster aus Kästchen betrachten können.

Ein Generator kollabiert die Schreib-Speicher-Aktualisierungsschleife in einer einzigen Interaktion, Sie ändern die Spaltenanzahl und aus drei Kästchen werden vier. Sie schalten eine Spur aus 1fr auf auto Und die Spalte schnappt auf die Breite ihres Inhalts Man hebt den Spalt an und die Kisten atmen Nach zehn Minuten davon hört die Brucheinheit auf, ein Symbol zu sein, das man übersetzt und wird zu einem Ding, zu dem man mit Absicht gelangt Und wenn man mit dem Erkunden fertig ist, bleibt einem kein Hinweis zum Transkribieren, denn das funktionierende CSS ist bereits im Ausgabefeld für Sie geschrieben.

Es gibt noch einen zweiten, leiseren Vorteil, Der Aufbau des Layouts durch Manipulation zwingt das Tool dazu, nur gültiges, wohlgeformtes CSS auszugeben. Sie können keinen Bruch erzeugen grid-template-columns Wert durch Klicken, so dass die Ausgabe immer etwas ist, das Sie mit Sicherheit einfügen können Diese Zuverlässigkeit ist der Grund, warum ich eine Reihe von visuellen CSS-Buildern in der Nähe halte, anstatt jede Regel von Grund auf neu zu schreiben.

Welche Eigenschaften steuert der Gittercontainer?

CSS Grid teilt wie flexbox die Verantwortung zwischen dem Container und seinen Gegenständen auf Der Container definiert die Spuren und die Gesamtstruktur, und dort leben die meisten Layout-Entscheidungen, also ist es der Ort, an dem der Generator fokussiert Hier ist, was jede Container-Eigenschaft tut.

Eigentum	Was es kontrolliert	Gemeinsame Werte
grid-template-columns	Die Anzahl und Größe der Spalten	repeat(3, 1fr), 200px 1fr, auto
grid-template-rows	Die Anzahl und Größe der Zeilen	repeat(2, auto), 100px, 1fr
gap	Zwischengleisig	beliebige Länge, zum Beispiel 16px oder 20px 10px
justify-items	Artikelposition entlang der Zeilenachse	stretch, start, center, end
align-items	Artikelposition entlang der Säulenachse	stretch, start, center, end
justify-content	Verfolgen Sie die Position, wenn das Gitter schmaler als sein Behälter ist, auf der Reihenachse	start, center, space-between
align-content	Spurposition auf der Säulenachse	start, center, space-between

Das mentale Modell, das diesen Stick ausmacht, ist die Unterscheidung zwischen den Tracks und den Items. grid-template-columns und grid-template-rows Definieren Sie die Gleise, die die leeren Fahrspuren des Rasters sind. Die Lücke liegt zwischen diesen Fahrspuren. Die justify-items und align-items Eigenschaften positionieren dann jedes Element innerhalb der Zelle, die es belegt, während justify-content und align-content Positionieren Sie den gesamten Satz von Spuren im Inneren des Containers, wenn es freien Platz gibt Der Generator hält diese beiden Ebenen optisch getrennt, so dass Sie den Unterschied zwischen dem Verschieben eines Artikels innerhalb seiner Zelle und dem Verschieben des gesamten Gitters innerhalb der Seite spüren können.

Was bedeutet die fr-Einheit?

der fr Einheit ist das Stück von CSS Grid, das für das ganze Modell bezahlt, und es lohnt sich, es zu verstehen, anstatt zu kopieren Eins fr Einen Bruchteil des freien Raums im Gitterbehälter darstellt, nachdem eventuelle feste Größen und Lücken abgezogen wurden Wenn Sie schreiben grid-template-columns: 1fr 1fr 1frDie verfügbare Breite des Containers's ist in drei gleiche Teile unterteilt. Schreiben 2fr 1fr 1fr Und die erste Spalte nimmt die Hälfte des Platzes ein, während die anderen beiden den Rest aufteilen Der Browser berechnet diese Brüche bei jeder Größenänderung neu, weshalb ein fraktionsbasiertes Gitter flüssig ohne Haltepunkte ist.

Dies ist das Verhalten, das das Raster für die meisten Layouts den Prozentsätzen überlegen macht. Eine Reihe von 33.33% Spalten ignoriert die Lücke und Überläufe, denn die Prozentsätze plus die Lücken summieren sich zu mehr als der Behälter Fraktionseinheiten werden berechnet, nachdem die Lücken herausgenommen wurden, also repeat(3, 1fr) Mit einer Lücke passt immer Der Generator ist standardmäßig auf 1fr Spalten genau aus diesem Grund, und Sie können beobachten, wie drei gleiche Spalten ihre Proportionen halten, während Sie die Lücke ändern Wenn Sie stattdessen eine Spalte wünschen, die ihren Inhalt umarmt, wechseln Sie sie auf auto, min-content, oder max-content und sehen den Unterschied sofort.

Wie mache ich ein dreispaltiges Layout?

Das ist eines der häufigsten Dinge, die Menschen mit Gitter bauen, und das Rezept ist zwei Zeilen Stellen Sie den Behälter auf display: grid Und geben Sie es grid-template-columns: repeat(3, 1fr). Dadurch entstehen drei gleiche Spalten, die in so viele Zeilen fließen, wie der Inhalt benötigt. Fügen Sie a hinzu gap Und Sie haben ein Kartenlayout.

Im Generator stellen Sie die Spaltenanzahl auf drei ein und lassen die Größe eingeschaltet 1fr, und die Vorschau legt ein Raster gleicher Zellen dar Das Ausgabefeld zeigt:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px;
}

Der Grund, warum es sich lohnt, dies durch Klicken statt durch Tippen zu erstellen, ist, dass echte Layouts nie ganz so sauber sind Sie werden wollen, dass die Seitenleiste eine feste Breite hat und der Inhalt sich biegt, oder dass die erste Zeile höher ist als der Rest Jede dieser Änderungen ist ein Steuerelement im Generator und ein bearbeiteter Wert in der Ausgabe, und Sie sehen den Effekt, bevor Sie ihn auf ein Stylesheet festlegen Wenn Sie sich immer noch zwischen Gitter und einem Flex-basierten Ansatz für einen bestimmten Block entscheiden, wird die Flexbox-generator Das Begleittool ist, und der Vergleich später in diesem Leitfaden erklärt, wann jedes einzelne gewinnt.

Wann sollte ich Grid over Flexbox verwenden?

Dies ist die Frage, die am wichtigsten ist, sobald Sie beide Modelle kennen, und die ehrliche Antwort ist, dass es von der Anzahl der Dimensionen abhängt, die das Layout hat Flexbox ist eindimensional Es ordnet Elemente entlang einer einzelnen Achse, einer Zeile oder einer Spalte an und wickelt sie um, wenn Sie fragen Das Gitter ist zweidimensional Es steuert Zeilen und Spalten zusammen, sodass ein Element sowohl durch seine Zeile als auch durch seine Spalte gleichzeitig positioniert werden kann.

Die praktische Regel, die ich verwende, ist diese Wenn ich eine Reihe von Dingen in einer Zeile, einer Navigationsleiste, einer Reihe von Tags, einer Symbolleiste, einem Stapel von Formularfeldern, das ist Flexbox, auslege, lege ich eine Struktur mit beiden Zeilen und Spalten aus, die aufeinander ausgerichtet werden müssen, eine Seitenhülle mit Kopfzeile, Seitenleiste und Inhaltsbereich oder eine Galerie, in der jede Karte auf einer sauberen Gitterlinie sitzt, das ist Gitter Die beiden sind keine Rivalen; eine Gitterzelle enthält oft einen Flex-Container, und ein Flex-Element ist oft ein kleines Raster. Hier ist die Aufteilung als Tabelle.

Frage	Flexbox	CSS-Gitter
Maßstab	Eine Achse nach der anderen	Zeilen und Spalten zusammen
am besten für	Symbolleisten, nav, Artikelreihen, Wrapping-Tags	Seitenlayouts, Galerien, Armaturenbretter, Formulare
Größenbestimmung angetrieben durch	Inhalt, dann Verbreitung	Die von Ihnen deklarierte Trackvorlage
Ausrichtung	justify-content, align-items	Gleiches Plus justify-items, align-content
Typische Verwendung	In einer Gitterzelle	Der Gesamtseiten- oder Abschnittsrahmen

Der Generator macht dies konkret, weil Sie das gleiche visuelle Ergebnis in beide Richtungen aufbauen und sehen können, welches die sauberere Regel erzeugt Für eine Galerie gleicher Karten, Gitter mit repeat() Zwei Linien ist und flex ist ein Verpackungsbehälter mit Breiten auf jedem Kind Für eine einzelne Reihe, die ihre Gegenstände an den Rändern verteilen muss, biegen mit space-between Der kürzere Weg ist.

Was ist der Unterschied zwischen Lücke, Rechtfertigungsinhalt und Ausrichtungsinhalt?

Diese drei geraten oft in Verwirrung, weil sie sich alle mit dem Weltraum befassen, aber sie agieren auf unterschiedlichen Ebenen Die gap Eigenschaft legt den festen Abstand zwischen den Spuren fest, und es ist die, die Sie in fast jedem Raster verwenden werden Ein einzelner Wert räumt Zeilen und Spalten gleich; zwei Werte setzen die Zeilenlücke und die Spaltenlücke getrennt, in der Ordnungszeile dann Spalte Der Generator lässt Sie die beiden Lücken unabhängig einstellen und gibt die Kurzschrift nur dann aus, wenn sie sich unterscheiden, so dass die Ausgabe so kurz bleibt, wie es die Situation erlaubt.

justify-content und align-content‘im Gegensatz dazu nur dann etwas tun, wenn die grid' s-Spuren kleiner als der Container sind, so dass freier Raum zum Verteilen bleibt Wenn Ihre Spalten alle feste Pixelbreiten haben und sie den Container nicht füllen, wird justify-content: center Wird den gesamten Gleisblock zentrieren und space-between Rändern schieben wird Mit fr Spalten, die die Breite bereits ausfüllen, diese Eigenschaften haben nichts zu verteilen und scheinen nichts zu tun, was eine häufige Quelle der Verwirrung ist Der Generator lässt sie aus der Ausgabe weg, wenn sie auf der Standardeinstellung belassen werden startAlso jede Zeile in der kopierten Regel ist eine, die eine sichtbare Wirkung hat Diese Gewohnheit, nur sinnvolle Erklärungen abzugeben, ist dieselbe, auf die ich mich in der Gradientengenerator und das Kastenschattengenerator(denn eine Regel voller No-op-Zeilen ist eine Regel, der man nicht auf einen Blick vertrauen kann.

Wie hält der Generator die Vorschau ehrlich?

Die Falle bei jedem visuellen Builder ist, dass die Vorschau und der exportierte Code auseinanderdriften können Ein Tool, das seine Vorschau in eine Richtung rendert und seinen Code auf andere Weise generiert, ist schlimmer als nutzlos, denn es lehrt einen ein Layout, das nicht reproduziert wird Dieser Generator vermeidet das, indem er sowohl die Vorschau als auch das kopierte CSS aus einer einzigen Liste von Deklarationen aufbaut Die gleiche Funktion, die entscheidet, welche Eigenschaften ausgegeben werden sollen, ist diejenige, die die Vorschaufelder stylt, also was Sie sehen, ist genau das, was Sie einfügen Es gibt keinen separaten Rendering-Pfad, der anderer Meinung sein könnte.

Diese Designwahl ist der Grund, warum die Ausgabe verwendet wird repeat() Für jede Achse mit mehr als einer Spur wird als nackte Größe eine einzelne Spur ausgestoßen, in die jedoch zwei oder mehr kollabieren repeat(n, size)(was sowohl das ist, was ein Mensch schreiben würde, als auch das, was die Regel lesbar hält, wenn die Zählung wächst. Es ist eine Kleinigkeit, aber es ist der Unterschied zwischen der Ausgabe, die Sie versenden würden, und der Ausgabe, die Sie umschreiben würden.

Aufbau eines responsiven Kartenrasters, Schritt für Schritt

Hier ein Workflow, den ich oft verwende Beginnen Sie mit der Spaltenanzahl bei drei und der Größe auf 1frSie haben jetzt drei gleiche, flüssige Spalten Stellen Sie die Zeilengröße auf auto So wächst jede Reihe, um zu ihrer höchsten Karte zu passen Erhöhen Sie die Lücke zu etwas Bequemem, etwa zwanzig Pixel für Karten Das ist ein vollständiges, responsives Kartenraster, und die Ausgabe ist vier Zeilen.

Um es ohne Medienabfragen selbstständig zu machen, besteht der nächste Schritt in einem echten Projekt darin, es zu tauschen repeat(3, 1fr) auf repeat(auto-fill, minmax(240px, 1fr)), die dem Browser sagt, dass er so viele 240-Pixel-Minimum-Spalten wie möglich unterbringen und strecken soll, um sie zu füllen Der Generator gibt Ihnen den festen Zählstartpunkt; dass eine Bearbeitung daraus ein selbstverpackendes Raster macht Das Verstehen des Ausgangspunkts macht die Bearbeitung offensichtlich, und das ist das ganze Argument dafür, Layout zu lernen, indem man es aufbaut, anstatt es einzufügen. Der umfassendere Fall für die Zusammenstellung einer Reihe von Werkzeugen, die auf diese Weise funktionieren, liegt im Stück auf der Webentwickler-Toolkitund die Arbeitsablaufgewohnheiten dahinter sind in der Entwicklerproduktivitätstools Führung.

Welche Browser unterstützen CSS Grid?

CSS Grid wird in jedem aktuellen Browser unterstützt und das schon seit Jahren Die Eigenschaften, die dieser Generator aussendet, sind Standard und vorbestimmt, so dass die Ausgabe in Chrome, Firefox, Safari und Edge ohne Vendor-Präfixe oder Fallbacks für jeden Browser funktioniert, auf den ein Projekt heute realistisch abzielt Die gap Eigenschaft in Gittercontainern, die das letzte Stück war, das weit verbreitet landete, wird auch heute universell unterstützt Das heißt, das CSS, das Sie kopieren, ist wie geschrieben produktionsreif, was in den Anfangsjahren des Gitters nicht immer der Fall war und ein Grund dafür ist, dass das Modell endlich die Standardwahl ist und nicht eine progressive Verbesserung Für die zugrunde liegenden Regeln ist die Spezifikation CSS Grid Layout Module Level 1 aus dem W3 C die primäre Quelle, und es lohnt sich, es zu lesen, sobald der Generator Ihnen die Intuition gegeben hat, es zu befolgen.

Wenn Sie parallel dazu ein breiteres visuelles Toolkit erstellen, ist die Grenzradiusgenerator und CSS-Klemmgenerator Das Set abrunden, und die Anleitung für die Coding-Tools Sammelt die, nach denen ich am meisten greife.

Häufig gestellte Fragen

Was ist ein CSS-Grid-Generator?

Ein CSS-Grid-Generator ist ein visuelles Tool, das aus den von Ihnen gewählten Einstellungen CSS-Grid-Layout-Code erstellt. Sie wählen Spalten, Zeilen, Spurgrößen, Lücken und Ausrichtung aus und geben das Grid-Template-CSS zusammen mit einer Live-Vorschau des Ergebnisses aus.

Was bedeutet die fr-Einheit in CSS Grid?

Die fr-Einheit stellt einen Bruchteil des freien Raums im Gitterbehälter dar. Gitter-Vorlagen-Spalten: repeat (3, 1fr) erstellt drei Spalten, die jeweils den gleichen Anteil der verfügbaren Breite einnehmen und bei der Größenänderung des Behälters wieder einfließen.

Was ist der Unterschied zwischen CSS Grid und Flexbox?

CSS Grid ist ein zweidimensionales Modell, das Zeilen und Spalten zusammen steuert, ideal für Seitenlayouts und Kartengitter Flexbox ist eindimensional und legt Elemente entlang einer einzigen Achse, ideal für Werkzeugleisten und Zeilen Sie ergänzen sich und werden oft zusammen verwendet.

Wie erstelle ich ein responsives Gitter?

Verwenden Sie fr-Einheiten, damit die Spuren die verfügbare Breite teilen, und kombinieren Sie Wiederholung () mit minmax () und Auto-Fill oder Auto-Fit für Gitter, die sich von selbst umwickeln Dieser Generator gibt Wiederholung () mit fr-Spuren als Ausgangspunkt aus, den Sie verlängern können.

Was ist die Lückeneigenschaft in CSS Grid?

Lücke legt den Abstand zwischen Gitterspuren fest Ein einzelner Wert räumt sowohl Zeilen als auch Spalten gleichmäßig; zwei Werte setzen Zeilenlücke und Spaltenlücke getrennt, in der Reihenfolge Zeilenlücke dann Spaltenlücke.

Ist das generierte Grid-CSS sicher in der Produktion zu verwenden?

Ja. CSS Grid wird in jedem modernen Browser unterstützt und das Tool gibt standardmäßige, nicht fixierte Eigenschaften ab, jegliche Verarbeitung geschieht in Ihrem Browser, es wird also nichts hochgeladen und das Tool funktioniert offline, sobald es geladen ist.

Funktioniert der CSS Grid Generator mobil?

Ja. Das Tool ist voll responsive und funktioniert in jedem modernen Browser auf Telefonen, Tablets und Desktops Das generierte CSS ist identisch, unabhängig davon, auf welchem Gerät Sie es aufbauen.

Ist dieser CSS Grid Generator kostenlos?

Ja. Es ist völlig kostenlos ohne Anmeldung, ohne Wasserzeichen und ohne Nutzungsbeschränkungen. Das von ihm erstellte Grid-CSS steht Ihnen in jedem Projekt zur Verfügung.