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 🙂
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...
18 Replies
Would love to know what you guys really think about this. its awesome but is it usable /stable?
By default when using position absolute on a grid item, it’s relative to its grid cell. I forget about fixed , I think it also gets fixed to its cell? I know sticky is relative to the container so when the grid parent gets scrolled past , the sticky element gets scrolled with it.
Good point: tested, fixed is relative to the body, even if the grid parent has position: relative;
i can't find any down sides so far 🙂
relative to the viewport/window. not body. slight difference
yes indeed
So even if the grid parent scrolls out of the viewport, the item is still fixed where it was?
yes
Gotcha
I think i'm going to use this as the new container basis of my theme. Can't find any big down sides of the grid area system. It only feels a bit backwards because its "like" tables and I was really happy we left that behind back in the days. DIV is the future! 🥲
Grid is amazing! Should be good to go, I do remember something about using
repeat has some issue with support , don’t know if that’s been resolved but other than that I don’t know of any other grid properties that aren’t supported and repeat may be fine by now
Ah I think this was it
“1. calc() doesn't work in repeat() (see bug 1350069).
2. repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).”
Both have been resolvednice
thanks for your opinion hart!
ah, there is no margin collapsing in grid, just like flexbox:(
solution display: flow-root; on the other content boxes
😦 not the solution
using <div> and <p><h2> etc mixed in 1 container.
<h2> title Margin: 1.8rem 0
<p> text Margin: 1.8rem 0
<div> big slider Margin: 6rem 0
<p> text Margin: 1.8rem 0
margin is not fixable in a good way without margin colasping.
ugly fix (important is needed because it doesnt "win" from class selector):
& + *{
margin-top: 6rem !important;
}
mmh this fix aint working in gutenburg. to many div's
Fixed also that problem, but this kinda scks, ugly solutions. Going back to display block margin ** auto
Yep collapsing margins do not work in flex or grid. I use a * {margin:0} in my reset and add spacing back in
that works if every margin is the same. I have big blocks (banners) with margin 6 rem top&bottom. And small blocks (paragraph) with margin 1.8 rem top&bottom.
Margin collapsing == perfect for custom margins.
Grid/Flex -> Margin no collapse == not stable margins
Margin top no collapse == problem with sizing
Margin top no collapse with the .class + {margin-top:} fix.
**Flaws:***
1. This works but it has to be !important because it gets overruled by the classname and styles. (1.8 rem)
2. This doesnt work in gutenberg admin editor because there are extra divs around everything. So you have to hack it with :has parent selector and then + * margin !important
also all the other innerblocks with blocks are display block.. those have to be flow-content and have the same hacks.
in the end of the day the margins problem in combination with variable content breaks the system