[semi-solved] unwanted 1fr gaps

https://codepen.io/sdmedworld/pen/emYBOaJ
window-resizing required – please see the above [spicy] codepen.

I am trying to achieve a versatile layout component using a grid-template.
Regarding the ruleset for

layout-container

layout-container

I thought, that the calculation which subtracts one gap-width from the content-width, would prevent the blowout and overflow – but it does not.

After back and forth, I don't know why anymore.

The issue that comes along with this, is that the "outside" gaps towards the 1fr columns mingle with the inline-padding of the layout-container. Now where have I taken a wrong turn?

Ἔ

ἔρως•2/26/25, 3:40 PM

bootstrap subtracts the margin from the left and right in the .row elements

Ἔ

ἔρως•2/26/25, 3:40 PM

it literally has -15px on each side

Ἔ

ἔρως•2/26/25, 3:40 PM

that can cause weird stuff to happens

SimonOP•2/26/25, 3:44 PM

The pen-name is irrelevant and it is all disconnected from any environment. The issue is visible and presented by the codepen.

Sorry for the misleading content there.

Chris Bolson•2/26/25, 5:36 PM

I don't pretend to fully understand all the calculations that you are doing here:

However, playing around with the values, it you don't subtract 1 from the number of columns I think that it gets closer to what you (probably) want.

Sorry if I miss-understood what you are trying to achieve.

CChris Bolson I don't pretend to fully understand all the calculations that you are doing here...

SimonOP•2/27/25, 7:41 AM

Thanks for your time.
Maybe I need to wind back once more and set it up without variables – logically it does not make sense not having to subtract some space.
I will update the pen and share it again within the next 6 hours.

The concept of the template is fairly simple tho. In the case of desktop it produces , arranging all children to the 12col-areas, except when they have additional classes, allowing to move them around (or full-bleed).

Hear you soon.

edit
I have updated the pen and removed all the fancy to make it more readable – https://codepen.io/sdmedworld/pen/emYBOaJ

It seems like the issue appears mainly, when there is not enough space to fit all the columns and gaps which makes sense. Feel like I need to add a layer of minmax somewhere.

I had intended to subtract one gap space because there is one less gap than you have columns, but err.
My math is not mathing.

Chris Bolson•2/27/25, 9:35 AM

Maybe, rather than subtracting one gap, you should really be adding one as you actually have 2 more columns that the 12 that you are defining for the main (non-bleed) area so in reality you have 13 "gaps"

SimonOP•2/27/25, 9:45 AM

oh yeah, because adding one reduces the width per column. fck sake.

SimonOP•2/27/25, 9:52 AM

Any ideas how I could prevent the most outer gaps from dictating the space between the browser window and the content-width?

Removing the for handheld sizes would do it, kind of. But then I lose the possibility to declare "full-bleed elements" for those viewports.

SimonOP•2/27/25, 9:55 AM

Kind of a new question, but it was baked within the original issue ([semi-solved] unwanted 1fr gaps).

Chris Bolson•2/27/25, 10:16 AM

Setting the gap to 0px on smaller viewports might help but that rather assumes that the content (for handheld sizes) would all be in a single column and you don't "need" the gaps.

SimonOP•2/27/25, 10:24 AM

It is a bit awkward, yeah.

Considering tablet sizes, I maybe could subtract the gap width from the inline-padding. The only issue appears, if the gap is wider than the padding would be. But that should be fairly rare.
Considering phone sizes you are right

gaps likely are redundant and maybe could be replaced by padding/margin or even moving to flex

edit
the codepen has been updated back to its original quality.

SimonOP•3/3/25, 1:24 PM

I've opened a discussion issue on this – https://discord.com/channels/436251713830125568/1346052354373324862
Feel free to opt-in