So reagieren Sie auf HTML, indem Sie eine einzelne Zeile CSS hinzufügen

In diesem Artikel werde ich Ihnen zeigen, wie Sie mit CSS Grid ein super cooles Bildraster erstellen, das die Anzahl der Spalten mit der Breite des Bildschirms variiert.

Und das Schönste: Die Reaktionsfähigkeit wird mit einer einzigen Zeile CSS hinzugefügt.

Das heißt , wir müssen den HTML - Code mit hässlichen Klassennamen nicht verunstaltet (dh col-sm-4, col-md-8) oder Medienanfragen für jede einzelne Bildschirmgröße erstellen.

Wenn Sie lernen möchten, reaktionsschnelle Websites auf professioneller Ebene zu erstellen, sollten Sie sich das reaktionsschnelle Webdesign-Bootcamp von Scrimba ansehen, das Schüler vom Anfänger bis zum Fortgeschrittenen durch 15 Stunden interaktive Tutorials führt.

Jetzt lass uns hineinspringen!

Die Einrichtung

In diesem Artikel fahren wir mit dem Raster fort, das wir in meinem ersten CSS-Rasterartikel verwendet haben. Dann fügen wir die Bilder am Ende des Artikels hinzu. So sieht unser anfängliches Raster aus:

Hier ist der HTML-Code:

 1 2 3 4 5 6 

Und das CSS:

.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } 

Hinweis: Das Beispiel enthält auch ein wenig grundlegendes Styling, auf das ich hier nicht näher eingehen werde, da es nichts mit CSS Grid zu tun hat.

Wenn dieser Code Sie verwirrt, würde ich Ihnen empfehlen, meinen Artikel "CSS-Raster lernen" in 5 Minuten zu lesen, in dem ich die Grundlagen des Layoutmoduls erkläre.

Beginnen wir damit, dass die Spalten reagieren.

Grundlegende Reaktionsfähigkeit mit der Fraktionseinheit

CSS Grid bringt einen ganz neuen Wert mit sich, der als Brucheinheit bezeichnet wird. Die Brucheinheit ist wie folgt geschrieben frund ermöglicht es Ihnen, den Container in beliebig viele Brüche aufzuteilen.

Lassen Sie uns jede der Spalten so ändern, dass sie einen Bruchteil breit sind.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; } 

Was hier passiert, ist, dass das Gitter die gesamte Breite in drei Brüche aufteilt und jede der Spalten jeweils eine Einheit einnimmt. Hier ist das Ergebnis:

Wenn wir den grid-template-columnsWert in ändern 1fr 2fr 1fr, ist die zweite Spalte jetzt doppelt so breit wie die beiden anderen Spalten. Die Gesamtbreite beträgt jetzt vier Bruchteilseinheiten, und die zweite nimmt zwei davon auf, während die anderen jeweils eine aufnehmen. So sieht das aus:

Mit anderen Worten, der Bruchteilwert macht es Ihnen sehr einfach, die Breite der Spalten zu ändern.

Erweiterte Reaktionsfähigkeit

Das obige Beispiel gibt uns jedoch nicht die gewünschte Reaktionsfähigkeit, da dieses Raster immer drei Spalten breit ist. Wir möchten, dass unser Raster die Anzahl der Spalten mit der Breite des Containers variiert. Um dies zu erreichen, müssen Sie drei neue Konzepte lernen.

wiederholen()

Wir werden mit der repeat()Funktion beginnen. Dies ist eine leistungsstärkere Methode zum Festlegen Ihrer Spalten und Zeilen. Nehmen wir unser ursprüngliches Raster und ändern es in repeat ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } 

Mit anderen Worten, repeat(3, 100px)ist identisch mit 100px 100px 100px. Der erste Parameter gab an, wie viele Spalten oder Zeilen Sie möchten, und der zweite gibt deren Breite an. Dies gibt uns also genau das gleiche Layout, mit dem wir begonnen haben:

Auto-Fit

Dann gibt es Auto-Fit. Lassen Sie uns eine feste Anzahl von Spalten überspringen und stattdessen 3 durch ersetzen auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } 

Dies führt zu folgendem Verhalten:

Das Raster variiert nun die Anzahl der Spalten mit der Breite des Containers.

Es wird einfach versucht, so viele 100px breite Spalten wie möglich in den Container einzupassen.

Wenn wir jedoch alle Spalten fest auf genau 100 Pixel codieren, erhalten wir nie die gewünschte Flexibilität, da sie sich selten zur vollen Breite summieren. Wie Sie auf dem GIF oben sehen können, lässt das Gitter häufig Leerzeichen auf der rechten Seite.

Minimal Maximal()

Die letzte Zutat, die wir brauchen, um dies zu beheben, heißt minmax(). Wir werden einfach 100px durch ersetzen minmax(100px, 1fr). Hier ist das endgültige CSS.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } 

Beachten Sie, dass die gesamte Reaktionsfähigkeit in einer einzigen CSS-Zeile erfolgt.

Dies führt zu folgendem Verhalten:

Und wie Sie sehen, funktioniert das perfekt. Die minmax()Funktion definiert einen Größenbereich größer oder gleich min und kleiner oder gleich max.

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

Adding the images

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

We’ll start off by adding an image tag inside of each of the grid items.

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

.container > div > img { width: 100%; height: 100%; object-fit: cover; } 

Which ends up like the following:

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

Browser support

Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.

If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.