Responsive tile layout with flexbox

Question

I want to create a tile layout (similiar to the metro style tile layout or what it's called of Windows 8). So I have some tiles/boxes, some are quadratic, some can be twice the sice and quadratic and some can have twice the width. So far so good, but I have an issue with responsiveness which I thougt flexbox would solve for me... but maybe I was wrong.

Currently the boxes are layouted like this (arrows show where boxes should "flow"):

But what I want it for them to look like this:

Or even this, if a big tile is placed somewhere in the middle (note: numbering can also be a bit different, e.g. boxes on the left of the big tile could be from 1-4 and then the big tile could be number 5, if this is more easy to do):

This is the code I currently 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 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 how to achieve the desired layout? Don't know if this is possible without JS but I hope it is.

Also see Freewall (jQuery based as well). I haven't been able to get this type of behavior from pure css — Bryce Guinta, Sep 06 '18 at 19:28

Michael Benjamin · Accepted Answer · 2019-06-19T13:47:51.427

Note: My solution below is suboptimal and should be ignored. It was crafted before I knew anything about CSS flex or grid, both of which provide complete and efficient solutions to the problem. I would delete it, but accepted answers cannot be deleted.

You can achieve this with float: left and don't need the 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 to get four boxes at the beginning is to create a separate container for that section.

It's still responsive and pure CSS.

http://jsfiddle.net/jqk207cz/4/

thanks, this solves scenario 1 but unfortunately not the also desired scenario 2 (see edit) where a bigger tile is not placed at the start, any ideas if this can be solved or would I need to make some heavy calculations and maybe placement with JavaScript? — Patric, Aug 07 '15 at 11:56
layout should be responsive. The boxes are generated dynamically from a list and so if I add new items or change their sizes the layout should always adapt and also if browser windows is resized etc. — Patric, Aug 07 '15 at 11:59

Responsive tile layout with flexbox

1 Answers1