JSFiddle - React, Tailwind, and code Playground

by mahdiihd

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/masonry.classes.css">

<section>
  <div class="container-fluid text-center" style="background-color: white; color: black">
    <div class="container" style="margin-bottom: 20px">
      <div class="row">
        <h1>Portfolio</h1>
        <div class="col-md-12">
          <div class="grid" style="height: 1200px;">
            <div class="grid-sizer"></div>
            <div class="grid-item grid-item--small-width grid-item--full-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--half-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/project/projectImage_4.png"></div>
            <div class="grid-item grid-item--full-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
            <div class="grid-item grid-item--small-width grid-item--small-height"><img class="img-responsive" src="http://landstededev.test/storage/projects/projectImage_4.png"></div>
           ...

CSS

* {
  box-sizing: border-box;
}


/* force scrollbar, prevents initial gap */

html {
  overflow-y: scroll;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

.grid {
  background: #DDD;
}


/* clear fix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---- .element-item ---- */


/* 5 columns, percentage width */

.grid-item {
  float: left;
  width: 16.667%;
  height: 200px;
}

.grid-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.grid-item--small-width {
  width: 16.667%;
}


/*Small*/

.grid-item--double-small-width {
  width: 33.334%;
}


/*Double*/

.grid-item--half-width {
  width: 50%;
}


/*Half*/

.grid-item--three-fourth-width {
  width: 66.668%;
}


/*Bit More Than Half*/

.grid-item--big-width {
  width: 83.335%;
}


/*Big*/

.grid-item--full-width {
  width: 100%;
}


/*Full*/

.grid-item--small-height {
  height: 16.667%;
}


/*Small*/

.grid-item--double-small-height {
  height: 33.334%;
}


/*Double*/

.grid-item--half-height {
  height: 50%;
}


/*Half*/

.grid-item--three-fourth-height {
  height: 66.668%;
}


/*Bit More Than Half*/

.grid-item--big-height {
  height: 83.335%;
}


/*Big*/

.grid-item--full-height {
  height: 100%;
}

JavaScript

$(document).ready(function() {
  let $grid = $('.grid').imagesLoaded(function() {
    // init Packery after all images have loaded
    $('.grid').packery({
      itemSelector: '.grid-item',
      percentPosition: true
    });
    $grid.packery('layout');
  });
});