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
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.ah okay i appreciate the opinion, thank you.
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”.Ah okay that makes sense, thank you for the explanation