DEV Community

Cover image for Grid Template Areas

Grid Template Areas

molleira profile image Marc Oller ・2 min read

I have a very busy schedule but I try to find some time every weekday to code, commit to Github and learn new skills. I'm currently at the final stage of my Bootcamp, which is focused towards finding a tech job (I'm a career changer which already works on tech but in a different position). To me it is not as fun as learning new code so I keep working on my portfolio to keep learning more code.

Today I stumbled upon grid-template-areas. At first sight I wasn't able to understand it at all... what are those values assigned to that? What does this mean and what is it exactly doing?

So I did a Google search and was presented with the great MDN docs. During the bootcamp I didn't use it at all, but now I understand why developers love it so much. The MDN docs is presented with examples which make it easier to understand what the code is doing and it has a lot of links to related pages. It's very good.

Now it all makes sense, so I was able to change the layout of a portfolio item incredibly fast and easy. I think I'm just grasping the power of CSS Grid and to be honest I'm a bit overwhelmed when I try to think of all the possibilities it offers.

I know I want and will spend time reading more about Grid and I don't understand why it is not used widely since it's browser compatibility is pretty good. All in all I feel like this is an awesome way to layout several elements and that the theory behind it it's harder to understand than to put it in practice.

Photo from

Discussion (0)

Editor guide