html - Flexbox tile layout with consistent margins and alignment -

how might achieve following layout:

with following conditions:

1. the tiles of each row should equal in height highest element in row

2. the last tile in row should flush parent container (no gap)

3. the tiles can different width ratios (3 times one-third or one-third + two-thirds, etc)

4. the ordering of tiles unknown

5. no grid framework

6. modern browsers only

and following markup:

<div class="tile-wrapper">   <div class="tile-container">     <div class="tile third">1/3</div>     <div class="tile third">1/3</div>     <div class="tile third">1/3</div>     <div class="tile two-thirds">2/3</div>     <div class="tile third">1/3</div>     <div class="tile sixth">1/6</div>     <div class="tile sixth">1/6</div>     <div class="tile third">1/3</div>     <div class="tile sixth">1/6</div>     <div class="tile sixth">1/6</div>   </div> </div> 

this increasingly common layout can relatively achieved using flexbox , clever container markup.

a common problem tiled layouts maintaining consistent spacing , alignment between tiles of differing sizes across multiple rows. assuming 30px margin separating tiles, set margin-right: 30px on tiles , use nth-of-type selector remove margin-right of last tile in row.

however, isn't possible when relative sizes , order of tiles unknown. example, two-thirds tile next one-third tile won't conform same nth-of-type selector rule required remove margin of last tile row consisting of 3 one-third tiles.

a clever way around instead absord right-most tile's margin width of parent container. can setting outer-most div's width desired width (in case 90%) overflow: hidden, , set inner-container's width 100% plus width of tile margin; width: calc(100% + 30px). way, no matter tile in right-most position of row, tile sit flush edge of container.

to ensure tiles fit desired, set flex-basis proportion of row width we'd them occupy minus tile margin; .third { flex: 0 0 calc(33.33% - 30px); /* 1/3 tile */}

like so:

* {   box-sizing: border-box; } .tile-wrapper {   display: block;   position: relative;   width: 90%;   margin: 0 auto;   overflow: hidden; } .tile-container {   display: flex;   position: relative;   width: calc(100% + 30px);   flex-wrap: wrap; } .tile {   display: inline-block;   margin-right: 30px;   margin-bottom: 30px;   min-height: 200px;   line-height: 199px;   text-align: center;   border: 1px solid black; } .two-thirds {   flex: 0 0 calc(66.66% - 30px); } .third {   flex: 0 0 calc(33.33% - 30px); } .sixth {   flex: 0 0 calc(16.66% - 30px); } 

here's fiddle

note: work in modern browsers (chrome, safari, ff, ie11+). there's known bug in ie11 requires use long-hand flex-basis style attribute in order set calc() value.