Debugging CSS Grid Layouts With Firefox DevTools

Debugging CSS Grid Layouts With Firefox DevTools

I made plenty of mistakes right after I learned CSS Grid. Whatever mistakes you have made or will be making, I’ve probably made them. It’s all right to make mistakes, we just need to learn from them and fix them.

I made plenty of mistakes right after I learned CSS Grid. Whatever mistakes you have made or will be making, I’ve probably made them. It’s all right to make mistakes, we just need to learn from them and fix them.

In this piece, I will go through five common mistakes made when creating a grid layout. I’ll use Firefox’s in-built DevTools to debug them and share tips that can reduce the chances of making the same mistakes again. Alignment mistakes are not included— I’ll cover them in my next piece.

If you are a seasoned user of CSS Grid, you’re welcome to treat my article as entertainment. My early mistakes can be outright silly. If you’re a new user, take this as a lesson on what not to do!

Setup

To turn on DevTools, select Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.

The Intended Grid Design

This is image title

What I wanted.

Common Mistake 1: Mixing up plural and singular terms

It is easy to mix up the plural and singular terms when declaring a grid property:

  • display: grid becomes display: grids
  • grid-template-areas becomes grid-template-area
  • grid-column: 1 / 2 becomes grid-columns: 1 / 2

Declaring **display: grids** results in a grid-less layout

This is image title

Example 1a

We can tell that something is wrong in Example 1a by looking at the page layout. It is showing a single column layout.

Diagnosis with DevTools:

  • In the HTML pane, look for the grid container aka parent element.
  • Grid containers will have a grid icon in the markup view. As there is no grid icon in the markup view along the line for <div class=”wrapper”> in Example 1a, grid is not applied on the elements.

This is image title

A grid icon is displayed when a grid is created

  • Under the Style pane, a crossed out display property on .wrapper with a warning icon is shown. This warns that we have unsupported CSS properties or rules that have invalid values in our CSS.
  • A closer look will tell us that the mistake stems from declaring an invalid value of grids.

Declaring Grid-Template-Column: 1fr 2fr 2fr Results in a Grid-Template-Columns: 1fr 1fr 1fr Layout

This is image title

Example 1b

You can tell whether the size of the column tracks of Example 1b is wrong by turning on Overlay Grid in DevTools.

Diagnosis with DevTools:

  • To turn on the Overlay Grid, in the HTML pane, look for the html line with <div class=”wrapper”>.
  • Tap on the grid icon, and under Layout pane, select the grid container div.wrapper.
  • The grid lines show that the sizes of the column tracks are wrong.
  • Under the Style tab, a warning icon is displayed right beside the crossed out grid-template-column property on .wrapper. This warns that we have unsupported CSS properties or rules that have invalid values in our CSS.
  • Search for the term grid-template-columnon Google. It will show results showing grid-template-columns, with an 's'.

Tip 1: In general, use the singular form for properties targeting individual grid item, and plural form for grid-container.

Mistake 2: Applying Grid Property on Non-Grid Items

This is image title

Example 2

You can see that the div.box elements are not positioned correctly in the grid in Example 2. Boxes 1 and 2 are not positioned on the same row and neither are boxes 3 and 4.

Diagnosis with DevTools:

  • In the HTML pane, select the html line with <div class=”wrapper”>
  • Under the Style tab of each element that doesn’t follow the grid, examine the declared styles.
  • Tap to ⓘ next to the style rule to read what is wrong and how to troubleshoot it.

Tip 2. Visualise the layout in terms of parent and child elements before coding. Grid only applies to parent and child elements.

Mistake 3: Missing Values in Grid-Template-Areas Property

This is image title

Example 3

The elements are not in their correct grid cells. They are all positioned in the last cell grid cell.

Diagnosis with DevTools:

  • In the HTML pane, select the html line with <div class=”wrapper”>
  • Under the Style tab, notice that the grid-template-areas property has been crossed out. This means that it was not applied.
  • Search for the term grid-template-areason Google
  • This mistake is caused by the input of wrong values for grid-template-areas property. There should be three named areas for each row. If there is nothing in a column, a null cell token in the form of . should be added.

Tip 3: All strings must have the same number of columns, or else the declaration is invalid. — W3C

Mistake 4: Numbering Column Lines by ‘Column Numbers’

This is image title

This is image title

Example 4

You can see that the grid-items are not in their correct cells and they are not of the correct length.

Diagnosis with DevTools:

  • To turn on the Overlay Grid, in the HTML pane, look for the html line with <div class=”wrapper”>.
  • Tap on the grid icon, and under Layout pane, select the grid container div.wrapper.
  • The grid lines show the number indicators.
  • The grid-column value for header and footer should be 1 / 4 instead of 1 / 3. aside should be grid-column: 1 / 2 and content should be grid-column: 2 / 3.

Tip 4: We indicate the placement of items using column lines. The column and row lines are different from the number of rows and columns.

Mistake 5: Miscounting the Number of Columns Needed

This is image title

Example 5

Notice a mistake that is repeated throughout earlier examples? I almost missed it myself.

You can see that the grid seems fine in Example 5. All the grid-items are placed in the correct grid cell.

To see the mistake, draw out the grid lines you need to create the outer grid.

This is image title

Drawing of the outer grid

You should see that the grid only requires two columns. The inner grid for boxes 1–4 need not be factored in when we declare the grid-template-columns property on div.wrapper.

Tip 5: Drawing out on pen and paper helps when you have nested grids.

Recap

  • Use the singular form for properties targeting individual grid item, and plural form for grid-container.
  • Visualise the layout in terms of parent and child elements before coding.
  • All strings must have the same number of columns.
  • Indicate the placement of items using column lines and row lines.
  • Draw column lines and row lines on the layout design helps when working with nested grids.

Resources

css programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Programming In Acceleration: Levelling Up Programming Skills

Some require and some are not. But acceleration programs might require you to build one. I’ll tell you how I made a computer program for the competition.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

How to use animate css tutorial with examples - Duomly Blog - Programming courses online

In this article I'd like to show you how to use animate css library to get add stunning animations to your page or application. Animate CSS is a great ...

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles