When do I use the grid-column/grid-row property over grid-template-areas?
Hello so I know both grid-column/grid-row and grid-template-areas are both effected by the grid-template-columns and grid-template-rows that you set. That makes me confused on when to use either. Defining placements by areas or line-numbers/names.
42 Replies
preference, mostly
I like the semi-visual nature of areas, so I pretty much use them exclusively
Also if you need cells to overlap you have to define the grid column and grid row line-numbers or names explicitly on the children. You can't create overlap when defining grid-template-areas.
Personally I do like declaring grid template areas whenever possible and then giving the grid children those names so if I need to move anything around in a media query I'm not resetting their grid column/grid row properties I can just redefine the grid template area with the same area names and not have to touch the grid children properties at all in the media query
Even then you can use named gridlines: https://www.youtube.com/watch?v=cf-J4ffMBfo
Kevin Powell
YouTube
Probably the most underrated (and useful) CSS feature
Looking to step up your CSS games? I’ve got free and premium courses to help you out! 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=named-grid-lines
I don’t think I’m alone in not using named grid lines very often. They are something I dismissed early on because I figured line numbers were good enough and f...
Yea you can overlap with named lines, and its wonderful. I slept on not using them for too long.
Takes your grid areas game to the next level.
Ok thanks will check that video out!
So that video was a lot to take in. I guess the point of that video was that having multiple names for a grid-lines can help with overlapping grids? I'm going to have to try this to gain further understanding.
I see that grid-template-areas is easier to layout content but lacks the overlapping feature like you said. It makes laying out media queries easier too.
you can overlap grid children, just not overlap the grid areas. Though you can also mix and match, lay out most things with areas and then have one or two elements that use column and row numbers
so if you want to stack things on top of each other, you can do that with areas, but if you want one thing to half-cover something else you'll have to dig into using line numbers (but only for that one element, if you want)
"so if you want to stack things on top of each other, you can do that with areas"
You do this by mixing grid-template-areas and grid-row/grid-column correct?
yes, but not necessarily what I mean with that part of my message. I mean if you want multiple elements in the same position:
but yeah, you can mix and match, have some things using line numbers and most others use areas
Oh so grid-area: b will have two things overlapping. I didn't know you could do this. Thanks!
Will the elements with the class of "two" and "three" I mean
it's the best way to get things to overlap, much, much better than position: absolute;
yup
you also have control over the position with grid too which makes it really fun for overlapping.
Wow really. I have been practicing with position trying to get dimming/tint effects on images. So I could use this method for that?
For hovering effects position: absolute would still be the best way to do that correct?
flex has -self too but I find I use it in grid much more to control stacked content in grid
so in that example you could have and it would be on the bottom right where two would default to
startI haven't dove into positioning yet with grid. I saw that mdn had documentation on that.
Using the position properties
also for centering ofc 👨🍳 💋 (you can do a "dog pile" too) by just putting everything in the same area and place-items/content: center;
Like alignment etc
Its way better for responsive layouts than position: absolute. In lots of cases.
So when do I use position: absolute then. I have been trying to find pratical examples to code/pratice.
I have been using it for creating hover dimming effects on cards or having a background dimmed with opacity.
#depends
you can even use it with grid xD (and then use grid positioning)
Oh wow, that's interesting
yea if the parent grid is relative, you give a grandchild something absolute to pull it up into the child... its kinda neat
I will say that browsers will render grid-areas different though, so really only the alignment properties work well.
Here is my funky test of it lol
Oh ok, that's still great though. Can't wait until I run into a scenario where I have to use position with CSS grid!
Wow that interesting
oh that was using pseudo elements mostly too oso I need to revisit and try real elements more. oh nvm I did .. been awhile lol
I was testing how it worked also with pseudo children in that
You would need a crazy amount of columns/rows if you did that without position property correct?
🤷♂️
I think people get a little crazy with col/rows..
Like I don't every do 12 col layouts or what not. Most the time I try to just nest another grid
dumb code for me I hate over complexity
Nest grids. I assume that's where subgrid comes in?
Really it just depends right? xD sometimes a large grid might be a good thing
I mean it can.. but no I mean a new grid with a new pattern that is needed
blocks in blocks
with other blocks
maybe some flex too 😄
Ah, I don't think I've ever tried that
Kevin has a few good videos that he shows how to break up a design
What I did one time.
like it should never be just 1 grid honestly 😄
Oh really?
I should see that one then
that is what I love about that wrapper too, gives you so much control.
I was using it before Kevin released the video and we talked about it some, really glad he did it.
Lots of times we just use sections without a overall wrapper.. but sometimes having a set main wrapper is what so many of us want. Specially when you get into filling the height of a page if there is no content.
Grid also has wrap?
no
it has repeat(auto-fill/fit, ....)
Ah ok
Flex wrap and how it makes children max-width/auto by default is a great pattern for what it does
You want wrap you use flex 😄
Yup. I'm still not that strong in Flexbox either. I just know how to center stuff. That's all. Or use the align/justify properties. I need to build more projects to pratice it. I've just been praticing CSS grid mostly.
thats good learn grid first then flex 💪
I am familiar with both but took a long break from HTML/CSS. Now I am learning it again. I wasn't that good to begin with though.
This time I am building more projects to learn rather than just following a long with tutorials