JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id='wrapper' class="row">
  <div class="col-lg-4" id='tile-safe-browsing'>Safe Browsing</div>
  <div class="col-lg-2" id="tile-vulnerabilities">Vulner.</div>
  <div class='col-lg-2' id="tile-cert-chaining">Chaining</div>
  <div class="col-lg-4" id='tile-cert-errors'>Errors</div>
  <div class="col-lg-4" id='tile-cert-expiration'>Expiration</div>
  <div class="col-lg-4" id="tile-server-config">Server Info</div>
  <div class="col-lg-4" id="tile-SAN-list">SAN List</div>
  <div class="col-lg-4" perfo id='tile-cert-warnings'>Alerts</div>
  <div class="col-lg-2" id="tile-ca-info">CA Info</div>
</div>

CSS

@media (min-width: 1200px) {
  .col-lg-2 {
    width: calc(16.6667% - 20px);
  }
  .col-lg-4 {
    width: calc(33.33333% - 20px);
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    width: calc(16.6667% - 20px);
  }
  .col-lg-4 {
    width: calc(33.33333% - 20px);
  }
}

@media (max-width: 768px) {
  .col-lg-4 {
    width: calc(100% - 20px);
  }
  .col-lg-2 {
    width: calc(100% - 20px);
  }
}

@media (min-width: 768px) and (max-width: 1299px) {
  .col-lg-4 {
    width: calc(66% - 20px);
  }
  .col-lg-2 {
    width: calc(33.3333% - 20px);
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .col-lg-4 {
    width: calc(50% - 20px);
  }
  .col-lg-2 {
    width: calc(25% - 20px);
  }
}
@media (min-width: 1600px) {
  .col-lg-4 {
    width: calc(40% - 20px);
  }
  .col-lg-2 {
    width: calc(20% - 20px);
  }
}


div[id^='tile-'] {
  height: 340px;
  min-width: 300px;
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: #141414;
  color: #eee;
  text-transform: uppercase;
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
  float: left;
}

/*#wrapper {
  margin-right: -10px;
  margin-left: 10px;
}*/

JavaScript

window.onresize = function() {
  console.log($("#wrapper").width());
}