Container - grid area - Naming
Hello!
I watch Kevins video's almost every day in lunch time and i'm amazed by some solutions :)! Thanks
I'm working on my base theme and looking into the video about "Grid area container" but im not sure yet if i want to apply these code. I'm talking about this video: https://www.youtube.com/watch?v=c13gpBrnGEw
And this codepen: https://codepen.io/kevinpowell/pen/ExrZrrw
1. On caniuse.com is see that grid area is supported on almost every browser. so thats good! right?
2. It seems to fix a lot of dirty html code. Way less div's. Definitely with gutenberg/wordpress. So thats a plus for speed and seo!
3. I'm worried about the CLS. is this going to be an issue because everything is loaded and placed by css?
4. I'm also worried about the "freedom". Is position absolute / relative / fixed. Display flex etc etc all behaving the same? Can i breakout a model in position fixed? are there any down sides to this solution?
Could be a amazing upgrade could also be a big problem.. Not sure how to test or what to do
I watch Kevins video's almost every day in lunch time and i'm amazed by some solutions :)! Thanks
I'm working on my base theme and looking into the video about "Grid area container" but im not sure yet if i want to apply these code. I'm talking about this video: https://www.youtube.com/watch?v=c13gpBrnGEw
And this codepen: https://codepen.io/kevinpowell/pen/ExrZrrw
1. On caniuse.com is see that grid area is supported on almost every browser. so thats good! right?
2. It seems to fix a lot of dirty html code. Way less div's. Definitely with gutenberg/wordpress. So thats a plus for speed and seo!
3. I'm worried about the CLS. is this going to be an issue because everything is loaded and placed by css?
4. I'm also worried about the "freedom". Is position absolute / relative / fixed. Display flex etc etc all behaving the same? Can i breakout a model in position fixed? are there any down sides to this solution?
Could be a amazing upgrade could also be a big problem.. Not sure how to test or what to do
YouTubeKevin Powell
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...
