Responsive Boxes without Images

In this example below you will see how to do a Responsive Boxes without Images with some HTML / CSS and Javascript

"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.

Thumbnail
This awesome code was written by andymcfee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andymcfee ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Boxes without Images</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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/andymcfee/responsive-boxes-without-images-ABboI */
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/andymcfee/responsive-boxes-without-images-ABboI */
var boxHeight = function() {
  var cw = $('.box').width();
  $('.box').css({'height':cw+'px'});
}
    
$(function(){
  
  boxHeight();
  $(window).resize(function() {
    boxHeight();
  });
});

Comments