Grid Offset

Question

Suppose there is a certain parent with a fixed width and his daughter. Let it be an unnumbered horizontal list.

List items have a minimum width and indent between them. If we have n elements of the list, then they are arranged inside the element along a certain grid. The problem is that the width of the daughter is unknown and may exceed the minimum width.

It is also necessary in this case to build elements along the grid.

Tell me which way to dig. And then something finally comes to mind.

For clarity, an example. Imagine that the blocks in the first row have the same distance from each other and are aligned on a grid.

UPD

Here I was rightly reproached with the incorrect formulation of the task. Well, I don’t understand what needs to be done, respectively; I don’t understand how to explain it. I'll try to clarify. I am trying to implement a functional for my daughter: li {min-width: 20%; float: left;}

if width> 20%, element.style{width:40%}

if width> 40%, element.style{width:60%}

if width> 60%, element.style{width:80%}

if width> 80%, element.style{width:100%}

I just really don’t understand how to start at all and how to approach. Therefore, such a mess with the wording.

Although now formulated. It seems to become clearer. It is necessary to obtain the width of the element, compare it with the fixed width of the parent, and depending on the result obtained, prescribe its style. Thank you Sasha Omelchenko for organizing thoughts.

But something from my decision still smacks of a wild crutch and the load on the user.

It turns out that the grid is formed by elements from the first line and everything will not necessarily look as beautiful as in your picture (after all, the width of the daughter is unknown even at the very beginning) and then it is completely incomprehensible by what elements to build the grid.
It is assumed that in the first line the width of the elements is equal to the min-width value.
In the example, the first line is needed just to show the specified grid in 5 columns and it was clear where the points on which to build elements are located.
In 99% of cases, the width of the block will not differ from the expected.
But, if the client suddenly writes “5–10 minutes in full moon” instead of “5–10 minutes”, then all subsequent elements should shift to the next starting position ”

Vadim Leshkevich Vadim Leshkevich 2,902 6 23 · Accepted Answer · 2016-11-25T16:57:53

If I understood correctly, then something like this can be done without indents, with indents to continue the idea, I think the logic is clear.
children[i].style.background = 'red'; - this highlighted different widths in different colors for clarity
margin-left: -.25em; - this is to remove the right indent from inline elements

 var parent = document.getElementById('parent'); var parentWidth = parent.clientWidth; var children = document.getElementsByTagName('li'); var childrenWidth; for (var i=0; i<children.length; i++){ childrenWidth = children[i].clientWidth; if(childrenWidth/parentWidth <= 0.2){ children[i].style.width = parentWidth*0.2 + 'px'; children[i].style.background = 'red'; }else if(childrenWidth/parentWidth <= 0.4){ children[i].style.width = parentWidth*0.4 + 'px'; children[i].style.background = 'green'; }else if(childrenWidth/parentWidth <= 0.6){ children[i].style.width = parentWidth*0.6 + 'px'; children[i].style.background = 'blue'; }else if(childrenWidth/parentWidth <= 0.8){ children[i].style.width = parentWidth*0.8 + 'px'; children[i].style.background = 'yellow'; }else if(childrenWidth/parentWidth <= 1){ children[i].style.width = parentWidth + 'px'; children[i].style.background = 'grey'; } }

 ul{ width: 500px; box-sizing: border-box; padding: 0; } li{ display: inline-block; margin-left: -.25em; background: red; }

 <ul id="parent"> <li>Один</li> <li>Два два номер два</li> <li>Три три три</li> <li>Четыре</li> <li>Пять пять очень длинный пять</li> <li>Шесть</li> <li>Семь длинный семь</li> </ul>

And the main thing turned out a bit more elegant than I imagined it to be.
Actually, I asked to be guided on the right path and suggest how to implement it through, and you did all the work for me and provided a good, working example.
@ IvanMaksimov If it helped, there is a tick "Accept the answer" =)

Grid Offset

1 answer 1

More articles: