Создание макета divs

Question

Я хочу создать макет divs как: Проблема в том, что мне нужно создать его в строке, я имею в виду, что это будут сообщения, а последние самые большие в центре, а другие 4 находятся на стороны. Я буду использовать запрос, поэтому мне нужно создать таким образом (я не могу получить 5 погружений и каждый с собственным css).

Мой код: https://jsfiddle.net/kys2qzne/

<div class="grid-all" > 
    <div class="grid-item" style=" background-color: blue;"></div> 
    <div class="grid-item" style=" background-color: yellow;"></div> 
    <div class="grid-item height2" style="clear: both;"></div> 
    <div class="grid-item" style=" background-color: green;"></div> 
    <div class="grid-item" style=" background-color: black;"></div> 
</div> 

Answer 1

Просто простое решение, используя float надеюсь, что это помогает. Спасибо.

Отредактировано со своим последним комментарием. используя position property и nth-child css свойства.

.grid-all{ 
 
    position:relative; 
 
    width:400px; 
 
} 
 
.grid-item{ 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.height2{ 
 
    width:200px; 
 
    height:200px; 
 
    background:red; 
 
    position:absolute; 
 
    top:0px; 
 
    left:100px; 
 
} 
 
.grid-item:nth-child(4){ 
 
    position:absolute; 
 
    right:0px; 
 
    top:0px; 
 
} 
 
.grid-item:nth-child(5){ 
 
    position:absolute; 
 
    right:0px; 
 
    top:100px; 
 
}

<div class="grid-all" > 
 
    <div class="grid-item" style=" background-color: blue;"></div> 
 
    <div class="grid-item" style=" background-color: yellow;"></div> 
 
    <div class="grid-item height2" style=""></div> 
 
    <div class="grid-item" style=" background-color: green;"></div> 
 
    <div class="grid-item" style=" background-color: black;"></div> 
 
</div>

Answer 2

Это может быть решением.

.grid-all{ 
 
width: 100%; 
 
overflow: hidden; 
 
} 
 

 
.grid-item{ 
 
    width: 100%; 
 
    padding-top:25%; 
 
    height: 120px; 
 
    background-color: red; 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 

 
.height2{ 
 
    width: 100%; 
 
    height: 240px; 
 
} 
 

 
.grid-col { 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
.grid-col-big { 
 
    float:left; 
 
    width: 50%; 
 
}

<div class="grid-all" > 
 
    <div class="grid-col"> 
 
    <div class="grid-item" style=" background-color: blue;"></div> 
 
    <div class="grid-item" style=" background-color: yellow;"></div> 
 
    </div> 
 
<div class="grid-col-big"> 
 
    <div class="grid-item height2" style="clear: both;"></div> 
 
</div> 
 

 
<div class="grid-col"> 
 
    <div class="grid-item" style=" background-color: green;"></div> 
 
    <div class="grid-item" style=" background-color: black;"></div> 
 
</div> 
 
</div>