DEV Community

Discussion on: CSS Grid: "The Big Three" cheat code

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

grid-template-areas is pretty awesome! Unfortunately, it's not a good option for responsive layouts (you'll have to use media queries). I prefer to use grid-template-columns for this reason. Other than that, the clear advantage goes to grid areas for legibility.

Collapse
 
lexjames06 profile image
Lex

What issues do you have when using grid-template-areas in responsive design? I use it for responsive design and haven't yet needed to use media queries yet, but I'm only 1 person haha. In my experience, they both have their place and while I probably use grid-template-columns and grid-template-rows more often, sometimes I find them unnecessary, and like you said, grid-template-areas is great for legibility.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

The key problem with grid-template-areas is that the columns can't wrap if they need to, unless you force them to with media queries and restructuring the areas.

With grid-template-columns, you can use minmax and auto-fill/fit.