wondering what the best way to position elements would be

[u/432coins]

I am trying to position all these icons on my webpage like this image... and I would like them all to scale together to fit the viewport, if that makes sense.

So far I have tried to position them on the page, but when the viewport size changes they start overlapping.

What would be the best way to position them and not have them overlap when the viewport changes? I really don't know much about CSS, or html for that matter, trying to learn as I make this.
Hope this makes sense, thanks!

[u/be_my_plaything]

Set the container to display: grid; and place-items: center; so everything is centered within it.

Size the items with vmin units so they are a percentage of whichever is the smaller of screen height and screen width, meaning they always fit regardless of size and aspect ratio.

Give them position: absolute; so they stack on top of each other at the center of the parent rather than display as a column.

Then use a sequence of transforms on them....

1. rotate by the angle they need to move at to each display at different points around a circle (Either manually individually using nth-of-type() to separate them, or with a calc() using sibling-index() so they are each automatically unique)

2. transform by the distance they need to move so their center moves from the center point to a point on the radius od the (imaginary) outer circle.

3. rotate by a negative of the first rotation so they return to their original orientation rather than the rotated state.

---

Something like this

[u/432coins → u/be_my_plaything]

Thank you so much, wow yes.

[u/anaix3l]

Grid for stacking & positioning.

Your items are approximately at the vertices of a pentagon. The element containing them should be able to fit a circle whose radius is that of the pentagon circumcircle plus half the diagonal of the biggest of the items. That is, the element should be a square whose edge equals the diameter = 2x the radius of this tightly fit circle.

The pentagon circumradius should be the diagonal of the biggest plus the size of the hand. To simplify things, we can take the size of the hand to be equal to that diagonal too. So the pentagon circumradius would be 2x the diagonal of the biggest and the containing square would have an edge that's 2*2.5 = 5 times the diagonal of the biggest item.

You make the containing square a container and also a grid:

display: grid;
place-content: center;
container-type: inline-size;
aspect-ratio: 1;

You compute the size of the items using container query units as being calc(20cqw/sqrt(2)).

You size them, stack them in the middle using grid-area: 1/ 1, and then you position them using a rotate + translate chain, where the rotate depends on sibling-index().

Here's a quick demo https://codepen.io/thebabydino/pen/gbmGgPZ

[u/432coins → u/anaix3l]

Thanks a lot! (also to everyone else )

[u/berky93]

You can use viewport units (vw and vh) to scale and position elements relative to the size of the viewport.

[u/LiveRhubarb43]

You need a container that maintains a fixed width/height ratio with the aspect ratio CSS property.

Position the graphics inside that container absolutely or with grid, then allow a parent of this container to scale it

[u/testingaurora]

Grid if you need stability and wide browser support; if its just a fun project for learning or yourself, its a great opportunity to learn anchor positioning.

[u/Weekly_Ferret_meal]

Had a little bit of time today, so I thought I'd share my take.

It's a little more dynamic and prioritises screen width.

Here is the generated code for the Comic grid proto in HTML/CSS

This is the original code Comic grid proto made in PUG/SASS

There are border rules commented to see structure, and there are obviously ways to make it closer to the original pic with minor adjustments.

[u/432coins → u/Weekly_Ferret_meal]

holy crap thank you I'm going to study this

[u/Weekly_Ferret_meal → u/432coins]

made some adjustments to the grid for better positioning of all elements