DEV Community

loading...
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 https://unsplash.com/@d_mccullough

Discussion (0)

pic
Editor guide