I am exploring the functionalities of CSS and responsive design. To better understand how it works, I created a simple example which can be accessed here.
This demonstration showcases a basic tile template.
My goal is to display my tiles in 2, 3, 4, or more columns depending on the layout. By changing the class of the div "wrapper" to c2, c3, c4, you can adjust the number of columns in this sample.
The key here is that my tiles are set to float left, and the classes c2, c3, c4 modify the width of the wrapper accordingly. Refer to the HTML and CSS files or visit JSFiddle for more details.
HTML
<div class="wrapper c2"> <!-- try with c3, c4-->
<div class="scrollable">
<div class="webbutiles">
<a href='?page_id=77' class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a>
<a href='?page_id=85' class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a>
<a href='?page_id=89' class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a>
<a href='?page_id=91' class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a>
<a href='?page_id=93' class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a>
<a href='?page_id=95' class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a>
<a href='?page_id=97' class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a>
<a href='?page_id=87' class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a>
</div>
</div>
</div>
CSS
/* 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}
}
I find working with fixed tile and wrapper sizes limiting. The left and right (auto) margin that appears isn't necessary on smaller screens like phones or tablets.
Is there a way to create a flexible tile system with variable column numbers without relying on fixed wrapper widths? Any suggestions on improving this tile generation method?