Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
marge: 0;
police: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.container {
affichage: flex;
flex-wrap: wrap;
padding: 0 4px;
}

/* Créez quatre colonnes égales qui se trouvent côte à côte */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
alignement-vertical: milieu;
}

/* Mise en page responsive - crée une mise en page à deux colonnes au lieu de quatre colonnes */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}

/* Mise en page responsive - fait en sorte que les deux colonnes s'empilent les unes sur les autres au lieu d'être côte à côte */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>

<div class="header">
  <h1>Galerie d'images responsive</h1>
  <p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
</div>

<div class="container"> 
  <div class="column">
    <img src="../w3images/wedding.jpg" style="width:100%">
    <img src="../w3images/rocks.jpg" style="width:100%">
    <img src="../w3images/falls2.jpg" style="width:100%">
    <img src="../w3images/paris.jpg" style="width:100%">
    <img src="../w3images/nature.jpg" style="width:100%">
    <img src="../w3images/mist.jpg" style="width:100%">
    <img src="../w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="../w3images/underwater.jpg" style="width:100%">
    <img src="../w3images/ocean.jpg" style="width:100%">
    <img src="../w3images/wedding.jpg" style="width:100%">
    <img src="../w3images/mountainskies.jpg" style="width:100%">
    <img src="../w3images/rocks.jpg" style="width:100%">
    <img src="../w3images/underwater.jpg" style="width:100%">
  </div> 
   
  <div class="column">
    <img src="../w3images/wedding.jpg" style="width:100%">
    <img src="../w3images/rocks.jpg" style="width:100%">
    <img src="../w3images/falls2.jpg" style="width:100%">
    <img src="../w3images/paris.jpg" style="width:100%">
    <img src="../w3images/nature.jpg" style="width:100%">
    <img src="../w3images/mist.jpg" style="width:100%">
    <img src="../w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="../w3images/underwater.jpg" style="width:100%">
    <img src="../w3images/ocean.jpg" style="width:100%">
    <img src="../w3images/wedding.jpg" style="width:100%">
    <img src="../w3images/mountainskies.jpg" style="width:100%">
    <img src="../w3images/rocks.jpg" style="width:100%">
    <img src="../w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>

</html>