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
Jochem
Jochemβ€’10mo ago
preference, mostly I like the semi-visual nature of areas, so I pretty much use them exclusively
clevermissfox
clevermissfoxβ€’10mo ago
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
Jochem
Jochemβ€’10mo ago
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...
b1mind
b1mindβ€’10mo ago
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.
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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.
Jochem
Jochemβ€’10mo ago
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)
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
"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?
Jochem
Jochemβ€’10mo ago
yes, but not necessarily what I mean with that part of my message. I mean if you want multiple elements in the same position:
.container {
grid-template-areas: "a b c";
}

.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: b;
}
.four {
grid-area: c;
}
.container {
grid-template-areas: "a b c";
}

.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: b;
}
.four {
grid-area: c;
}
but yeah, you can mix and match, have some things using line numbers and most others use areas
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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
Jochem
Jochemβ€’10mo ago
it's the best way to get things to overlap, much, much better than position: absolute; yup
b1mind
b1mindβ€’10mo ago
you also have control over the position with grid too which makes it really fun for overlapping.
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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?
b1mind
b1mindβ€’10mo ago
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
.three {
grid-area: b;
place-self: end;
}
.three {
grid-area: b;
place-self: end;
}
and it would be on the bottom right where two would default to start
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
I haven't dove into positioning yet with grid. I saw that mdn had documentation on that. Using the position properties
b1mind
b1mindβ€’10mo ago
also for centering ofc πŸ‘¨β€πŸ³ πŸ’‹ (you can do a "dog pile" too) by just putting everything in the same area and place-items/content: center;
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Like alignment etc
b1mind
b1mindβ€’10mo ago
Its way better for responsive layouts than position: absolute. In lots of cases.
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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.
b1mind
b1mindβ€’10mo ago
#depends you can even use it with grid xD (and then use grid positioning)
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Oh wow, that's interesting
b1mind
b1mindβ€’10mo ago
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.
b1mind
b1mindβ€’10mo ago
Here is my funky test of it lol
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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
b1mind
b1mindβ€’10mo ago
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
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
You would need a crazy amount of columns/rows if you did that without position property correct?
b1mind
b1mindβ€’10mo ago
πŸ€·β€β™‚οΈ 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
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Nest grids. I assume that's where subgrid comes in?
b1mind
b1mindβ€’10mo ago
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 πŸ˜„
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Ah, I don't think I've ever tried that
b1mind
b1mindβ€’10mo ago
Kevin has a few good videos that he shows how to break up a design
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
What I did one time.
b1mind
b1mindβ€’10mo ago
like it should never be just 1 grid honestly πŸ˜„
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Oh really? I should see that one then
b1mind
b1mindβ€’10mo ago
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.
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Grid also has wrap?
b1mind
b1mindβ€’10mo ago
no it has repeat(auto-fill/fit, ....)
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
Ah ok
b1mind
b1mindβ€’10mo ago
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 πŸ˜„
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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.
b1mind
b1mindβ€’10mo ago
thats good learn grid first then flex πŸ’ͺ
Takyon_is_Online
Takyon_is_Onlineβ€’10mo ago
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
Want results from more Discord servers?
Add your server