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.

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:

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.

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.

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.

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.

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:

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.

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:

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:

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.

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 #web-development #html

What is GEEK

Buddha Community

Coming through with Firefox 82 – Mozilla Hacks

As October ushers in the tail-end of the year, we are pushing Firefox 82 out the door. This time around we finally enable support for the Media Session API, provide some new CSS pseudo-selector behaviours, close some security loopholes involving the Window.name property, and provide inspection for server-sent events in our developer tools.

This blog post provides merely a set of highlights; for all the details, check out the following:

• Firefox 82 for developers on MDN
• Firefox 82 end-user release notes

Inspecting server-sent events

Server-sent events allow for an inversion of the traditional client-initiated web request model, with a server sending new data to a web page at any time by pushing messages. In this release we’ve added the ability to inspect server-sent events and their message contents using the Network Monitor.

You can go to the Network Monitor, select the file that is sending the server-sent events, and view the received messages in the Response tab on the right-hand panel.

For more information, check out our Inspecting server-sent events guide.

Web platform updates

Now let’s look at the web platform additions we’ve got in store in 82.

Media Session API

The Media Session API enables two main sets of functionality:

1. First of all, it provides a way to customize media notifications. It does this by providing metadata for display by the operating system for the media your web app is playing.
2. Second, it provides event handlers that the browser can use to access platform media keys such as hardware keys found on keyboards, headsets, remote controls, and software keys found in notification areas and on lock screens of mobile devices. So you can seamlessly control web-provided media via your device, even when not looking at the web page.

#developer tools #featured article #firefox #firefox releases #css #firefox #firefox 82 #firefox developer edition #firefox release #web extensions

Debugging Variables With Watchpoints in Firefox 72

The Firefox Devtools team, along with our community of code contributors, have been working hard to pack Firefox 72 full of improvements. This post introduces the watchpoints feature that’s available right now in Firefox Developer Edition! Keep reading to get up to speed on watchpoints and how to use them.

#debugging #developer tools #featured article #firefox #firefox releases #breakpoints #debugger #debugger for firefox #firefox devtools #firefox visual studio code extension #watchpoints

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

• Styling the last row of a grid with CSS selectors
• Grid Animation Effects
• Simple grid mixin
• Simple Grid CSS Grid
• Simple CSS Grid Hover
• Simple css Grid – Responsive
• Simple css grid system using scss
• CSS variables simple CSS grid
• Super Simple CSS Grid
• 3D Grid UI
• Aspect ratio Grid boxes with CSS Variables
• Simple grid system
• Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

9 Free CSS Masonry Grid Layouts

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

• CSS Masonry Grid Animation Effects
• Using vanilla JS to implement masonry grid
• Bootstrap Masonry Grid Template
• Vanilla JS Masonry Grid Layout Method
• Responsive masonry grid made with ReactJS and flex-box
• Display Images On Your Website With The Masonry Grid (Vanilla JS)
• Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS
• Isotope & Fancybox Masonry image grid with good animation
• Build a CSS Masonry grid Layout with just HTML and CSS

#layouts #css grid #grid #css masonry #css #free

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics