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.
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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 usegrid-template-columns
for this reason. Other than that, the clear advantage goes to grid areas for legibility.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 usegrid-template-columns
andgrid-template-rows
more often, sometimes I find them unnecessary, and like you said,grid-template-areas
is great for legibility.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 useminmax
andauto-fill/fit
.