JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

SCSS

* {
  box-sizing: border-box;
  margin: 0; padding:0;
}




.grid {
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  transition: all 0.3s ease-in-out;
  grid-gap: 40px;
  
  &-item {

    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: Futura, sans-serif;
    font-weight: 700;
    background: #cecece;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    
    
    &:before {
      content: "original width: 360px";
      display: block;
      position: absolute;
      top:0;
      left:0;
      width: 360px;
      height: 100%;
      padding: 20px;
      background: rgba(255,0,0,0.2);
      font-weight: 400;
      font-size: 12px;
       box-sizing: border-box;
    }
  }
  
}

JavaScript

jQuery(document).ready(function($) {


  getWidth();

  $(window).on('resize', function() {
    getWidth();
  });



  function getWidth() {
    var el = $('.grid-item').width();
    $('.grid-item').html("current width:" + el + "px");
  }

});