Debugging CSS Grid with Firefox Dev Tools

Debugging CSS Grid with Firefox Dev Tools

In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.

In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.

CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them.

Table of Contents

  • Demo
  • Install Firefox Developer Edition
  • Open DevTools
  • Debugging with Firefox Devtools 

To do that, we will build a demo CSS Grid application and walk through the debug processes. For this article, we will be using the Firefox Developer Edition for debugging, feel free to download it if you care to follow along.

To get started, we’ll create a mini CSS project that displays a grid of cat images and then get into the debugging process with the installed Firefox developer tools.

Demo

Here’s a simple demo to serve the purpose, open your favourite code editor and paste in these HTML and CSS snippets:

//HTML file for debug demo


    ![](http://placekitten.com/g/350/200) 

     ![](http://placekitten.com/g/350/200)

     ![](http://placekitten.com/g/350/200)

     ![](http://placekitten.com/g/350/200)

     ![](http://placekitten.com/g/350/200)

    ![](http://placekitten.com/g/350/200) 

     ![](http://placekitten.com/g/350/200)

     ![](http://placekitten.com/g/350/200)

    ![](http://placekitten.com/g/350/200) 


Also, for the CSS, update your file with this snippet:

//CSS file for debug demo
body {
  margin: 40px;
  background-color: #fff
}
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.cat {
  background-color: black;
  border-radius: 5px;
  padding: 5px;
  border-color: black;
}
.cat-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The visual output is a grid layout of cat images with 3 rows and columns, as shown below:

Firefox Dev Tools

Install Firefox Developer Edition

Like I mentioned earlier, we will be using the Firefox Developer Edition for our debugging processes. If you don’t have it installed yet, feel free to follow the installation process I’ll demonstrate here:

  1. Visit the official download page
  2. Download the Firefox Developer Edition for your OS and install it on your machine. Next, go ahead and open the HTML project we created at the beginning of the post on a new tab.

Open DevTools

To inspect our project, open it up in your Firefox browser and control-click anywhere on the screen, then select Inspect Element to open up the developer tools terminal.

Firefox Dev Tools

Debugging with Firefox Devtools

Visualize Grid Containers On a Page With the new features available in Firefox Developer Edition, you can visualize all the grid containers you have on a page. It also gives you a skeletal overlay of the grid itself to better see how elements are positioned in it.

Debugging CSS Grid

Customize Grid Information on The Overlay

Oh did I mention that you can customize the grid overlay? Well, you can. You can choose to display different properties on the overlay to help you better visualize and debug your grid. Grid line numbers, area names, dimensions and indefinite grid lines are a few things you can toggle their display.

Debugging CSS Grid

The grid visible grid lines will help us understand where the tracks are, the columns, rows etc are all visible.

Interactive Grid Outlining

Mousing over the grid overlay in dev tools will outline the matching cells on the page to give you an appealing visual representation of your columns and rows while you debug. It also displays the sizes, and positions of different parts of your grid on mouse hover.

Debugging CSS Grid

Visualize Transformations Applied to Grid Containers

The grid Inspector is capable of visualizing transformations applied on grid containers. If for instance, we decide to transform our grid container by 15 degrees, we get this output:

Debugging CSS Grid

This is a very handy debugging tool given that sometimes, you have grids that are not just transformed but translated, rotated, skewed etc. In such cases, it will tell you exactly where errors are emerging from if you have any.

Grid Tracks

The columns and rows in a grid are collectively referred to as tracks. Tracks are numbered by the lines that start and stop them as we’ve seen in the previous illustrations. As a result, a grid with 3 columns will have 4 tracks horizontally and vertically.

Debugging CSS Grid

Implicit and Explicit Tracks

Tacks that are created by the rows and columns defined in the grid are called explicit tracks and are represented in the grid by the thick dashed lines in the grid gap to differentiate them from implicit tracks. It will be hard to visualize, but if we lighten up the background-color of the cat images and zoom in a bit on the grid, we should see the explicit tracks surrounding the cat images:

CSS Grid

At this point, our grid container looks like this:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

What this means is that we explicitly created rows and columns for the grid. So at the moment, we have all explicit tracks in our grid (a good way to know this is to look at the vertical and horizontal track lines in the grid, you’ll notice that they all look the same). Now if we turn off the rows in dev tools, we’ll almost notice no difference in grid display because of what we call implicit tracks.

Implicit tracks are created by default when you define rows for your grid without explicitly defining the associating columns or vice versa. To visualize this, let’s turn off grid-template-rows: 100px 100px 100px; in dev tools and check the tracks again:

CSS Grid

Now if you look closely, you will notice that the horizontal tracks are no longer as tick and visible as the vertical tracks, they are rather faint and dotted. Why? Because now they are just implicit tracks (undefined) in the grid.

Tracking changes

The Firefox dev tools also have a Changes tab where you can track all the changes you’ve made to your project from inception to completion. So far in this post, we’ve mad just about two changes, we changed the background-color and unchecked the box for grid-template-rows. If we switch over to the Changes tab in dev tools, we should see all our changes.

CSS Grid

The Firefox dev tools inspector makes it really straightforward to work with CSS grid. You can visualize all your grid data, debug any arising issues, track all your project changes and inspect animations. It is worthy to note once more that these features are not available in all Firefox browser versions, to get these features, you need either the Firefox Nightly version or the Developer Edition.

CSS Grid

css web-development html

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

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

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Best Web and App Development Company in Ahmedabad

Contact DataPierce for any questions or queries you have about website development, designing, marketing projects or any small or enterprise software development.

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.