Grid CSS responsive sans Media Queries

Astuce : Grid CSS responsive sans Media Queries

J'ai découvert cette astuce récemment partagée par Anthony Kuang sur Medium.

En effet, avec cette simple ligne de code, vous pouvez créer une grille responsive sans utiliser de media queries.

grid-template-columns: repeat(auto-fit, minmax([width], 1fr));

Alors, comment ce CSS fonctionne ?

Le plus simple pour comprendre est de tester.
Prenons un exemple.

Nous avons besoin de 10 colonnes d'une largeur minimum de 200px pour chacune de nos colonnes.
Nous allons donc créer un code html comme ceci :

<div class="grid-container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
    <div class="box">Box 9</div>
    <div class="box">Box 10</div>
</div>

Et pour notre code CSS :

.grid-container {
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}

Décortiquons cette ligne de code CSS

Commençons par le plus simple :

• display : grid, permet un affichage en grille
• grid-gap (20px) sert simplement à ajouter une marge de 20px entre les colonnes et les lignes

Dans grid-template-columns, minmax(200px, 1fr) : c'est la largeur (width) minimum de colonne (ici 200px) que l'on souhaite, et 1fr la largeur maximum.

Pour en savoir plus sur la propriété , je vous invite à vous rendre sur ce lien : https://developer.mozilla.org/fr/docs/Web/CSS/grid...

auto-fit permet d'ajuster automatiquement le nombre de colonnes par ligne.
Vous remarquerez ainsi que lorsque vous réduisez la largeur de votre fenêtre, vous obtenez le comportement souhaité.
En effet, chaque fois que la largeur ne permet pas d'afficher toutes nos colonnes avec un minimum de 200px, elle est renvoyée sur la ligne du dessous, et ainsi de suite.

J'espère que cette petite astuce pourra vous aider pour le développement de vos futurs templates.