How to use a grid layout for containers/wrappers but also have a one side bleed?
Following this tutorial about grid layout instead of wrappers from Kevin, I got a grid layout that works nicely with "full-width", "breakouts" and "normal width".
The problem is that I'm trying to make a "one-side-full-width", like this other tutorial from Kevin but the content inside of this new class/wrapper is not following the centered layout.
Here is a JSFiddle showing the problem.
I know that
grid-column: full-width-start / content-end make the container work like I said, but the content inside of it is being centered using the container as parameter and not the "content-start" and "content-end" from my "content-grid".
How can I approach this?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...
Kevin Powell
YouTube
How to escape the container on only one side
🎓 If you’ve been writing CSS for awhile now but you’re having trouble making that next step up with is, you might be interested in my course CSS Demystified: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=full-width-one-side
Having something be full-width on a website isn't hard, and there are even some neat t...
layout grid w/ one side bleed - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
4 Replies
you posted this question earlier today. please don't repost. You can "up" the post by commenting on it.
Sometimes it can take some time for someone to help you, have a bit of patience (specially in the weekend)
@MarkBoots you're right, sorry about that
i will try to look at it tomorrow, (it's night now over here). Or maybe someone else in a better timezone
Thank you, it's very kind of you