Как я могу создать систему плитки?

Question

Так я создаю Responsiv Сайт, в котором я хочу, чтобы иметь Tile системы, как на картинке выше. К несчастью, я просто не могу сделать это правильно.

Это мой текущий ATTEMPT. Использование Flexbox

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 100%; 
 
    height: 30px; 
 
    display: -webkit-box; 
 
    display: -moz-inline-box; 
 
    display: -ms-inline-flexbox; 
 
    display: -webkit-inline-flex; 
 
    display: inline-flex; 
 
    -moz-justify-content: space-around; 
 
    -ms-justify-content: space-around; 
 
    justify-content: space-around; 
 
    -webkit-flex-flow: row wrap; 
 
    -moz-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    background: #eaeaea; 
 
    padding: 5px; 
 
    width: 130px; 
 
    height: 90px; 
 
    margin-top: 0px; 
 
    margin-left: 0px; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.flex-item:hover { 
 
    background: #d9d9d9; 
 
} 
 
.flex-item-stop { 
 
    background: crimson; 
 
    padding: 5px; 
 
    width: 130px; 
 
    height: 90px; 
 
    margin-top: 0px; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.flex-item-stop:hover { 
 
    background-color: #bb1133; 
 
} 
 
#Menue { 
 
    position: fixed; 
 
    left: 0; 
 
    height: 25%; 
 
    width: 650px; 
 
    float: right; 
 
    padding: 25px 0; 
 
    margin: -25px 0; 
 
    display: inline-flex; 
 
    display: -moz-inline-flex; 
 
    display: -webkit-inline-flex; 
 
    justify-content: space-around; 
 
    -moz-justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    flex-flow: column wrap; 
 
    -moz-flex-flow: column wrap; 
 
    -webkit-flex-flow: column wrap; 
 
}

<div id="Menue"> 
 
    <div class="flex-container"> 
 
    <div class="flex-item">Vanilla</div> 
 
    <div class="flex-item">Citrus</div> 
 
    <div class="flex-item">Bananasplit</div> 
 
    <div class="flex-item">Gum</div> 
 
    </div> 
 
    <div class="flex-container" style="margin-top:10%;"> 
 
    <div class="flex-item">Sweden</div> 
 
    <div class="flex-item">Austria</div> 
 
    <div class="flex-item">Russia</div> 
 
    <div class="flex-item">Brazil</div> 
 
    </div> 
 
    <div class="flex-container" style="margin-top:10%;"> 
 
    <div class="flex-item">Positiv</div> 
 
    <div class="flex-item">Negativ</div> 
 
    <div class="flex-item">Neutral</div> 
 
    <div class="flex-item-stop">&nbsp;</div> 
 
    </div> 
 
</div>

Я просто не могу создать расстояние между плитками и мой результат, кажется, отличается в разных браузерах, особенно в Internet Explorer 11.
Что я также хотел бы иметь это что всегда должно быть 4 плитки в одиночной «линии», это возможно?

Теперь приходит мой вопрос: что именно мне нужно изменить в моем коде, чтобы выполнить такую ​​систему плитки?
Являются ли альтернативы Flexbox?

Любые примеры предложений приветствуются.

Answer 1

Вы можете попробовать что-то вроде этого:

.row{ 
 
display:table; 
 
content:''; 
 
clear:both; 
 
width:100%; 
 
} 
 
.item{ 
 
box-sizing:border-box; 
 
width:25%; 
 
border:1px solid white; 
 
height:100px; 
 
background-color:yellow; 
 
float:left; 
 
text-align:center; 
 
}

<div class="row"> 
 
<div class="item">Vanilla</div> 
 
<div class="item">Gum</div> 
 
<div class="item">Citrus</div> 
 
<div class="item">BananaSplit</div> 
 
</div> 
 
<div class="row"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div> 
 
<div class="row"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div>

Answer 2

уступи трещину:

HTML:

<div class="container"> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <!-- e.t.c... !--> 
</div> 

CSS:

.container{ 
    width: 100%; 
} 
.container > .inner-block{ 
    display: inline-block; 
    position: relative; 
    width: calc(25% - 13px); 
    height: 0; 
    padding-bottom: calc(25% - 13px); 
    margin: 5px; 
    background: blue; 
} 

JsFiddle: https://jsfiddle.net/r4w1v0dm/2/