Andy Bell hat eine wirklich coole Demo erstellt, die uns zeigt, wie man ein responsives Grid-Layout ganz ohne Media Queries erstellt. So sieht es aus, wenn Sie die Größe des Browserfensters ändern
Ich halte dies für eine wunderbare Layouttechnik, die nur 6 Zeilen (!) CSS benötigt.
.auto-grid {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}Das zeigt uns, dass wir nicht hunderttausend Media Queries schreiben müssen, um die Anzahl der Spalten in einem Grid zu ändern. Andy beweist auch, dass CSS Grid so viel von der mühsamen Arbeit beim Styling von Layouts automatisieren kann.
Ich habe diese Technik bereits an einigen Stellen gesehen (und wir haben einige Starter-Grid-Vorlagen obendrein), aber Andy's Artikel darüber, wie das alles funktioniert, hat endlich dazu geführt, dass mir klar geworden ist, wie nützlich Grid ist.
Können wir Media Queries in Bootstrap vermeiden?
Ja. Benutzen Sie einfach keine Klassen wie 'container', 'row' und 'column'.
Außer, dass es nicht funktioniert, wenn der Container schmaler ist als
--auto-grid-min-size… Ich implementiere dieses Muster, aber ich muss eine Media Query für diesen Randfall verwenden.Das ist großartig für kleine Projekte. Für große Projekte muss man kommunizieren können, wann das Grid genau in weniger Spalten übergeht. Man kann einem Kunden oder Designer nicht sagen: „Wenn es nicht mehr passt“. Sie wollen über Bildschirmgrößen, wenn nicht gar Gerätetypen, nachdenken.
Warum wurde überhaupt die Variable „–auto-grid-min-size“ verwendet? Sie wird nur einmal verwendet und es funktioniert auch, wenn man sie durch ihren Wert ersetzt. Ich schätze, er wollte zeigen, dass er eine Variable verwenden kann und vielleicht diejenigen von uns hervorheben, die nicht auf dem neuesten Stand der CSS-Technik sind?
In Ihrer Demo änderte sich auch das Menü von mehreren Schaltflächen/Links zu einem, das alle zusammenfasst (Hamburger-Menü). Ich dachte, dieser Teil würde durch das CSS-Grid gemacht, was ich erstaunlich fand. Aber leider sprechen Sie wahrscheinlich über den Inhalt und nicht über den Header…
Haben Sie Media Queries für das Menü verwendet?
Warum auto-fill und nicht auto-fit?
In dem Fall, dass es weniger Elemente als Spalten gibt, erstellt
auto-fillleere Spalten, währendauto-fitnur die erforderliche Anzahl von Spalten erstellt.Tolles Beispiel. Funktioniert diese Lösung mit Safari, Firefox, Edge und Chrome?