Comment rendre votre HTML réactif en ajoutant une seule ligne de CSS

Dans cet article, je vais vous apprendre à utiliser CSS Grid pour créer une grille d'image super cool qui varie le nombre de colonnes avec la largeur de l'écran.

Et le plus beau: la réactivité sera ajoutée avec une seule ligne de CSS.

Cela signifie que nous n'avons pas à encombrer le HTML avec des noms de classe laids (c'est col-sm-4-à- dire col-md-8) ou à créer des requêtes multimédias pour chaque taille d'écran.

Si vous souhaitez apprendre à créer des sites Web réactifs à un niveau professionnel, vous pouvez envisager de consulter le bootcamp de conception Web réactif de Scrimba, car il emmène les étudiants du débutant à l'avancé à travers 15 heures de tutoriels interactifs.

Maintenant, sautons dedans!

La mise en place

Pour cet article, nous allons continuer avec la grille que nous avons utilisée dans mon premier article CSS Grid. Ensuite, nous ajouterons les images à la fin de l'article. Voici à quoi ressemble notre grille initiale:

Voici le HTML:

 1 2 3 4 5 6 

Et le CSS:

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

Remarque: l'exemple a également un peu de style de base, que je n'entrerai pas ici, car il n'a rien à voir avec CSS Grid.

Si ce code vous déroute, je vous recommande de lire mon article Apprendre la grille CSS en 5 minutes, où j'explique les bases du module de mise en page.

Commençons par rendre les colonnes réactives.

Réactivité de base avec l'unité de fraction

CSS Grid apporte une toute nouvelle valeur appelée unité de fraction. L'unité de fraction s'écrit ainsi fret vous permet de diviser le conteneur en autant de fractions que vous le souhaitez.

Changeons chacune des colonnes pour avoir une unité de fraction de large.

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

Ce qui se passe ici, c'est que la grille divise toute la largeur en trois fractions et que chacune des colonnes occupe une unité chacune. Voici le résultat:

Si nous changeons la grid-template-columnsvaleur en 1fr 2fr 1fr, la deuxième colonne sera désormais deux fois plus large que les deux autres colonnes. La largeur totale est maintenant de quatre unités de fraction, et la seconde en occupe deux, tandis que les autres en prennent une chacune. Voici à quoi cela ressemble:

En d'autres termes, la valeur de l'unité de fraction vous permet de modifier très facilement la largeur des colonnes.

Réactivité avancée

Cependant, l'exemple ci-dessus ne nous donne pas la réactivité souhaitée, car cette grille aura toujours une largeur de trois colonnes. Nous voulons que notre grille fasse varier le nombre de colonnes avec la largeur du conteneur. Pour y parvenir, vous devrez apprendre trois nouveaux concepts.

répéter()

Nous allons commencer par la repeat()fonction. C'est un moyen plus puissant de spécifier vos colonnes et vos lignes. Prenons notre grille d'origine et changeons-la en utilisant repeat ():

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

En d'autres termes, repeat(3, 100px)est identique à 100px 100px 100px. Le premier paramètre spécifie le nombre de colonnes ou de lignes que vous voulez, et le second spécifie leur largeur, donc cela nous donnera exactement la même disposition que nous avons commencé avec:

ajustement automatique

Ensuite, il y a l'ajustement automatique. Évitons d'avoir un nombre fixe de colonnes et remplaçons plutôt 3 par auto-fit.

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

Cela entraîne le comportement suivant:

La grille fait maintenant varier le nombre de colonnes avec la largeur du conteneur.

Il essaie simplement de placer autant de colonnes de 100 pixels de large que possible dans le conteneur.

Cependant, si nous codons en dur toutes les colonnes pour qu'elles soient exactement 100px, nous n'obtiendrons jamais la flexibilité que nous voulons, car elles s'ajouteront rarement à la largeur totale. Comme vous pouvez le voir sur le gif ci-dessus, la grille laisse souvent un espace blanc sur le côté droit.

min max()

Le dernier ingrédient dont nous avons besoin pour résoudre ce problème est appelé minmax(). Nous remplacerons simplement 100px par minmax(100px, 1fr). Voici le CSS final.

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

Notez que toute la réactivité se produit dans une seule ligne de CSS.

Cela entraîne le comportement suivant:

Et comme vous pouvez le voir, cela fonctionne parfaitement. La minmax()fonction définit une plage de tailles supérieure ou égale à min et inférieure ou égale à 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.