Responsive CSS Grid

CSS Grid macht es nicht nur einfacher deine Webseite zu gestalten und den Inhalt auszurichten, sondern du kannst das gesamte Grid mit einer Zeile Code responsiv machen.


 

In diesem Beitrag erkläre ich dir was jeder Teil der folgenden Zeile Code macht und wie dadurch dein Grid responsiv wird.

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));


Falls du unseren vorherigen Beitrag über die Basics von CSS Grid noch nicht gesehen hast, hier ist ein Link!

...

CSS Grid Basics - Blog

Um eine Website zu gestalten, haben Web-Entwickler früher Tabellen, Positioning oder Inline-Block verwendet. Das funktioniert zwar, ist aber keine saubere Lösung. Diese Methoden machen es schwerer, die Seite auch für andere Bildschirmgrößen anzupasse


Wenn wir die Spalten in unserem Grid definieren wollen machen wir das gewöhnlich so:

Erstellt ein Grid mit 4 Spalten, alle 100px breit.

grid-template-columns: 100px 100px 100px 100px;


Dies kann jedoch nervig werden wenn unser grid viel größer wird. Aus diesem Grund gibt es die Funktion repeat(). Sie nimmt zwei Parameter. Zuerst die Anzahl an Spalten und dann die Größe jeder dieser Spalten.

grid-template-columns: repeat(4, 100px);


Mit der minmax() Funktion, welche zwei Werte brauch kann die Größe der Spalten bestimmt werden. Je kleiner der Bildschirm wird, desto kleiner wird auch die Spalte, bis der Wert erreicht wird, den wir als erstes angeben. Vergrößert sich der Bildschirm wieder, vergrößert sich auch die Spalte, bis der zweite Wert den wir angegeben haben erreicht ist.

minmax(100px, 1fr);


Wenn man die Anzahl der Spalten mit "auto-fit" ersetzt wird sobald die Spalten die oben angegebene kleinste Größe erreicht haben, eine neue Reihe erstellt um zu verhindern, dass das Grid breiter wird als der Bildschirm und der Inhalt verschwindet.

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));



Benutzt man auto-fill anstatt auto-fit werden die spalten nicht vergrößert um den kompletten Platz einzunehmen, es werden weitere leere Spalten mit der Größe die wir angegeben haben erstellt.

By accepting you will be accessing a service provided by a third-party external to https://nrml.de/