Responsive tile layout with flexbox
I want to create a tile layout (similar to the metro style tile layout or whatever it is called in Windows 8). So, I have some tiles / blocks, some are square, some may be twice as large as square, and some may be twice as wide. So far so good, but I have a responsiveness issue that I think flexbox solved for me ... but I may have been wrong.
The boxes are currently arranged as follows (arrows show where boxes should "flow"): 
But what I want them to look like is: 
Or even this if the large tile is placed somewhere in the middle (note: the numbering can also be slightly different, for example, the margins to the left of the large tile can be from 1 to 4, and then the large tile can be number 5 if this is easier to do): 
This is the code I have (see http://codepen.io/anon/pen/oXmraK ):
<div class="container">
<div class="bigbox">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="widebox">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
<div class="box">Box 11</div>
<div class="box">Box 12</div>
<div class="box">Box 13</div>
<div class="box">Box 14</div>
<div class="box">Box 15</div>
<div class="box">Box 16</div>
<div class="box">Box 17</div>
<div class="box">Box 18</div>
<div class="box">Box 19</div>
</div>
And the CSS:
.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
}
.box, .bigbox, .widebox {
background-color: olive;
width: 100px;
height: 100px;
margin: 5px;
}
.bigbox {
background-color: olive;
width: 210px;
height: 210px;
}
.widebox {
background-color: olive;
width: 210px;
height: 100px;
}
Any ideas on how to achieve the desired layout? Don't know if this is possible without JS, but I hope it is.
Note. My solution below is suboptimal and should be ignored. It was created before I learned anything about CSS flex or grid, both of which provide a complete and effective solution to the problem. I would remove it, but the accepted answers cannot be removed.
You can achieve this with float: left
and you don't need flex
box.
http://jsfiddle.net/jqk207cz/3/
.container {
/* REMOVE THIS BLOCK
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch; */
}
.box, .bigbox, .widebox {
background-color: olive;
width: 100px;
height: 100px;
margin: 5px;
float: left; /* NEW */
}
.bigbox {
background-color: olive;
width: 210px;
height: 210px;
}
.widebox {
background-color: olive;
width: 210px;
height: 100px;
}
UPDATE (based on revised question)
One solution for getting four boxes at the start is to create a separate container for this section.
It's still responsive and clean CSS.
http://jsfiddle.net/jqk207cz/4/
Not sure why you would like to use it flex
here.
By removing the properties flex
and setting these fields as float: left;
, is your problem fixed?
http://jsfiddle.net/RedBreast/owbe046z/
.container {
/* Removed flex properties */
}
.box, .bigbox, .widebox {
background-color: olive;
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
Hope for this help.