My Flexbox grid went mad

It was working perfectly for many days, but today I open my code editor and see it renders 8, instead of 12 columns. Here is the codepen. Meanwhile I’m trying to figure out for an hour what causes this.

Alright, I’m realizing it’s connected to the padding set on .grid__item. But then again, why earlier it was not making any problems.

Probably you should set

.grid__item {
     box-sizing: border-box; 
}

or you can change

.grid {
	display: flex;
	flex-wrap: no-wrap;
	justify-content: center;
	padding: 0 ($gutter-s/2);
}

or

You can set

.l-1 {
     flex: 1
}

In last case you can remove width 8.33%.

Any suggested solution should work

Can’t comment without knowing what the page is intended to be or behave like. Only the (s)css does seem a bit over-complex for what it is.

Nothing worked from the suggested solutions. I mean no-wrap technically works, but there is some previous problem which off-centers the grid a bit towards the right.

What I want to achieve is to have a nicely aligned 12 columns grid on large and medium viewports, and 6 on mobile.

What I can see is the calculations are somewhat wrong, although in theory they are right. Something pushes the grid columns to to beyond 100%, but I have no idea what.

Did you try the box-sizing rule as that fixes it for me?

I use that as a default on all my pages these days.

Let flex do the number crunching, that’s what it’s for.

2 Likes

I had it set, but in the wrong place, only on my HTML tag. Now I set it as per the CSS-tricks article, and that saved my day. Thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.