Erstellen von Layouts von divs

Question

Ich möchte Layout von Divs wie erstellen: Das Problem ist, ich muss es in einer Zeile erstellen, ich meine, es wird Beiträge und die letzte ist die größte in der Mitte und andere 4 sind auf der Seiten. Ich werde Abfrage verwenden, deshalb muss ich auf diese Weise erstellen (ich kann nicht 5 Tauchgänge und jeder mit eigenen CSS).

Mein Code: 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

Nur einfache Lösung mit float hoffen, es hilft. Vielen Dank.

Bearbeitet mit Ihrem letzten Kommentar. mit position property und nth-child CSS-Eigenschaften.

.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

Dies kann eine Lösung sein.

.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>