grid features use cases

Hey, i have a few questions regarding some grid features: 1. When should you use the span keyword over line numbers? e.g. grid-column: span 2; instead of grid-column: 1 / 3; 2. In what situations should you use grid-template-areas or named line numbers e.g. [xyz-start] 1fr [xyz-end], is it so things are easier to keep track of? Thank you in advance.
4 Replies
Joao
Joao6mo ago
I think it doesn't really matter, use whatever works best for you. I like using grid-template-areas a lot, as it's far more descriptive and you can even see how it will look like right there in the code.
snxxwyy
snxxwyyOP6mo ago
ah okay i appreciate the opinion, thank you.
clevermissfox
clevermissfox6mo ago
I prefer named lines as then I can change the layout in a media / container query without having to redefine on all of the children their cells (eg. grid-column: 2 /5; => @media … grid-column: 2/3;) ; so harnessing the power of grid-areas without having to redefine or overwrite every child’s cell AND you can still use overlapping cells in you need to (which you cannot w grid-template-areas). Best of both worlds in my opinion. But depends on your use case. As for your first question you can also do grid-column: 1 / span 2; so you’re defining where it starts as well if you need to move the element from its default column. Your example of span 2 vs 1/3 makes no difference except for that it’s defining a starting column (col one). Otherwise, using grid-column: span 2 , it will just span 2 columns no matter which column it starts at. And the “1/3” is just another selector you’ll need to overwrite in a media query but functionally is no different than “1/span 2”. TLDR: I prefer named line numbers so as to not have to overwrite all the children’s defined “grid-col” and “grid-rows”; I can keep it all in the parent and make changes as needed while the children are just given their names and go where they are assigned to. And also can use overlapping cells w named lines which is not possible with “grid-template-areas”.
snxxwyy
snxxwyyOP6mo ago
Ah okay that makes sense, thank you for the explanation
Want results from more Discord servers?
Add your server