Align images responsive in a flower shape-CodePudding

I have 4 icons which should align like the image below.

I've tried to first put them into a <div> with a class which controlls the position. Now with my knowledge I would give every each image a absolute position, but that will not work, because on every res. my images are not together and just all over the place. How can I align my images like a "flower" in a responsive way.

CodePudding user response：

For a responsive layout you can use CSS grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 50vw;
  aspect-ratio: 3 / 2;
}

.container>div {
  aspect-ratio: 1 / 1;
  border: 1px solid black;
  box-sizing: border-box;
}

.container>div:nth-child(1) {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.container>div:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.container>div:nth-child(3) {
  grid-column: 3;
  grid-row: 2 / span 2;
}

.container>div:nth-child(4) {
  grid-column: 2;
  grid-row: 3 / span 2;
}

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

Obviously set the container width to what you require.

This snippet sets the divs in a clockwise fashion starting at the left most div.

CodePudding user response：

I have just recreated what you posted above. I can help you when you specify what you really need

.main {
  display: flex;
  height:100%;
  align-items:center
}
.sec{
  height: 50px;
  width: 50px;
  border:1px solid black
}

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

CodePudding user response：

Need to create 3 columns wrapped in a flex container and aligned vertically

.wrapper {
  display: flex;
}

.column {
  align-items: center;
}