HervéRenault.fr

Logo de CSS3

Exemple de grille qui s'adapte à son contenu avec display: inline-grid et repeat(auto-fit, …)

Inspiré de ce CodePen. Note : on peut remplacer display: inline-grid par display: inline grid (en deux mots)

Regarder cette page sous différentes largeurs de fenêtre pour en voir l'intérêt. L'important, outre l'utilisation de inline-grid et repeat(auto-fit, …), c'est la min-width. En fait, cette min-width va donner la largeur de la grille, d'où ce calcul de 100vw - une largeur de "case" (largeur d'une image + le gap de la grille). Pour le fun, désactiver la min-width dans les outils de développement.

J'ai essayé de faire pareil avec inline-flex et flex-wrap: wrap, sans succès. C'est logique, le module CSS Grid est le plus adapté pour faire des grilles par définition.

image 1

image 2

image 3

image 4

image 5

image 6

image 7

image 8

image 9

image 10

image 11

image 12

image 13

image 14

image 15

image 16

image 17

image 18

image 19

image 20

image 21

image 22

image 23

image 24

image 25

image 26

image 27

image 28

image 29

Autre exemple avec des tailles d'images différentes :

image 1

image 2

image 3

image 4

image 5

image 6

image 7

image 8

image 9

image 10

image 11

image 12

image 13

image 14

image 15

image 16

image 17

image 18

image 19

image 20 volontairement trop large

image 21

image 22

image 23

image 24

image 25

image 26

image 27 avec beaucoup plus de texte ici, juste pour voir, lorem ipsum et tout ce qui s'en suit

image 28

image 29

⚠️ Calculer la min-width avec des % au lieu de vw, ça ne marche pas sur Firefox à l'heure où j'écris :

image 1

image 2

image 3

image 4

image 5

image 6

image 7

image 8

image 9

image 10

image 11

image 12

image 13

image 14

image 15

image 16

image 17

image 18

image 19

image 20

image 21

image 22

image 23

image 24

image 25

image 26

image 27

image 28

image 29