Kategorie: Entwicklung
CSS-Grid-Generator
Erstellen Sie ein grid-template-Layout und kopieren Sie das CSS
Legen Sie die Anzahl der Spalten und Zeilen sowie den Abstand an einer Live-Grid-Vorschau fest, wobei Sie die Spalten optional auf eine minmax()-Spur umstellen können, damit sie vor dem Umbruch schrumpfen, und kopieren Sie anschließend die fertige Container-Deklaration. Nichts davon verlässt Ihren Browser.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;
}Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
grid-template-columns: repeat(n, 1fr) erzeugt gleich breite Spalten, die nie unter ihren Inhalt schrumpfen, wodurch sie auf schmalen Bildschirmen überlaufen. Der Wechsel zu minmax(min, 1fr) erlaubt jeder Spalte, bis zu einer Untergrenze zu schrumpfen, bevor das Grid aufgibt und umbricht – der Unterschied zwischen einem Layout, das auf dem Handy noch lesbar ist, und einem, das es nicht ist. Dieses Tool baut beide Formen aus denselben Optionen auf, sodass der Unterschied an einem echten Grid sichtbar wird, nicht nur in der Deklaration.
So funktioniert es
- Legen Sie die Anzahl der Spalten und Zeilen fest.
- Legen Sie den Abstand zwischen den Zellen fest.
- Aktivieren Sie bei Bedarf minmax()-Spalten, damit sie auf schmalen Bildschirmen schrumpfen, und kopieren Sie das CSS.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Ist die Vorschau ein echtes CSS-Grid?
- Ja. Die nummerierten Zellen werden mit genau den grid-template-columns- und grid-template-rows-Werten angeordnet, die Sie gerade festlegen.
- Was ändert minmax() eigentlich?
- Ohne minmax() bleiben repeat(n, 1fr)-Spalten gleich breit, schrumpfen aber nie unter ihren Inhalt, sodass ein schmaler Container einfach überläuft. minmax(min, 1fr) lässt jede Spalte bis zur Mindestbreite schrumpfen, bevor der Browser nach einem anderen Weg sucht, sie unterzubringen.
- Wird etwas hochgeladen?
- Nein. Die Deklaration ist Text, der aus den von Ihnen gesetzten Optionen aufgebaut wird, und das Vorschau-Grid wird lokal auf der Seite gerendert.