Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Das Team: 2. Ein responsives Grid ohne Media Query

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Das Team: 2. Ein responsives Grid ohne Media Query

“

Zur Gestaltung der Teamvorstellung habe ich hier die Dateien aus dem Anfangsordner zu diesem Film in den Übungsordner kopiert und hier content.css bereits geöffnet. Aber ich möchte Ihnen das direkt im Browser zeigen, dann sieht man sofort, was passiert und hat auch gleichzeitig noch die Grid-Hervorhebung dabei. Das ist sehr anschaulich. Grid-Container wird das ul Element, und die Grid-Items werden die Listenelemente. Hier ist die Liste mit der Klasse mitglieder, und ich mache sie zum Grid-Container. Und da passiert natürlich wie immer erstmal so gut wie nichts, außer, dass im Hintergrund die richtigen Strukturen schon mal geschaffen wurden. Weiter geht es mit der Definition des Grids mit grid-template-columns. So, Sie lernen im Verlaufe dieses Films 3 Tricks kennen, die heißen repeat, auto-fit und minmax. Los geht es mit dem ersten, der heißt repeat() und hat hinten dran Klammern, in denen Werte stehen. Der erste Wert gibt eine Zahl an, wie oft etwas wiederholt werden soll, und der zweite Wert sagt, wie breit das werden soll. Und schon haben wir repeat (3,1 fr). Das wäre dasselbe, als ob Sie 1fr, 1fr, 1fr hinschreiben. Aber je mehr Spalten man hat, desto mehr Schreibarbeit spart die Funktion repeat(). Statt der 3 oder einer anderen Zahl können Sie hier auch ein Keyword benutzen, das heißt auto-fit. Das hat allerdings die Einschränkung, dass man es nicht direkt mit der Grid-Einheit fr kombinieren kann. Das Grid bzw. der Browser hat dann nicht genügend Informationen, um damit wirklich arbeiten zu können. Also ist die Kombination von auto-fit und mit dem in der Breite doch undefinierten fr nicht erlaubt. Also zeige ich Ihnen das hier erstmal mit auto-fit, und nehme dann eine feste Breite von 250 px. Das kann auch ein anderer Wert sein, experimentieren Sie einfach, Einheiten wie rem sind auch erlaubt. Aber Sie sehen, hier gibt es jetzt schon ein Grid, das nebeneinander steht. Dieses Grid ist sogar schon responsiv, denn es passt sich an an die Breite des Layouts hier. Da sehen wir schon, bevor wir es vergessen, bauen wir hier gleich nochmal ein bisschen gap ein. So, aber es füllt nicht den Platz. Wenn ich jetzt hier breiter ziehe, dann sieht man recht deutlich, da bleibt rechts immer ein Rand. Die Listenelemente haben halt eine feste Breite, und die behalten sie auch. Und beim einspaltigen sieht man das sehr deutlich. Und da kommt der dritte Trick ins Spiel, nämlich die Funktion minmax(). Statt der festen Breite hier hinten, die markiere ich mal, gebe ich die Funktion minmax() ein, und die hat 2 Werte: 1 Minimum und 1 Maximum. Das Minimum wird 250pix oder ein anderer fester Wert, dann kommt ein Komma, und das Maximum wird ein fr. So, jetzt haben Sie ein flexibles Grid. Sie gleich sehen werden, so, jetzt passt das in eine Zeile, und jetzt kann ich das verkleinern und vergrößern, so wie man möchte. Sie sehen, einspaltig füllt es jetzt den Platz, denn es darf ein fr werden. Und wenn wir das aufheben, dann haben wir hier auch 3 Spalten nebeneinander. Sie sehen, dieses Grid erfüllt die Bedingungen perfekt. Ich kopiere diese CSS Regel, die ich hier erstellt habe, wechsle in den Editor und füge sie hier wieder ein. So, und jetzt ist dieses Grid schon perfekt, responsiv ohne Media Query. Statt einer Teamvorstellung können Sie hier natürlich auch etwas anderes wählen, Produktkatalog oder Fotogalerie, oder irgendwas, aber Sie haben jetzt ein flexibles Grid ohne Media Query.

Inhalt