Debugging CSS Grids

Web Development Bootcamp
1

Hey,
For those of you that are a little bit ahead of the bootcamp schedule and have worked with Grids. How do you debug them and find potential bugs in your grid code?
I’m asking because I spent a lot of time trying to figure out why my grid didn’t take up the full width of the browser even though I had set html and body to 100%.

The issue was that I’d misnamed one grid-area. My grid-template-areas said ‘f’ for footer in the bottom row, but my footer tag was named ‘footer’, not ‘f’. I hope there’s a way to spot these typos…

3 Likes
2

I start off with using developer tools. Both Chrome and Firefox have great grid/flex features in their developer tools.

Here’s an example of a flex element in Chrome (grid would appear the same):
dev

Clicking the flex button will outline the layout and help you spot issues with any properties.

ETA: The above method won’t show us the typo directly, but it’ll show us where our layout is breaking, and then lead us to said typo.

3 Likes
3

Thanks, yup I use Chrome DevTools but I guess I’m not skilled enough in it to understand these kinds of bugs yet.

4

Hello @davidlars the article below is a good introduction to the topic.

Debugging CSS Grid like a PRO

5 Likes
5

Alexsander, thanks for sharing that article. Kudos to you!

1 Like
6

Thank you for sharing that article, Alexander. Chrome DevTools was helpful earlier today when building the Tech Doc page from the course projects. As Matthew mentioned, it doesn’t quite help you find some potential typos, but the main red flag for a typo in the layout code is that the whole website totally breaks :smiley: That’s when I go look for typos lol

3 Likes