Es gibt viele Grids im Web, die so aussehen
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Meine Botschaft ist, dass sie eigentlich sein sollten
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
Neben der Verwendung von Media Queries und modernen CSS-Layouts wie Flexbox und Grid zur Erstellung responsiver Websites gibt es bestimmte übersehene Dinge, die wir gut machen können, um responsive Websites zu erstellen. In diesem Artikel werden wir uns eine Reihe von Werkzeugen ansehen (die sich um ... drehen).
Heutzutage ist alles flexibel. Wenn Sie grid-template-columns: 200px 200px 200px; schreiben, haben Sie zwar gleich breite Spalten, aber das ist ein seltener Fall. Was Sie normalerweise meinen, sind drei Spalten gleicher fließender Breite.
Wir haben fraktionale Einheiten für ...
Die berühmteste Codezeile, die bisher aus CSS Grid hervorgegangen ist, lautet
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));Ohne Media Queries wird ein Grid-Container eingerichtet, der eine variable Anzahl von Spalten hat. Die Spalten …
Ein weiterer großartiger Beitrag von Ire Aderinokun, diesmal über die kuriose minmax() CSS-Funktion und wie sie zusammen mit den CSS Grid-Funktionen funktioniert, mit denen wir in letzter Zeit experimentieren.
Besonders hervorzuheben sind hier die Beispiele, in denen Ire erklärt, wie …
