November 2021
Um eine Website zu gestalten, haben Web-Entwickler früher Tabellen, Positioning oder Inline-Block verwendet. Das funktio...
Info (responsiv):
responsiv bedeutet, dass eine Webseite oder in diesem Fall ein Grid auf verschiedene Bildschirmgrößen angepasst ist.
responsiv bedeutet, dass eine Webseite oder in diesem Fall ein Grid auf verschiedene Bildschirmgrößen angepasst ist.
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...
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);
Info (fr):
fr steht für fraction und im zusammenhang mit CSS Grid bedeutet, dass alle Spalten oder Reihen einen gleichgroßen Teil von dem Platz der ihnen zur Verfügung steht einnehmen.
fr steht für fraction und im zusammenhang mit CSS Grid bedeutet, dass alle Spalten oder Reihen einen gleichgroßen Teil von dem Platz der ihnen zur Verfügung steht einnehmen.
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));
Info (auto-fit):
Auto-Fit erstellt die benötigten Spalten und vergrößert diese, damit sie den kompletten Platz einnehmen, welcher ihnen zur Verfügung steht.
Auto-Fit erstellt die benötigten Spalten und vergrößert diese, damit sie den kompletten Platz einnehmen, welcher ihnen zur Verfügung steht.
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.
