CSS layout positioning boxes-CodePudding

Is it possible to achieve this layout without dividing it into 3 independent rows?

Like for example to be 1 row with multiple columns and to be like in the codepen?

https://codepen.io/konstantin97/pen/OJxXVLE

.box-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -15px;
}

.box-col {
  padding: 15px;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

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

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

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

CodePudding user response：

you can use grid layout if you know how to use grid, use (grid-area) to specify exactly area of each element to reach your goal. if you don't know about grid layout use this link to learn it. https://css-tricks.com/snippets/css/complete-guide-grid/

CodePudding user response：

additional question , do you need the distance between the blocks to be equal ? If not you can try and inline styling to the first 2 blocks adding margin-left on the first block and margin-right to the second block . All bocks should also have style="display:inline-block" to ensure they align horizontally. will try and also provide a code example shortly !

CodePudding user response：

I added flex-wrap: wrap. See if that meets your "responsive" needs:

.box-row {
  display: flex;
  flex-wrap: wrap;              /* added */
  align-items: center;
  justify-content: center;
  margin: -15px;
}

.box-col {
  padding: 15px;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

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

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

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