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.
source to share
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.
source to share
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.
source to share