title: How can I create HTML/CSS responsive tile?
body: <p>I try to understand how CSS and responsive design works. I made a small example <a href="http://jsfiddle.net/B4st13n/xB7tb/2/" rel="nofollow">here</a>. </p>
  
  <p>This is a simple tile template.</p>
  
  <p>I would like to be able to show my tile on 2, 3, 4 or more columns. In this sample you just need to change the div "wrapper" class <code>c2, c3, c4</code> to modify the number of columns.</p>
  
  <p>This works because my tile are floating left and these <code>c2, c3, c4</code> modify the width of my wrapper. See HTML and CSS file or go on <a href="http://jsfiddle.net/B4st13n/xB7tb/2/" rel="nofollow">JSFiddle</a>. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper c2"&gt; &lt;!-- try with c3, c4--&gt;
      &lt;div class="scrollable"&gt;
          &lt;div class="webbutiles"&gt;
              &lt;a href='?page_id=77'  class='tile TBlue iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-group'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 1&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=85'  class='tile TDarkGreen iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-comments-alt'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 2&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=89'  class='tile TDarkPurple iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-cogs'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 3&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=91'  class='tile TDarkBlue iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-table'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 4&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=93'  class='tile TDarkRed iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-heart'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 5&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=95'  class='tile TTwitterBlue iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-twitter'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 6&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=97'  class='tile TGreen iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-columns'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile 7&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;a href='?page_id=87'  class='tile TOrange t2x iconmain '&gt;&lt;div class='boxContent'&gt;&lt;i class='icon-reorder'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class='tilename '&gt;&lt;div class='name'&gt;Tile Large&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    /* General tile settings */
  .tile{ display:block;  float:left;  background-color:#525252;  width:150px;  height:150px;  cursor:pointer;  text-decoration:none;  color:#fff;  overflow:hidden;  position:relative;  font-weight:300;  font-size:11pt;  letter-spacing:0.02em;  line-height:20px;  margin:0 10px 10px 0;  overflow:hidden}
  .tile:hover{ outline:3px #3a3a3a solid}
  
  
  /* Tile responsive setting. */
  @media (min-width:1025px){
      .wrapper{width:1024px}
  }
  
  .wrapper{margin-left:auto; margin-right:auto}
  .wrapper.c2{width:400px}
  .wrapper.c3{width:600px}
  .wrapper.c4{width:800px}
  .wrapper.c5{width:1000px}
  .resimgicon {max-width:62px;height:auto;}
  .tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;}
  .tile{ width:157px;  height:157px}
  .tile.t2x{ width:324px}
  .tile.t2x .boxContent{ width:324px}
  
  @media (max-width:640px){
      .wrapper{margin-left:auto; margin-right:auto}
      .wrapper.c2{width:324px}
      .wrapper.c3{width:491px}
      .wrapper.c4{width:658px}
      .wrapper.c5{width:785px}
      .resimgicon {max-width:64px;height:auto;}
      .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;}
      .tile{ width:147px;  height:147px}
      .tile.t2x{ width:304px}
      .tile.t2x .boxContent{ width:304px}
  }
  
  @media (max-width:360px){
      .wrapper{margin-left:auto; margin-right:auto}
      .wrapper.c2{width:184px}
      .wrapper.c3{width:281px}
      .wrapper.c4{width:378px}
      .wrapper.c5{width:435px}
      .resimgicon {max-width:38px;height:auto;}
      .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;}
      .tile{ width:77px;  height:77px}
      .tile.t2x{ width:164px}
      .tile.t2x .boxContent{ width:164px}
  }
  </code></pre>
  
  <p>I don't like this CSS because I don't like to work with a fixed tile and wrapper size. This create a left and right (auto) marging. That not a problem for big sreen but it's useless on a phone or tablet screen.</p>
  
  <p>What should I do tho create a tile system with column without having to a fixed wrapper width ? Is there a better way to generate this kind of tile ?</p>