0

I am trying to make something similar like the image below (first half) with flex boxes (Bootstrap 4).

enter image description here

However, as you can see in the second part of the image above and in the code (expand the snippet please) I cannot push the green square (number) 4 under number 1 (Red) and between number 2 (yellow) as the picture is showing. I mean, there is a gap between the red square and the green one and I want to delete it. 

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">



</head>

<body>

  <!--main-->
  <div class="container">
    <!--projects-->
    <div style="background-color:PINK" class="col-12">
      <div class="row">

        <div class="d-flex flex-wrap ">

          <div style="background-color: red; width: 370px; height: 258px; padding: 1.5rem; ">1</div>
          <div style="background-color: yellow; width: 370px; height: 516px; padding: 1.5rem; ">2</div>
          <div style="background-color: blue; width: 370px; height: 258px; padding: 1.5rem; ">3</div>
          <div style="background-color: green;  width: 370px; height: 258px; padding: 1.5rem; ">4</div>
          <div style="background-color: orange; width: 370px; height: 516px; padding: 1.5rem;">5</div>
          <div style="background-color: white;  width: 370px; height: 258px; padding: 1.5rem;">6</div>
          <div style="background-color: paleturquoise;  width: 370px; height: 258px; padding: 1.5rem;">7</div>
          <div style="background-color: purple;  width: 370px; height: 258px; padding: 1.5rem;">8</div>
          <div style="background-color: mediumaquamarine;  width: 370px; height: 258px; padding: 1.5rem;">9</div>
          <div style="background-color: mediumslateblue;  width: 370px; height: 258px; padding: 1.5rem;">10</div>

        </div>

      </div>
    </div>
  </div>

  <body>
Cœur
  • 37,241
  • 25
  • 195
  • 267

1 Answers1

0

For this design to work with flex-box you'd have to group 1, 4, 6, 8 in one flex box column. AFAIK it's not possible with flex box to achieve the results you're looking for without more than one container element.

Sandro
  • 1,051
  • 7
  • 15