CSS Каменная кладка с переменной шириной плитки

Question

Я хочу создать сетчатую макетную макетную макет, но я хочу, чтобы моя первая плитка была больше (ширина и высота). Это вызывает множество проблем с родительским div.

Я пробовал flexbox и плавал, до сих пор поплавки работали лучше всего, но все равно не могут сделать это правильно.

С поплавками проблема заключается в том, что родительский div имеет слишком большое пустое пространство справа, и это мешает центрированию.

Вот мой код: https://jsfiddle.net/6c21mnnd/1/

HTML:

<div id="content"> 
    <div class="tile tile-big"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
</div> 

CSS:

#content 
{ 
    margin: 0 auto; 
    width: 80%; 
} 

#content:after 
{ 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
} 

.tile 
{ 
    width: 20em; 
    height: 13em; 

    float: left; 

    margin: 0.5em; 

    background-color: #2E3641; 
} 

.tile-big 
{ 
    width: 41em; 
    height: 27em; 

    background-color: #2E3641; 
} 

Answer 1

Мое предложение было бы использовать Flexbox, используя Flex-обертку: завернуть на контейнере, флекс -grow: 1 на более мелкие плитки и flex-grow: 2 на больших плитах

CSS :

#content 
{ 
    margin: 0 auto; 
    width: 80%; 
    display: flex; 
    flex-wrap: wrap; 
} 

.tile 
{ 
    width: 20em; 
    height: 13em; 
    flex-grow: 1; 
    margin: 0.5em; 
    background-color: #2E3641; 
} 

.tile-big 
{ 
    width: 41em; 
    height: 27em; 
    flex-grow: 2; 
    background-color: #2E3641; 
}