Gallery images with bootstrap4 Flexbox

<!DOCTYPE html>
<html>
<head>
  <title>Gallery images with bootstrap4 Flexbox | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container-fluid">
    <div class="d-flex flex-row flex-wrap justify-content-center">
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=668&q=80" class="img-fluid">            
            <img src="https://images.unsplash.com/photo-1502865787650-3f8318917153?auto=format&fit=crop&w=334&q=80" class="img-fluid">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1500816558239-6b91f4256ead?auto=format&fit=crop&w=331&q=80" class="img-fluid">
            <img src="https://images.unsplash.com/photo-1487376318617-f43c7b41e2e2?auto=format&fit=crop&w=750&q=80" class="img-fluid scale">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1497888329096-51c27beff665?auto=format&fit=crop&w=751&q=80" class="img-fluid scale mb-2">
            <img src="https://images.unsplash.com/photo-1505253468034-514d2507d914?auto=format&fit=crop&w=334&q=80"  class="img-fluid">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1502550900787-e956c314a221?auto=format&fit=crop&w=334&q=80" class="img-fluid m-1 p-1">
              <img src="https://images.unsplash.com/photo-1455853659719-4b521eebc76d?auto=format&fit=crop&w=750&q=80" class="img-fluid image m-1 p-1">
        </div>
    </div>
  </div>
</body>
</html>
.container {
  background: #f9f9f9;
}

.flex-column {
  max-width: 260px;
}

img {
  margin: 5px;
}

.scale {
  transform: scaleY(1.05);
  padding-top: 5px; 
}

                                    
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Background div gradient

Background div gradient

Bloc resizable with jquery

Bloc resizable with jquery

Bootstrap4 datepicker

Bootstrap4 datepicker

Image hover 01

Image hover 01

Lightbox gallery style01

Lightbox gallery style01

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

SwiperJS style01

SwiperJS style01

Table responsive avec css native

Table responsive avec css native

Timeline style07

Timeline style07