Buggy grid with container layout.
I've setup a site with the container layout as shown in https://youtu.be/c13gpBrnGEw?si=y7HnB4eeG-uhUsds.
But I had to include a sidebar. So I've added that in.
The issue comes now with a .full class it won't flow all the following elements anymore. And enabling the grid debug lines it shows many lines.
It happens in Firefox. I'm not sure why it happens.
https://beta.ohlijf.com/methode
Code: https://github.com/dxlbnl/ohlijf/blob/develop/src/app.css#L161
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
OhLijf
Ervaar de vrijheid van een lichter leven met OhLijf. Ontdek hoe wij mensen met chronische klachten begeleiden naar een leven vol energie en vrijheid.
GitHub
ohlijf/src/app.css at develop · dxlbnl/ohlijf
De website van ohlijf. Contribute to dxlbnl/ohlijf development by creating an account on GitHub.
6 Replies
Well that's interesting 😅
I think I know what the issue is, but the devtools, even in chrome, are not happy with me at the moment, lol.
So, with how it's implemented, it seems that while it's working, Chrome is generating almost 10000 grid lines to make it work 😆
the image is after that
I think the idea of having a main content area, plus a sidebar, but also being able to go full-width, is a little incompatiable tbh. Chrome is having to add all those extra grid lines to make space for the image to follow after, whereas Firefox isn't handling it.
But it makes sense, because, let's say you placed that
full-width higher up... say after the h2... I mean, it "works" in chrome, but you end up with a giant gap in the content (which makes sense) (or even more overflowing content in FF, because it's not generating the extra grid lines). goes hard lol
also just make another grid to go inside "content" 🤔
I guess it's better to have 2 nested grids. Or a subgrid.
It guess it makes sense that the browser creates 10000 grid lines. Too bad span x doesn't work for me.
I think the best solution would let us use the .full or .breakout unless there's a sidebar in the way. And even flow under the sidebar when possible.
I hadn't noticed that on the .sidebar, but I see why you needed something like that.
If you want a section that has a sidebar, I'd do it as something nested... you could even keep all the grid lines you have now, and use subgrid if you wanted to.