JSFiddle - React, Tailwind, and code Playground

by Aleksandra Strelkova

HTML

<div class="container-fluid">
<div class="row">
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img src="http://mignews.com.ua/modules/news/images/articles/changing/19436650-v-filadelfii-enot-napal-na-chetyrekhmes.jpg" alt=""></div>
  <div class="col-lg3 col-md4 col-sm6 col-xs-12"><img...

CSS

body {
  margin: 0;
  padding: 15px 0;
}

img { 
  width: 100%; 
  display: inline-block;
  margin-bottom: 12px;
}

.container-fluid {
  padding: 16px;
}

.row {
  margin: 0 -15px;  
}

.row:after {
  content: "";
  display: block;
  clear: both;
}

.col-lg3,
.col-md4,
.col-sm6,
.col-xs-12 {
  float: left;
  padding: 0 15px;
  box-sizing: border-box;
}

.col-lg3 {
  width: 25%;
}


@media (max-width: 980px) {
  .col-md4 {
    width: 33.333333%;
  }
}

@media (max-width: 640px) {
  .col-sm6 {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .col-xs-12 {
    width: 100%;
  }
}