Responsive Boxes without Images

"But I don't want to put images in my markup!" Fine, then if you still want to achieve the 100%-fluid width boxes, you need to set the height of the .box to match its width with some simple jQuery. And be sure to fire it whenever you resize the window.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Responsive Boxes without Images</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>CSS3 Column Responsive Boxes without Images</h1>
<h2>resize your window</h2>

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<p>"But I don't want to put images in my markup!" Fine, then if you still want to achieve the 100%-fluid width boxes, you need to set the height of the <code>.box</code> to match its width with some simple jQuery. And be sure to fire it whenever you resize the window.</p>

<p>Don't want to use any JS? <a href="https://codepen.io/andymcfee/pen/yCofs">Use images</a> (if it makes sense (if I catch you using transparent pngs to achieve this, I'm going to be very angry!)).</p>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #333;
  font-family: "HelveticaNeue-CondensedBold", "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #eee;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.65);
}

.box-container {
  overflow: hidden;
  *zoom: 1;
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  column-width: 200px;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.box {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.box:nth-child(1) {
  background: #ff2600;
}
.box:nth-child(2) {
  background: #ff4d00;
}
.box:nth-child(3) {
  background: #ff7300;
}
.box:nth-child(4) {
  background: #ff9900;
}
.box:nth-child(5) {
  background: #ffbf00;
}
.box:nth-child(6) {
  background: #ffe600;
}
.box:nth-child(7) {
  background: #f2ff00;
}
.box:nth-child(8) {
  background: #ccff00;
}
.box:nth-child(9) {
  background: #a6ff00;
}
.box:nth-child(10) {
  background: #80ff00;
}
.box:nth-child(11) {
  background: #59ff00;
}
.box:nth-child(12) {
  background: #33ff00;
}
.box:nth-child(13) {
  background: #0dff00;
}
.box:nth-child(14) {
  background: #00ff1a;
}
.box:nth-child(15) {
  background: #00ff40;
}
.box:nth-child(16) {
  background: #00ff66;
}
.box:nth-child(17) {
  background: #00ff8c;
}
.box:nth-child(18) {
  background: #00ffb3;
}
.box:nth-child(19) {
  background: #00ffd9;
}
.box:nth-child(20) {
  background: cyan;
}
.box:nth-child(21) {
  background: #00d9ff;
}
.box:nth-child(22) {
  background: #00b3ff;
}
.box:nth-child(23) {
  background: #008cff;
}
.box:nth-child(24) {
  background: #0066ff;
}
.box:nth-child(25) {
  background: #0040ff;
}
.box:nth-child(26) {
  background: #001aff;
}
.box:nth-child(27) {
  background: #0d00ff;
}
.box:nth-child(28) {
  background: #3300ff;
}
.box:nth-child(29) {
  background: #5900ff;
}
.box:nth-child(30) {
  background: #8000ff;
}
.box:nth-child(31) {
  background: #a600ff;
}
.box:nth-child(32) {
  background: #cc00ff;
}
.box:nth-child(33) {
  background: #f200ff;
}
.box:nth-child(34) {
  background: #ff00e6;
}
.box:nth-child(35) {
  background: #ff00bf;
}
.box:nth-child(36) {
  background: #ff0099;
}
.box:nth-child(37) {
  background: #ff0073;
}
.box:nth-child(38) {
  background: #ff004d;
}
.box:nth-child(39) {
  background: #ff0026;
}
.box:nth-child(40) {
  background: red;
}
.box:nth-child(41) {
  background: #ff2600;
}
.box:nth-child(42) {
  background: #ff4d00;
}
.box:nth-child(43) {
  background: #ff7300;
}
.box:nth-child(44) {
  background: #ff9900;
}
.box:nth-child(45) {
  background: #ffbf00;
}
.box:nth-child(46) {
  background: #ffe600;
}
.box:nth-child(47) {
  background: #f2ff00;
}
.box:nth-child(48) {
  background: #ccff00;
}
.box:nth-child(49) {
  background: #a6ff00;
}
.box:nth-child(50) {
  background: #80ff00;
}
.box:nth-child(51) {
  background: #59ff00;
}
.box:nth-child(52) {
  background: #33ff00;
}
.box:nth-child(53) {
  background: #0dff00;
}
.box:nth-child(54) {
  background: #00ff1a;
}
.box:nth-child(55) {
  background: #00ff40;
}
.box:nth-child(56) {
  background: #00ff66;
}
.box:nth-child(57) {
  background: #00ff8c;
}
.box:nth-child(58) {
  background: #00ffb3;
}
.box:nth-child(59) {
  background: #00ffd9;
}
.box:nth-child(60) {
  background: cyan;
}

.no-csscolumns .box {
  float: left;
}
@media (min-width: 150px) {
  .no-csscolumns .box {
    width: 50%;
  }
}
@media (min-width: 300px) {
  .no-csscolumns .box {
    width: 33.33333%;
  }
}
@media (min-width: 450px) {
  .no-csscolumns .box {
    width: 25%;
  }
}
@media (min-width: 600px) {
  .no-csscolumns .box {
    width: 20%;
  }
}
@media (min-width: 750px) {
  .no-csscolumns .box {
    width: 16.66667%;
  }
}
@media (min-width: 900px) {
  .no-csscolumns .box {
    width: 14.28571%;
  }
}
@media (min-width: 1050px) {
  .no-csscolumns .box {
    width: 12.5%;
  }
}
@media (min-width: 1200px) {
  .no-csscolumns .box {
    width: 11.11111%;
  }
}
@media (min-width: 1350px) {
  .no-csscolumns .box {
    width: 10%;
  }
}
@media (min-width: 1500px) {
  .no-csscolumns .box {
    width: 9.09091%;
  }
}
@media (min-width: 1650px) {
  .no-csscolumns .box {
    width: 8.33333%;
  }
}
@media (min-width: 1800px) {
  .no-csscolumns .box {
    width: 7.69231%;
  }
}
@media (min-width: 1950px) {
  .no-csscolumns .box {
    width: 7.14286%;
  }
}
@media (min-width: 2100px) {
  .no-csscolumns .box {
    width: 6.66667%;
  }
}
@media (min-width: 2250px) {
  .no-csscolumns .box {
    width: 6.25%;
  }
}
@media (min-width: 2400px) {
  .no-csscolumns .box {
    width: 5.88235%;
  }
}
@media (min-width: 2550px) {
  .no-csscolumns .box {
    width: 5.55556%;
  }
}
@media (min-width: 2700px) {
  .no-csscolumns .box {
    width: 5.26316%;
  }
}
@media (min-width: 2850px) {
  .no-csscolumns .box {
    width: 5%;
  }
}
@media (min-width: 3000px) {
  .no-csscolumns .box {
    width: 4.7619%;
  }
}

h1, h2 {
  display: block;
  margin: 20px auto 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  font-size: 11px;
  margin: 0 auto 20px;
}

a {
  color: #FFF;
  text-decoration: underline;
}

p {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.65) inset;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.65) inset;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.65) inset;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5em;
  margin: 20px auto;
  max-width: 500px;
  padding: 20px;
  text-align: left;
}
@media (max-width: 540px) {
  p {
    margin: 20px;
  }
}
/* Downloaded from https://www.codeseek.co/ */
var boxHeight = function() {
  var cw = $('.box').width();
  $('.box').css({'height':cw+'px'});
}
    
$(function(){
  
  boxHeight();
  $(window).resize(function() {
    boxHeight();
  });
});

This awesome code ( Responsive Boxes without Images ) is write by Andy McFee, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Andy McFee