Отображение div на нескольких строках с пользовательскими ограничениями

Question

Я пытаюсь разместить 6 коробок, как небольшое упражнение, чтобы понять, как это сделать.Я хочу, чтобы эти 6 блоков были разделены на 4 блока в строке, а затем 2 на второй, и я хочу сделать это с помощью функции отображения в CSS, так что это не применимо только для этого случая.Это то, что я пытался.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

Вы можете использовать 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;*/
}

Выводследующее:

Answer 2

Если вы хотите использовать дисплей: сетка, решение может выглядеть следующим образом: 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 3

Простое решение будет

Решение

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

Answer 4

Не уверен, что вы имеете в виду это, но что я понял из вашего вопроса:

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;
}