Displaying divs on multiple rows with custom limitations - html

Question

I am trying to place 6 boxes, as a small exercise to understand how to do it. I want these 6 boxes to be divided in 4 boxes on a row and then 2 on the second one, and I want to do it with the display feature in CSS so that is not applicable only for this case. This is what I have been trying.
https://gyazo.com/f64788cdf85d263e56452c1412fdcfb0?token=f6c45c6813c3fc47addb63483cee3f6a
.parent{
display: flex;
flex-wrap: wrap;
}
.parent-wrapper {
height:100%;
width:100%;
border: 1px solid black;}
.child {
width: 300px;
height: 200px;
background-color: green;
border: 1px solid red;
margin: 5px;
flex: 1 0 21%;
}

Answer 1

You could use display: flex.
HTML:
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS (EDITED):
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex div {
height: 200px;
background-color: green;
border: 1px solid red;
box-sizing: border-box;
/*flex: 1 0 23%;*/
width: 24.1%;
margin: 5px;
/*margin-bottom: 5px;*/
}
The output is the following:

Answer 2

Not sure if you mean this but what I understood from your question:
HTML:
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
</div>
</div>
</div>
CSS:
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}

Answer 3

If you want to use the display: grid the solution could look like this:
https://jsfiddle.net/uvrjs7op/
<div class='Wrapper'>
<div class='Item-A'></div>
<div class='Item-B'></div>
<div class='Item-C'></div>
<div class='Item-D'></div>
<div class='Item-E'></div>
<div class='Item-F'></div>
</div>
.Wrapper {
Display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50px 50px;
Background: orange;
}
.Item-A{
grid-column-start: 1;
grid-column-end: 2;
Background: Green;
}
.Item-B{
grid-column-start: 2;
grid-column-end: 3;
Background: blue;
}
.Item-C{
grid-column-start: 3;
grid-column-end: 4;
Background: red;
}
.Item-D{
grid-column-start: 4;
grid-column-end: 5;
Background: brown;
}
.Item-E{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
Background: yellow;
}
.Item-F{
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
Background: purple;
}

Answer 4

An easy solution will be
Solution
#wrapper {
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 5px;
width:100%;
}
#wrapper > div {
margin:10px;
background-color:#bada55;
}
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
<div id="fourth">fourth</div>
<div id="fifth">fifth</div>
<div id="sixth">sixth</div>
</div>