Search code examples
htmlcssresponsive

Align images responsive in a flower shape

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.

Image Container

Solution

  • 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 class="container">
  <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.