CODEWITHSUNDEEP
cssreactjs
Andrés Montoya
Andrés Montoya

Reputation: 4427

Calculate space among elements to put in the right position the element

This is the final result:

enter image description here

As you can see in the pic, each line in blue is separated by each element.

I want to try this, I have already designed the elements:

enter image description here

But I don't know how to put in the right place each line, here's a complete example:

https://codesandbox.io/s/stoic-pond-luh0l

The way I'm trying to solve this is with this line:

<FlowDivider style={{ left: 240 * index + 1 }} />

But I don't know what's the right operation for this problem... Thanks!

Upvotes: 0

Views: 114

Answers (1)

thigrand
thigrand

Reputation: 123

First of all, you should put styles in classess instead of style attribute.

Back to the question: I have two ideas for that task.

  1. Just separate icons from the descriptions. And it will be easy. Just use flex and combine icons and separators.
  2. Set fixed width for the section with cards. Create section with separators outside of the static flow. Set the same width for separators section and use flex to set equal gaps. (assumption is that all cards has the same layout)

But i prefere to use first method. It's easier to resolve and manage.

P.S. If you ask just for math algorithm: It's not that easy, because you have changeable card width. That's your constants which you need to include in your algorithm: icon width: 50px, padding from both card sides: 30px. Variables which you need to include: gaps between cards(15-35px), cards width minus icon width(it's hard, because it's relative, and you don't have that information). So to fulfill your idea you need to get card width, calculate distance between two icons, and than you will know how much space you need between separators. Soooo, i don't recommend that approach;)

I don't use grid lately, so i'm not able to give you easy answer with grid.

Upvotes: 1

Related Questions