.box { width: 160px; height: 160px; border: 1px solid black; } .big { width: 100px; height: 100px; display: inline-block; background: red; } .small { width: 50px; height: 50px; display: inline-block; background: #000; } 
 <div class="box"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="small"></div> </div>

    2 answers 2

    You can add wrap float: left for a large square

     .box { width: 160px; height: 160px; border: 1px solid black; } .big { width: 100px; height: 100px; display: inline-block; background: red; float: left; margin: 0 4px; } .small { width: 50px; height: 50px; display: inline-block; background: #000; } 
     <div class="box"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="small"></div> </div>

    UPD: You can add another margin for even indentation.

    • @Cristian then mark as accepted - webDev_

    You can use CSS Grid layout for this kind of markup:

     .box { border: 1px solid black; /* задаём grid-контейнер, который не будет растягиваться на всю ширину строки */ display: inline-grid; /* задаём 3 столбца по 50px */ grid-template-columns: repeat(3, 50px); /* задаём 3 строки по 50px */ grid-template-rows: repeat(3, 50px); /* задаём отступы между строками и стобцами в 5px */ grid-gap: 5px; } .big { background: red; /* данный элемент будет растягиваться на 2 стобца */ grid-column: span 2; /* данный элемент будет растягиваться на 2 строки */ grid-row: span 2; } .small { background: #000; } 
     <div class="box"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="small"></div> </div>

    For this markup to work in IE10 + you should use the old syntax. This means that you need to set the position of each cell manually (otherwise the elements will overlap each other in the first cell) and emulate the padding between cells with additional rows and columns (since IE does not support the grid-gap ), the repeat function does not work in IE. For the demonstration, I used similar properties in the old and new CSS Grid Layout specifications for different browsers to make it easier to maintain the code. Did not specify the value of -ms-grid-row: 1 and -ms-grid-column: 1 , since these are the default values. Demonstration:

     .box { border: 1px solid black; display: -ms-inline-grid; display: inline-grid; -ms-grid-columns: 50px 5px 50px 5px 50px; grid-template-columns: 50px 5px 50px 5px 50px; -ms-grid-rows: 50px 5px 50px 5px 50px; grid-template-rows: 50px 5px 50px 5px 50px; } .big { background: red; -ms-grid-column-span: 3; grid-column: 1 / span 3; -ms-grid-row: 3; -ms-grid-row-span: 3; grid-row: 3 / span 3; } .small { background: #000; } .small:nth-child(2) { -ms-grid-column: 3; grid-column: 3; } .small:nth-child(3) { -ms-grid-column: 5; grid-column: 5; } .small:nth-child(5) { -ms-grid-column: 5; grid-column: 5; -ms-grid-row: 3; grid-row: 3; } .small:nth-child(6) { -ms-grid-column: 5; grid-column: 5; -ms-grid-row: 5; grid-row: 5; } 
     <div class="box"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="small"></div> </div>