A Pen by InSuperposition.

index.html

<div class="container">
<div class="boundry">
  <div class="block">1</div>
</div>
<div class="boundry">
  <div class="block">2</div>
</div>
<div class="boundry">
  <div class="block">3</div>
</div><!--
--><div class="boundry">
  <div class="block">4</div>
</div><!--
--><div class="boundry">
  <div class="block">5</div>
</div><!--
--><div class="boundry">
  <div class="block">6</div>
</div><!--
--><div class="boundry">
  <div class="block">7</div>
</div><!--
--><div class="boundry">
  <div class="block">8</div>
</div><!--
--><div class="boundry">
  <div class="block"><a href="_blank">9</a></div>
</div
--><div class="boundry">
  <div class="block">10</div>
</div><!--
--><div class="boundry">
  <div class="block">11</div>
</div><!--
--><div class="boundry">
  <div class="block">12</div>
</div><!--
--><div class="boundry">
  <div class="block">13</div>
</div><!--
--><div class="boundry">
  <div class="block">14</div>
</div><!--
--><div class="boundry">
  <div class="block">15</div>
</div><!--
--><div class="boundry">
  <div class="block">16</div>
</div><!--
--><div class="boundry">
  <div class="block">17</div>
</div><!--
--><div class="boundry">
  <div class="block">18</div>
</div><!--
--><div class="boundry">
  <div class="block">19</div>
</div><div class="boundry">
  <div class="block">20</div>
</div>
<div class="boundry">
  <div class="block">21</div>
</div>
<div class="boundry">
  <div class="block">22</div>
</div>
<div class="boundry">
  <div class="block">23</div>
</div>
<div class="boundry">
  <div class="block">24</div>
</div>
 <div class="boundry">
  <div class="block">25</div>
</div>
<div class="boundry">
  <div class="block">26</div>
</div>
  <div class="boundry">
  <div class="block">27</div>
</div>
  <div class="boundry">
  <div class="block">28</div>
</div>
</div>

script.js

$('html').fitText(1);

style.scss

@import "compass";
//!important
*{
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  background-color: lightblue;
  line-height: normal;
}
.container{
  margin: 0 auto;
  width: 80%;
  font-size: 0.8em;
  background-color: white; 
  
  //for child elements that are inline-block
  line-height: 1;
  
  //clearfix
  //If floating
  &:after{
    content:"";
    display:table;
    clear:both;
  }
  
  .boundry{
    display: block;
    float: left;
    
    border: 0.05em solid blue;
    height: 10em;
    //Widths should be in percentages for FFx
    //Heights must be in EMs

    
    
    
    &:nth-child(1){
      width: 100%;
      
      
      //font-size: 0.5em;
      //width: 50%;
      
    }
    
    &:nth-child(n + 2){
      width: 50%;
      font-size: 0.5em;
      
    }
    
    &:nth-child(n + 4){
      width: 33.3333%;
      //height: 1em;
      font-size: 0.333em
    }
    
    &:nth-child(n + 7){
      width: 25%;
      //height:1em;
      font-size: 0.25em;
    }
   
    
    &:nth-child(n + 11){
      width: 20%;
      //height:1em;
      font-size: 0.2em;
    }
    
    &:nth-child(n + 16){
      width:16.6666%;
      //height:1em;
      font-size: 0.16666em;
    }
    
    &:nth-child( n + 22){
       width: 14.2857142857%;
      font-size: 0.142857142857em;
    }
  }
  
}



  

xLrHp.markdown

xLrHp

A Pen by InSuperposition on CodePen.

License.