Hi Dan,
unfortunately, I need your help again. In this simple web page (elementsapp://downloadDocument/0MqjMHW7W3gt) the elements in - Rechte Spalte - do not adapt to the column width. In the 2XL view, everything is fine, but even in the XL view, some of the text goes over the border. What am I doing wrong here?
You are probably setting a fixed width on the text (flex or reveal) items. Can you share the project (via Elements Cloud) so I can take a look in more detail?
@Berthold On your nested grid in the right column, you have the gap set to theme spacing 12 (img 1)
Deselect theme spacing (mask and brush button) and set it to an arbitrary px value. Or a much lower theme spacing like 3 (img 2)
Those spacing add up over 12 columns as you have it set thats 11 x 48px with a theme spacing of 12, hence pushing the grid width out of bounds.
Hi Dan,
the link is in the error description.
Hi Doobox,
Thanks for the help, but it doesn’t work for me. In my project the value of Gap is 5 and not 12, but also the change from 5 to 20px does nothing for me.
Based on your suggestion, I have set the grid to 2 columns and the two columns only have one column each. But there is still no change.
Wrong grid! It’s the grids you have nested, in the right column. The ones that hold the icons and tests to the right. You need to do them all. This still isn’t an ideal layout but it will get you moving.
Hi Doobox,
now I have understood it in principle, but unfortunately I have not yet solved my problem when I look at the different display sizes. I assumed that you change the width of the individual columns in a grid by assigning a different number of columns to each column. In order to fully utilize the width of the parent container, the sum of all columns must be 12. This does not seem to be the right way.
What I want is that the icons in the right-hand column do not change in size and only the text in the width adapts to the screen size. To do this, column 1 of the grid must be able to have a fixed width and I just can’t manage that.
But what about the text above nested grids? It doesn’t adapt to the grid either.
Thanks again for the support. I can only test further tomorrow.
That’s correct. It’s just a matter of working out what happens at each device size in your page.
Hopefully you’re aware that you can change the values for each device size by hitting the dot next to the value (not all things have the dot by the way).
Actually that’s correct isn’t quite right. That’s the way most intuitively think of it, but your free do do what you like. For example you could set the grid to have 4 columns, and then set say the first child grid item to 1 column, and the second to 3, to fill the width. You don’t even always have to fill the width. It’s very flexible.
Take your example where you have the nested grids holding your icons and texts to the right. each grid has two items, your icon, and your text. Currently you have the grid set to 12, the icon to occupy 2, and the text occupies 10.
That works exactly the same if you set the grid to 6, your icon to occupy 1, and the text occupies 5. Make sense?
Also means there’s less chance of the horizontal gap mounting up and breaking your content, as there are now only 5 gaps instead of 11.
Here’s a basic layout project file that achieves the layout I think your trying to get.
This thread inspired me to have a go at rebuilding this layout, but with fewer components 
As always, there’s many ways you could build this layout in Elements - neither is more correct than the other, just depends on the design/use case!
Here’s a quick video of me explaining how I might build this layout:
And here’s a link to the project in the video: elementsapp://downloadDocument/4kUD9LE0M9fv
Hope that was helpful and/or informative in some way 
Hi Doobox,
thank you very much for the example. That’s exactly what I wanted to achieve. Now I’ll see where I made the crucial mistakes.
Switch to flex, as in Bens video and project file above 
