I’ve been working in web dev for 20+ years, and this is one of the few times I’ve seen someone come up with an alternative to such a huge industry standard and actually offer a simpler, viable one. Kudos to you!
It is a complex solution, but it's the kind of solution you do once, then you can forget about it. That outweighs the complexity, and will improve clarity in the HTML, which is usually where it can get really messy. What a great solution, I'll try something like that in my next project, thanks for the idea!
A while ago I had exactly this requirement to solve. Ended up with a lot of container elements and I hated it, but didn't know a better solution. This would have really helped me. I really like it and I don't think it is over-engineered at all. I think it's a very clean way without al those wrapper/container elements. Thanks for the inspiration!
Yeah I definitely prefer this over wrappers or containers, especially because I'm a bit opinionated that markup should be content. In my opinion, a wrapper div is a form of coupling between markup and style that is best avoided.
Agreed. The hours, and hours of refactoring I’ve had to do when suddenly a designer adds a breakout element… my god. I would need to use this for a full project, and see how it holds up… but my gut says this is a really elegant solution to an often messy problem.
Genius! I love the comment about, its not about the ease of implementation its about the ease of re-use. That sums up software development in a nutshell.
So, you discovered, how to structure a page layout of magazines and newspapers. Something I forgot for a long time. I love it. Finally a good approach to (web) layout. Thank you for introducing us to this.
I’ve been using something very similar to this in a few projects for a while now and it’s great. Once you’ve set it up it’s a game changer. Couple of additions with the named tracks: You can span from one name to another, i.e. you could go from breakout-start to full-width-end - really handy for off-centre content, particularly if you add more tracks or have one for the very centre of the screen - you can then span from the edge to the middle. Works beautifully with sub-grid. You can add multiple names to a grid like [content-start break-outstart]. Why would you want to do this? When you want more control with breakpoints and scaling. On mobile you might have two tracks share the same size but on desktop you then create two different tracks like in the video. That might seem pointless as it’s responsive already, but if you want fine grain control, such as not liking when the breakout is only 20 pixels wider than the content, and want it to only break out when it’s 100 pixels wider for instance you can. There is so much scope with this technique, and using subgrid, or inheriting lets you simply align elements in different containers.
absolutely power house move! this is how i "organized" the grid-template-columns. you may recognize its got a familiar look to html tags but it works for me. grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
damn, I have been working with HTML/CSS for more than a decade and been looking for a solution like this. I'm the type of guy who wants to keep HTML structure as simple and short as possible.
html structure should be as simple as possible (because it's what get's updated most). if that means we move the complexity into a long line of css that's an excellent trade-off! you always have complexity, the question is just *where* you put it. of course in some cases it makes more sense to have a quick max-width container instead of a robust and flexible solution like this. but it's really good to know this and be able to choose. thanks so much
This is one of the things that easily gets difficult with something like react. Component structure, especially when using component libraries, often adds a lot of DIVs to the DOM structure. You can avoid it nowadays but many developers who "grew up" with react don't give it much thought and add DIVs instead of fragments etc. It's also frustratingly common for people to leave DIVs around with conditional renders because they only wrap the DIV content in the condition, not the containing DIV itself.
What I love about web development is that there's always something to learn and each challenge is a puzzle. Never thought to use grid for this but as soon as you showed you were using grid I knew where this was going. This is a far better solution than using wrappers.
I started out in the XHTML era and the disciplined notion of a hard separation of the semantic html and style makes this nostalgically appealing. I can't see how this wouldn't be better for accessibility.
xHTML is alive and well and thus makes me cringe to see single quoted attributes. Also, container/wrapper divs aren't helpful for accessibility per se but you can make them ignored.
Imo, it moves all the complicated bits into one spot, and massively simplifies everything else that is implemented. if I joined a project where all I had to do was add a breakout class on something, I’d sob with joy. Bravo.
Just did this on a blog I recently built and it's made development so much more hassle-free. The blog uses a CMS with pre-defined, custom-built components, and instead of adding wrappers to every 'text block' component, we just have one div that wraps the whole article - each text block simply pumps out HTML directly from the text editor. At the same time, we can create fancy new full-width components & mini-apps and drop them in middle of an article. It works great.
This is really neat! Until now, I only used named grid areas or no names at all. I didn't know that you could create nested named grid areas via named start/end grid lines. Thanks for the great demo, I love it! Easy to understand CSS, really easy to apply and work with in HTML, and every removed wrapper div is a good thing!
Love it. This finally allows us to keep our html only to the markup that actually contains the content instead of having to create unnecessary boxes just for a simple layout.
Just started watching your videos and I am loving your depth of knowledge and the simplicity of your explanations. For a frontend newbie like me, it is quite helpful. Thank you so much!... I have an inquiry and hopefully it is not too silly. I am looking to see how I can place a border (using a class) around a section that is wrapped in a div. It has me jammed up after researching and watching videos for a few days now. Lol! Anybody? Everybody? Help! Laughing and crying. Lol!😆
I really like this, and my mind immediately jumps to setting a 'container-type: inline-size' on the 'main', and then setting padding and max-widths as units of cqw, rather than rems or ch units. Then you can set a single width for the whole container and everything underneath will automatically, perfectly scale. --padding-inline: 10cqw; --content-max-width: 50cqw; --breakout-max-width: 60cqw; container-type: inline-size;
I agree that is looks like a mess and complicated, but, I understand how versatile the code is, like you said, you change a few things and it just works without having to code multiple lines for every change that is being made. I love your videos, they are simple to understand and to the point.
Being someone who is comfortable using containers/wrappers where needed, this seems like a cool new way to center your main content. I'll try it out and circle back! Thank you as always!
man, several of your recent videos made me stop and have to update my existing projects because the advice and benefits are so extraordinary! i no longer need to keep up to date with recent front end developments when i can just watch this guru right here :)
There is really nothing wrong with containers, but this is just so much nicer. I still did not use grid, but as I watch your video I start changing my own little framework now. Thank you!
I absolutely love this. I work on large e-commerce solutions, where especially on CMS pages it's be hard to control the number of DOM elements created due to wrapper divs all over the place. This approach will save so many now superfluous DOM elements 🙌🙌
Perfect. Far more clean than those wrapper divs, and also perfect versatility, easy responsiveness, one-place-does-it-all for multiple projects,... Thank you!
This was fantastic. Thank you very much. Really a tight tutorial, with just enough "mistakes" to show how you built it up. Not over-engineered at all. It's just as complex as needed, and no more. Responsive without media queries. Complexity hidden in the CSS. Even the CSS is reasonably legible. You could maybe use an extra variable to clean it up, but otherwise, great.
Love the ability to have an article tag span across several “sections” without having to close them. Also improves our ability to keep the markup semantic.
I am absolutely FLOORED by this method! I've been working through a project that implemented the full color background sections, much like your above example, but the number of wrapper divs required have been frustrating me endlessly. Although I've been using grid for years, I never realized you could name lines like this! This is such a beautiful, clean implementation! I also have a horrible habit of forgetting padding on the X axis until the very end, and this even fixes that! I would happily take a chunky grid boi over extra divs any day! Thanks for this video!
I love this solution. I've never used much of grid, but the abiliy to remove a bunch of wrapper divs seems great, and it solves a pet peeves of mine. The cleanliness of the html is a nice result
Currently I'm working on a react project and I had to use a lot different wrappers, containers etc, and it pain in a butt. This can solve all these problems easy and 1 nice thing about this approach, that you can use only one main wrappers, probably main tag itself and use all needed classes to implement full width or wrapper like behavior in seconds, when I'm react components you should be really carefull to not break everything, thank you Kevin, will definitely use it!
This fits exactly the kind of "exception" to over-engineering you defined in your talk at CSS Cafe, which I very much agree to. I can imagine this to be made even easier and more versatile with a postcss function or SASS mixin/function. The biggest benefit, besides wrapping, that I see, is to make it even easier to work with CMS content. You will just be able to use a class or even just define grid areas for certain content types and elements.
Mind. Blowm 🤯 I love this idea. I hate the way a lot of modern websites are just div soup. You're inside a dozen div's before you even get to the content, it's nuts!
Wild to see something I've been re-engineering for years crystallized here in such an elegant way. This is the missing link to what I've been working towards - my solution involved a lot of CSS properties and calcs, but this is much more seamless and is still very robust. This kind of solution is far superior to wrappers, in my opinion. Yeah, it's a lot of set up at first, but then you can use in a utilitarian way and then just tweak the global values from project to project. Not to mention we get to kill one more layer of styling-only divs. 🎉 Also, huge thank you for cluing me into the fact that you can use simple line naming to define grid areas. I will be using that immediately. Thank you!
Really love this idea. So simple yet flexible. I'm working on a super-lightweight, non-framework-based set up for my company's sites and am super excited to play around with this! Thanks for taking your time.
I am a newbie to frontend design and these videos are a massive help thank you. I am currently building a help webpage for work and spent hours aligning sections where I wanted but using this idea to simply name a section and it positions and look how I wanted. I recreated my webpage with this idea and it took just minutes to do. Granted most of that time was setting this up but overall much quicker.
I think this is the next step to containers, while it does take a lot to setup it allows for complete control over how you want the containers to work and will save you a lot of time in the long run. I am definitely using this.
This is a GREAT way to handle dynamic components retrieved let's say from a CMS, leaving the editor full choice over the design, while keeping a smaller markup footprint, I like it!
This is the essence of good programming/design. Declare your variable structural properties at the beginning: variable first then static. You can then always come back to the top and make system-wide changes as needed. And yes, this is so portable.
Excellent stuff, Kevin. Have taken a break from front of the front end stuff for a bit and am jumping back in and seeing what I've missed. Glad to see you are still bringing the light of CSS to the masses.
Nice! I knew that grid-area names create their implicit '-start' and '-end' tracks but this technique allows for *overlapping area names* which I didn't know was possible 🤯and *this* I find much more interesting to learn about!! 😁 I use track names all the time and you can give them multiple names: auto [L side-start ads-start] 0.5fr [ads-end] 0.5fr [C side-end content-start] 2fr [R content-end] auto This gives us the *overlapping* areas side, ads, content plus three individual tracks L, C, R. Use these (short) names in spans to avoid "magic numbers": grid-column: L / R;
Wow, I love this sooooo much! I really hate having a way too crowded HTML because of the containers and wrappers needed for this type of layout so your solution is like a dream come true. I also realized I'm not that knowledgeable in regards to Grid or modern CSS as I thought I was 🤯
You could even not know frameworks like React or Vue, but still create amazing things just with Vanilla JS. Having a good command of CSS, HTML, JS makes you a wizard.
Kevin, I've watched a lot of your videos, and this is the first time I've felt compelled to comment because this is FREAKING. AWESOME. I will definitely be using this technique, plus I love the whole named lines to make implicit grid areas!
What a great solution! Beats trying to break out of the container using other ways which still 'not quite spans full width', all the way to the right side scroller: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } Your solution is way better than the above code! Even the following still feels hacky, and has some limitations: .full-bleed { box-shadow: 0 0 0 100vmax blue; clip-path: inset(0 -100vmax); }
You effectively created a subgrid-like effect without relying on the CSS 'subgrid' property, well done! This could have saved me a lot of time in the past styling CMS content.
Kevin I think I'll say what most of us think.. It's great and we love ❤ it! I think I'll take some time and see how would it look when implemented on my website and then get back to everyone. That might be the best way to verify the idea. I also use the same (way simpler) technique already with grid for padding and main content so it should be fairly "easy" to replace. Also thank you for the tip about named lines didn't know that was a thing.
This is a lovely idea. I agree with a comment below "unless a container/wrapper makes sense semantically ...". Always start with good HTML. What I really like about it is having only one major grid to put your UI elements into. You can create an overall consistent spacing strategy throughout your page. I wonder though if most of the time it only ends up being a starting point and you end changing the grid multiple times before you are done. I guess it saves designers jobs if the web developer community all use the same one-column layout with 60 to 90ch max-width content. It should make more interesting grid layouts stand out even more.
This actually solved a problem I was working on. Thank you so much for this! And yes, it is a bit of a setup, but I think in the long-run it saves so much time and effort.
I'm definitely gonna explore this. I'm a big fan of CSS over HTML, so I'm willing to write more CSS to avoid repeating myself in HTML by cluttering my markup with many classes!
been looking for this solution a long time, I have this bad habit of putting everything into divs and just throw a grid and do specific styles or what. Damn helpful for doing content managements for front end developments kudos to you my guy
This approach does work for `display: flex` as well. The only thing that changes is that instead of using `.container` as a selector we're using `.full-width > :not(.breakout)` .. so basically this solution is not only working for grid. But there are disadvantages when using this: The more specific you get when using css selectors, the harder it gets when there is something to override. So it is very important to declare styles wisely that are bound specifically to your usecase. As soon as you start adding unrelated styles like font-family or so, you will end up in a mess of selectors. I find nothing wrong about that, but it has to be used wisely. 😃
I love this approach. I recently worked on a project where the designer had numerous column width / container sizes. This would have worked so well as I would have been able to set all container sizes to one grid layout instead of numerous container classes.
This is such a clean solution. 😱 Also because grids are perfect tools for animations with fr units and using this layout will open up a lot of possibilities. Thank you for sharing!
This is going to make my life really easy with a platform i am developing right now. Im someone who hates extra html, so this succinct kind of approach is phenomenal. Great video !
Dangit, after many years of my textflow content being flexbox in an article, I think I am going to switch to grid because of you, you grid-fanboy, you! ;D This is a fantastic presentation of good ideas for a very fundamental use case. It is advanced in conceptual model, not technical fancy features, and that makes it incredibly useful as a foundation to add those fancy features (subgrid and container queries really make this super powerful). It reminds me of the old 12 column layouts prior to flex and grid.
I just love how happy this solution is making you. I'm very intrigued because I definitely feel the .wrapper pain. I'll give it a test run as soon as I start a new project.
Love it, I found Ryan's version of this a few months back and it's been so useful. As you say, can kind of just drop into projects and update the variables as needed
Ok, I think this is indeed awesome. Especially since the flow of the document doesn't get interrupted as much as it does with the container/wrapper way of doing it!
Honestly, this looks like a great starting point for a layout system, especially for a component-driven cms. When working in a Bootstrapesque system with a "container" div, landing pages are particulary hard to create when you need to mix full-width and contained elements. This is a very elegant solution to that use case.
Love at first sight :) I began using css back when they tried to get rid of display/visual HTML tags such as b and I, because HTML was supposed to be display-agnostic (if anyone still remembers the Zen Garden site, that's from that time). Still, they kept div and span around. Exactly because you had to use them as containers. As, back then, you could not do it any other way (except maybe for js, but some people had js blockers installed back then :)), it made sense. I haven't had the pleasure of doing "new css" in a while. But am already looking so much forward to it :). The fact you don't need lessc or scss to do calculations and such, that's just perfect. Cant wait to begin upgrading my old projecte.
I like the idea of using both class names rather than making the .full-width class have more than one responsibility. `` feels great. Like using Tailwind utility classes. Overall, love the idea of using grid this way. Thanks for another great video Kevin.
Hey Kevin. Just want to say thank you so much because I have finally conquered responsive layouts and I'm super proud of myself but also so grateful for your course and guidance. I have finished the final challenge of conquering responsive layouts and I can now confidently create responsive sites. No longer dreading CSS but actually love it now.😅😊
I like this because it simplifies the html and reduces noise and the need to define unique container classes. Although the container div is more visible. It is a matter of training yourself to look for style classes instead of a div container. Everyone has their own style of writing html and css. I find that most just keep patching css which causes unnecessary noise in the code.
Awesome, love it! The full width and the breakout are so needed in projects, and this is a clever way to get through them and not have to make a lot of CSS to get to the same result with a conventional container.
I just used this for something I am working on. There is probably 50% less CSS and HTML overall to using containers and wrappers, based on what I have done in the past. I like that you can have everything in one place instead of it being strewn over the HTML and many class definitions.
I've never thought that grid lines could be that useful.. Really good alternative to the container approach. I don't think this is overengineering since you can easily change your layout and even add more grid lines to create new things. Thanks!
Was going to dismiss this video but glad I watched it. Had not idea that I could do that with the grid section names. Very useful feature. Thanks for sharing 😊
I also came up with this same strategy on my own and have been applying it to redesigns of some major sites because I love it so much. A few weeks ago I pasted my version under your video about escaping a container on only one side - when you made the teaser community post I actually thought you got the idea from me since I'd never seen anyone do this kind page layout and I'd just shared my code like 2 days earlier, but I guess it's humbling to hear that people discovered the same thing over a year ago :)
Main thing I like about this over auto-margins is you can use justify-items to keep inline-block/fixed-width items aligned to the left/right of the content bounds, rather than stuck centered without a dummy wrapper.
That's a brilliant idea! I've often encountered difficulties maintaining the simplicity of my projects, especially with containers and the multiple levels of structures for grids and flows. This approach greatly simplifies achieving the desired widths without having to close and reintegrate the div tag elsewhere. During refactoring, I frequently found myself in a mess of elements that disrupted the design and forced me to reimplement the same style. I'm looking forward to trying this out in my current project. Thanks for the informative video and tips. I've subscribed and left a thumbs up 😄
I love it, especially when editing legacy content on larger repository, this way I can go in with css and no need to touch the html and change the whole layout. Very interesting idea
ปีที่แล้ว
This is an amazing idea for CDN documents used in different platforms or CMS used by content creators who don't have the time or patience to understand and learn HTML and CSS. Less HTML voodoo for content creators, more fun for front-end devs!
Holy Cannoli. I'm gonna implement this immediately! Definitely going to declare columns separately, to maximize flexibility. Sometimes I want a full-width box with more than one content width inside. Thanks, Kevin!
I’ve been working in web dev for 20+ years, and this is one of the few times I’ve seen someone come up with an alternative to such a huge industry standard and actually offer a simpler, viable one. Kudos to you!
It is a complex solution, but it's the kind of solution you do once, then you can forget about it.
That outweighs the complexity, and will improve clarity in the HTML, which is usually where it can get really messy.
What a great solution, I'll try something like that in my next project, thanks for the idea!
containers are for more clear than this...
@@Dead_Goat you’re crazy
Is far easier than 20 nested divs
A while ago I had exactly this requirement to solve. Ended up with a lot of container elements and I hated it, but didn't know a better solution. This would have really helped me. I really like it and I don't think it is over-engineered at all. I think it's a very clean way without al those wrapper/container elements. Thanks for the inspiration!
Yeah I definitely prefer this over wrappers or containers, especially because I'm a bit opinionated that markup should be content. In my opinion, a wrapper div is a form of coupling between markup and style that is best avoided.
Agreed. The hours, and hours of refactoring I’ve had to do when suddenly a designer adds a breakout element… my god.
I would need to use this for a full project, and see how it holds up… but my gut says this is a really elegant solution to an often messy problem.
x2. It was already somewhat tedious, but this... solves the problem. =')
print designers do this stuff all the time. so annoying for us web developers to code, but not any more!
Genius! I love the comment about, its not about the ease of implementation its about the ease of re-use. That sums up software development in a nutshell.
So, you discovered, how to structure a page layout of magazines and newspapers.
Something I forgot for a long time.
I love it.
Finally a good approach to (web) layout. Thank you for introducing us to this.
I’ve been using something very similar to this in a few projects for a while now and it’s great. Once you’ve set it up it’s a game changer.
Couple of additions with the named tracks:
You can span from one name to another, i.e. you could go from breakout-start to full-width-end - really handy for off-centre content, particularly if you add more tracks or have one for the very centre of the screen - you can then span from the edge to the middle. Works beautifully with sub-grid.
You can add multiple names to a grid like [content-start break-outstart]. Why would you want to do this? When you want more control with breakpoints and scaling. On mobile you might have two tracks share the same size but on desktop you then create two different tracks like in the video. That might seem pointless as it’s responsive already, but if you want fine grain control, such as not liking when the breakout is only 20 pixels wider than the content, and want it to only break out when it’s 100 pixels wider for instance you can.
There is so much scope with this technique, and using subgrid, or inheriting lets you simply align elements in different containers.
absolutely power house move! this is how i "organized" the grid-template-columns. you may recognize its got a familiar look to html tags but it works for me.
grid-template-columns:
[full-width-start]
minmax(var(--padding-inline), 1fr)
[breakout-start]
minmax(0, var(--breakout-size))
[content-start]
min(100% - (var(--padding-inline) * 2), var(--content-max-width))
[content-end]
minmax(0, var(--breakout-size))
[breakout-end]
minmax(var(--padding-inline), 1fr)
[full-width-end];
As a person who also occasionally does paper layouts - I love this. It's a very analog approach to page grid ❤
damn, I have been working with HTML/CSS for more than a decade and been looking for a solution like this.
I'm the type of guy who wants to keep HTML structure as simple and short as possible.
To be fair we haven't had grid (or flex-box) for that long :)
html structure should be as simple as possible (because it's what get's updated most). if that means we move the complexity into a long line of css that's an excellent trade-off!
you always have complexity, the question is just *where* you put it. of course in some cases it makes more sense to have a quick max-width container instead of a robust and flexible solution like this. but it's really good to know this and be able to choose. thanks so much
This is one of the things that easily gets difficult with something like react. Component structure, especially when using component libraries, often adds a lot of DIVs to the DOM structure. You can avoid it nowadays but many developers who "grew up" with react don't give it much thought and add DIVs instead of fragments etc.
It's also frustratingly common for people to leave DIVs around with conditional renders because they only wrap the DIV content in the condition, not the containing DIV itself.
What I love about web development is that there's always something to learn and each challenge is a puzzle. Never thought to use grid for this but as soon as you showed you were using grid I knew where this was going.
This is a far better solution than using wrappers.
I started out in the XHTML era and the disciplined notion of a hard separation of the semantic html and style makes this nostalgically appealing. I can't see how this wouldn't be better for accessibility.
xHTML is alive and well and thus makes me cringe to see single quoted attributes. Also, container/wrapper divs aren't helpful for accessibility per se but you can make them ignored.
I thought XHTML was gonna be the coolest thing in 2005. I loved the idea of really pure HTML.
Imo, it moves all the complicated bits into one spot, and massively simplifies everything else that is implemented. if I joined a project where all I had to do was add a breakout class on something, I’d sob with joy.
Bravo.
Just did this on a blog I recently built and it's made development so much more hassle-free.
The blog uses a CMS with pre-defined, custom-built components, and instead of adding wrappers to every 'text block' component, we just have one div that wraps the whole article - each text block simply pumps out HTML directly from the text editor. At the same time, we can create fancy new full-width components & mini-apps and drop them in middle of an article. It works great.
This is really neat! Until now, I only used named grid areas or no names at all. I didn't know that you could create nested named grid areas via named start/end grid lines. Thanks for the great demo, I love it! Easy to understand CSS, really easy to apply and work with in HTML, and every removed wrapper div is a good thing!
Love it. This finally allows us to keep our html only to the markup that actually contains the content instead of having to create unnecessary boxes just for a simple layout.
Just started watching your videos and I am loving your depth of knowledge and the simplicity of your explanations. For a frontend newbie like me, it is quite helpful. Thank you so much!... I have an inquiry and hopefully it is not too silly. I am looking to see how I can place a border (using a class) around a section that is wrapped in a div. It has me jammed up after researching and watching videos for a few days now. Lol! Anybody? Everybody? Help! Laughing and crying. Lol!😆
This is pure gold.
For markdown formatting or user submitted content, this allows a new level of presentation.
This video makes me realize I view grid like a table, rather than a powerful layout tool with different possibilities
I really like this, and my mind immediately jumps to setting a 'container-type: inline-size' on the 'main', and then setting padding and max-widths as units of cqw, rather than rems or ch units. Then you can set a single width for the whole container and everything underneath will automatically, perfectly scale.
--padding-inline: 10cqw;
--content-max-width: 50cqw;
--breakout-max-width: 60cqw;
container-type: inline-size;
this one is a lifesaver.!!! Literally, it got my mind blown that this could be possible.
I agree that is looks like a mess and complicated, but, I understand how versatile the code is, like you said, you change a few things and it just works without having to code multiple lines for every change that is being made. I love your videos, they are simple to understand and to the point.
Anything that reduces the excesive use of container divs we see these days is a welcome change for me.
Being someone who is comfortable using containers/wrappers where needed, this seems like a cool new way to center your main content. I'll try it out and circle back! Thank you as always!
Finally, a reason to use CSS grids!
Thanks so much!
man, several of your recent videos made me stop and have to update my existing projects because the advice and benefits are so extraordinary!
i no longer need to keep up to date with recent front end developments when i can just watch this guru right here :)
There is really nothing wrong with containers, but this is just so much nicer. I still did not use grid, but as I watch your video I start changing my own little framework now. Thank you!
I absolutely love this. I work on large e-commerce solutions, where especially on CMS pages it's be hard to control the number of DOM elements created due to wrapper divs all over the place. This approach will save so many now superfluous DOM elements 🙌🙌
Excellent solution.
Everytime I watch I go and rewrite my css. This is just golden! Super simple to copy and paste to other projects as well.
love how this covers every screen size without the need for @media
Perfect. Far more clean than those wrapper divs, and also perfect versatility, easy responsiveness, one-place-does-it-all for multiple projects,...
Thank you!
This was fantastic. Thank you very much. Really a tight tutorial, with just enough "mistakes" to show how you built it up. Not over-engineered at all. It's just as complex as needed, and no more. Responsive without media queries. Complexity hidden in the CSS. Even the CSS is reasonably legible. You could maybe use an extra variable to clean it up, but otherwise, great.
Love the ability to have an article tag span across several “sections” without having to close them. Also improves our ability to keep the markup semantic.
Now show us the subgrid version?
I am absolutely FLOORED by this method! I've been working through a project that implemented the full color background sections, much like your above example, but the number of wrapper divs required have been frustrating me endlessly. Although I've been using grid for years, I never realized you could name lines like this! This is such a beautiful, clean implementation! I also have a horrible habit of forgetting padding on the X axis until the very end, and this even fixes that! I would happily take a chunky grid boi over extra divs any day! Thanks for this video!
I love this solution. I've never used much of grid, but the abiliy to remove a bunch of wrapper divs seems great, and it solves a pet peeves of mine. The cleanliness of the html is a nice result
Currently I'm working on a react project and I had to use a lot different wrappers, containers etc, and it pain in a butt. This can solve all these problems easy and 1 nice thing about this approach, that you can use only one main wrappers, probably main tag itself and use all needed classes to implement full width or wrapper like behavior in seconds, when I'm react components you should be really carefull to not break everything, thank you Kevin, will definitely use it!
I really like this approach. It's much tidier and logical for me. It preserves the semantics of HTML much better.
Love this. No need to play around with negative margins and stuff to breakout of a container. I think this makes so much sense!
This fits exactly the kind of "exception" to over-engineering you defined in your talk at CSS Cafe, which I very much agree to. I can imagine this to be made even easier and more versatile with a postcss function or SASS mixin/function. The biggest benefit, besides wrapping, that I see, is to make it even easier to work with CMS content. You will just be able to use a class or even just define grid areas for certain content types and elements.
Mind. Blowm 🤯
I love this idea. I hate the way a lot of modern websites are just div soup. You're inside a dozen div's before you even get to the content, it's nuts!
I absolute love it, It's a masterclass and it will take 2-3 rewatch to understand it but it'll help in long run
I was just doing some crazy stuff just to be able to breakout some parts of the content. Now I'm redoing everything because of you!
This is fantastic. Bravo, and kudos to the blog posters, too.
Wild to see something I've been re-engineering for years crystallized here in such an elegant way. This is the missing link to what I've been working towards - my solution involved a lot of CSS properties and calcs, but this is much more seamless and is still very robust.
This kind of solution is far superior to wrappers, in my opinion. Yeah, it's a lot of set up at first, but then you can use in a utilitarian way and then just tweak the global values from project to project. Not to mention we get to kill one more layer of styling-only divs. 🎉
Also, huge thank you for cluing me into the fact that you can use simple line naming to define grid areas. I will be using that immediately. Thank you!
Really love this idea. So simple yet flexible. I'm working on a super-lightweight, non-framework-based set up for my company's sites and am super excited to play around with this! Thanks for taking your time.
I am a newbie to frontend design and these videos are a massive help thank you.
I am currently building a help webpage for work and spent hours aligning sections where I wanted but using this idea to simply name a section and it positions and look how I wanted. I recreated my webpage with this idea and it took just minutes to do. Granted most of that time was setting this up but overall much quicker.
I think this is the next step to containers, while it does take a lot to setup it allows for complete control over how you want the containers to work and will save you a lot of time in the long run. I am definitely using this.
This is a GREAT way to handle dynamic components retrieved let's say from a CMS, leaving the editor full choice over the design, while keeping a smaller markup footprint, I like it!
This is the essence of good programming/design. Declare your variable structural properties at the beginning: variable first then static. You can then always come back to the top and make system-wide changes as needed. And yes, this is so portable.
Excellent stuff, Kevin. Have taken a break from front of the front end stuff for a bit and am jumping back in and seeing what I've missed. Glad to see you are still bringing the light of CSS to the masses.
Nice! I knew that grid-area names create their implicit '-start' and '-end' tracks but this technique allows for *overlapping area names* which I didn't know was possible 🤯and *this* I find much more interesting to learn about!! 😁
I use track names all the time and you can give them multiple names:
auto [L side-start ads-start] 0.5fr [ads-end] 0.5fr [C side-end content-start] 2fr [R content-end] auto
This gives us the *overlapping* areas side, ads, content plus three individual tracks L, C, R.
Use these (short) names in spans to avoid "magic numbers":
grid-column: L / R;
This is exactly what I needed Kevin, you are my CSS god 🙏
I always thought that it won't hurt to use wrappers or containers if they make my life easier. But this solution is just awesome! Thanks for sharing!
Wow, I love this sooooo much! I really hate having a way too crowded HTML because of the containers and wrappers needed for this type of layout so your solution is like a dream come true. I also realized I'm not that knowledgeable in regards to Grid or modern CSS as I thought I was 🤯
This is the most useful CSS trick I've found in years
You could even not know frameworks like React or Vue, but still create amazing things just with Vanilla JS.
Having a good command of CSS, HTML, JS makes you a wizard.
Kevin, I've watched a lot of your videos, and this is the first time I've felt compelled to comment because this is FREAKING. AWESOME. I will definitely be using this technique, plus I love the whole named lines to make implicit grid areas!
What a great solution!
Beats trying to break out of the container using other ways which still 'not quite spans full width', all the way to the right side scroller:
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
Your solution is way better than the above code!
Even the following still feels hacky, and has some limitations:
.full-bleed {
box-shadow: 0 0 0 100vmax blue;
clip-path: inset(0 -100vmax);
}
You effectively created a subgrid-like effect without relying on the CSS 'subgrid' property, well done!
This could have saved me a lot of time in the past styling CMS content.
Kevin I think I'll say what most of us think.. It's great and we love ❤ it!
I think I'll take some time and see how would it look when implemented on my website and then get back to everyone. That might be the best way to verify the idea. I also use the same (way simpler) technique already with grid for padding and main content so it should be fairly "easy" to replace.
Also thank you for the tip about named lines didn't know that was a thing.
This is a lovely idea. I agree with a comment below "unless a container/wrapper makes sense semantically ...". Always start with good HTML. What I really like about it is having only one major grid to put your UI elements into. You can create an overall consistent spacing strategy throughout your page. I wonder though if most of the time it only ends up being a starting point and you end changing the grid multiple times before you are done. I guess it saves designers jobs if the web developer community all use the same one-column layout with 60 to 90ch max-width content. It should make more interesting grid layouts stand out even more.
This actually solved a problem I was working on. Thank you so much for this! And yes, it is a bit of a setup, but I think in the long-run it saves so much time and effort.
I'm definitely gonna explore this. I'm a big fan of CSS over HTML, so I'm willing to write more CSS to avoid repeating myself in HTML by cluttering my markup with many classes!
CSS was invented to avoid *exactly* this kind of HTML clutter. You are helping it fulfill its destiny! 🔮
been looking for this solution a long time, I have this bad habit of putting everything into divs and just throw a grid and do specific styles or what. Damn helpful for doing content managements for front end developments kudos to you my guy
This approach does work for `display: flex` as well. The only thing that changes is that instead of using `.container` as a selector we're using `.full-width > :not(.breakout)` .. so basically this solution is not only working for grid. But there are disadvantages when using this: The more specific you get when using css selectors, the harder it gets when there is something to override. So it is very important to declare styles wisely that are bound specifically to your usecase. As soon as you start adding unrelated styles like font-family or so, you will end up in a mess of selectors.
I find nothing wrong about that, but it has to be used wisely. 😃
I love this approach.
I recently worked on a project where the designer had numerous column width / container sizes. This would have worked so well as I would have been able to set all container sizes to one grid layout instead of numerous container classes.
Honestly this is life changing. As soon as my UX department creates a design where I can use this I will be using it.
This is such a clean solution. 😱
Also because grids are perfect tools for animations with fr units and using this layout will open up a lot of possibilities.
Thank you for sharing!
This is going to make my life really easy with a platform i am developing right now. Im someone who hates extra html, so this succinct kind of approach is phenomenal. Great video !
Dangit, after many years of my textflow content being flexbox in an article, I think I am going to switch to grid because of you, you grid-fanboy, you! ;D This is a fantastic presentation of good ideas for a very fundamental use case. It is advanced in conceptual model, not technical fancy features, and that makes it incredibly useful as a foundation to add those fancy features (subgrid and container queries really make this super powerful). It reminds me of the old 12 column layouts prior to flex and grid.
I just love how happy this solution is making you. I'm very intrigued because I definitely feel the .wrapper pain. I'll give it a test run as soon as I start a new project.
I love the versatility of this
thank you you are magician! I finally left the bad practice of using flex to organize my sections and i finally get a consistent spacing and structure
Love it, I found Ryan's version of this a few months back and it's been so useful. As you say, can kind of just drop into projects and update the variables as needed
Ok, I think this is indeed awesome. Especially since the flow of the document doesn't get interrupted as much as it does with the container/wrapper way of doing it!
Honestly, this looks like a great starting point for a layout system, especially for a component-driven cms. When working in a Bootstrapesque system with a "container" div, landing pages are particulary hard to create when you need to mix full-width and contained elements. This is a very elegant solution to that use case.
Love at first sight :)
I began using css back when they tried to get rid of display/visual HTML tags such as b and I, because HTML was supposed to be display-agnostic (if anyone still remembers the Zen Garden site, that's from that time). Still, they kept div and span around. Exactly because you had to use them as containers. As, back then, you could not do it any other way (except maybe for js, but some people had js blockers installed back then :)), it made sense.
I haven't had the pleasure of doing "new css" in a while. But am already looking so much forward to it :). The fact you don't need lessc or scss to do calculations and such, that's just perfect.
Cant wait to begin upgrading my old projecte.
I like the idea of using both class names rather than making the .full-width class have more than one responsibility.
`` feels great. Like using Tailwind utility classes.
Overall, love the idea of using grid this way. Thanks for another great video Kevin.
Hey Kevin. Just want to say thank you so much because I have finally conquered responsive layouts and I'm super proud of myself but also so grateful for your course and guidance. I have finished the final challenge of conquering responsive layouts and I can now confidently create responsive sites. No longer dreading CSS but actually love it now.😅😊
I like this because it simplifies the html and reduces noise and the need to define unique container classes.
Although the container div is more visible. It is a matter of training yourself to look for style classes instead of a div container.
Everyone has their own style of writing html and css. I find that most just keep patching css which causes unnecessary noise in the code.
Awesome, love it! The full width and the breakout are so needed in projects, and this is a clever way to get through them and not have to make a lot of CSS to get to the same result with a conventional container.
I just used this for something I am working on. There is probably 50% less CSS and HTML overall to using containers and wrappers, based on what I have done in the past. I like that you can have everything in one place instead of it being strewn over the HTML and many class definitions.
I've never thought that grid lines could be that useful.. Really good alternative to the container approach. I don't think this is overengineering since you can easily change your layout and even add more grid lines to create new things. Thanks!
This approach keeps your HTML clean and tight - really nice for accessability.
This is really cool. And you already did all the work for us. I think it's awesome.
Good bye div wrappers! Thank you for showing us the modern way. Will never go back. Awesome work.
Was going to dismiss this video but glad I watched it. Had not idea that I could do that with the grid section names. Very useful feature. Thanks for sharing 😊
Absolutely genius. That is such an impressive solution. Definately going to be using this method on the sites I build.
love the idea. It seems like that kind of things you only need to get used to. Less wrappers also sounds like a good idea. Thank you.
I also came up with this same strategy on my own and have been applying it to redesigns of some major sites because I love it so much. A few weeks ago I pasted my version under your video about escaping a container on only one side - when you made the teaser community post I actually thought you got the idea from me since I'd never seen anyone do this kind page layout and I'd just shared my code like 2 days earlier, but I guess it's humbling to hear that people discovered the same thing over a year ago :)
I like this approach, Kevin. It seems to be more flexible for more complex designs. Thank you.
I absolutely love this! Set it up once and then you’re set. This is brilliant. Thanks, Kevin!
Main thing I like about this over auto-margins is you can use justify-items to keep inline-block/fixed-width items aligned to the left/right of the content bounds, rather than stuck centered without a dummy wrapper.
You just made me rethink the whole concept of grids!
That's a brilliant idea! I've often encountered difficulties maintaining the simplicity of my projects, especially with containers and the multiple levels of structures for grids and flows. This approach greatly simplifies achieving the desired widths without having to close and reintegrate the div tag elsewhere. During refactoring, I frequently found myself in a mess of elements that disrupted the design and forced me to reimplement the same style. I'm looking forward to trying this out in my current project.
Thanks for the informative video and tips. I've subscribed and left a thumbs up 😄
I love it, especially when editing legacy content on larger repository, this way I can go in with css and no need to touch the html and change the whole layout. Very interesting idea
This is an amazing idea for CDN documents used in different platforms or CMS used by content creators who don't have the time or patience to understand and learn HTML and CSS.
Less HTML voodoo for content creators, more fun for front-end devs!
My brain is on fire right now... I just learned a new way of setting up the initial template for my project. 🤯
Thank you! Teach me more!
I really like this approach. CSS grid has a lot to learn.
Holy Cannoli. I'm gonna implement this immediately!
Definitely going to declare columns separately, to maximize flexibility. Sometimes I want a full-width box with more than one content width inside. Thanks, Kevin!