The Grid Inspector allows you to examine CSS Grid Layouts using the Firefox DevTools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
Note: The examples shown in the screenshots appearing in this article are Jen Simmons' Futurismo and Variations on a grid experiments, and a live named grid area example from Rachel Andrew.
Meet DL Shaq Lawson. Logo Instagram logo Snapchat logo YouTube logo TikTok logo Spotify logo LinkedIn logo Grid icon Key icon Left arrow icon Link icon. (v80 and later), Firefox and Safari. Google meet feature - 'change background' is not showing in firefox browser whereas it is showing in chrome Status bar or ANY way to view link URLs Why Firefox enforces by default extensions like Amazon, Bing, eBay, Google?
- May 31, 2020 The Google Meet Grid View add-on for Firefox enables a full-screen view of all the participants of a particular meeting. This add-on also has an option to only show the participants with a video. The Grid View setting could be chosen as a default selection in this add-on.
- Aug 29, 2020 Google meet grid view Firefox The process is the same for Google meet grid view on Firefox. Here you can remove and add an extension just as you do for Chrome or any other browser. Push to Talk Google Meet Extension.
- Grid view gives every participant an equal sized video for use in meetings without a primary speaker (such as working from home silent meetings). This extension forcibly loads every participant's video when grid view is enabled and may cause performance issues in extremely large meetings.
Discovering CSS grids
When an HTML element on your page has display: grid applied to it, a number of features are made available in the DevTools to provide easy access to grid features.
In the HTML pane
In the HTML Pane, elements laid out using a grid have a 'grid' marker beside them.
In the CSS pane
In the CSS pane's Rules view, any instance of a display: grid declaration gets a grid icon included within it: .
Clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks:
The overlay is still shown when you select other elements, so you can edit related CSS properties and see how the grid is affected.
The Layout view Grid section
When grids are included on a page, the CSS pane's Layout view includes a 'Grid' section containing a number of options for viewing those Grids. You can find out more about those in the section below.
Note: The Layout view can be found underneath the Layout tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.
Grid options
The Grid section of the Layout view looks like this:
You'll see a number of options contained within:
- Overlay Grid: Contains a checkbox for each grid present on the page, along with various options. Allows overlay views to be toggled on and off.
- Grid Display Settings:
- Display line numbers: Turn the line numbers shown for each grid overlay on and off (on by default).
- Display area names: Turn area names on and off, in the case of grids with named grid areas (on by default, where relevant).
- Extend lines infinitely: By default, grid lines/tracks are only shown inside the element with
display: gridset on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis.
- Mini grid view: A smaller view of the currently overlaid grid.
Note: Your grid preferences such as overlay color and display settings choices are persisted across page loads for each separate page.
Let's examine these features in more detail.
Overlay grid
Each grid present on a page has an entry in the 'Overlay grid' section:
Each entry consists of (from left to right):
- A checkbox allowing you to toggle the grid overlay for that grid on and off.
- A name label to represent the grid, consisting of a selector identifying the HTML element that has the grid applied to it. Clicking this also toggles the grid overlay on and off.
- A target icon that when clicked immediately selects the HTML element that this grid entry relates to, inside the HTML pane.
- A color picker icon that allows you to change the primary color of the grid overlay. This is useful for selecting different colors so you can easily tell your grids apart.
Inspecting a subgrid
When the page contains a grid with a subgrid, the entry for the subgrid is indented under its parent in the Overlay grid section. When you select the checkbox for the subgrid, the lines for the parent grid are displayed also displayed; if the checkbox for the parent grid is unselected, then its lines are translucent.
Display line numbers
By default, the line numbers are displayed on the grid overlay.
Unchecking the 'Display line numbers' box turns them off.
Display area names
In a grid with named areas, the area names are shown on the grid overlay by default.
Unchecking the 'Display area names' box turns them off.
Extend lines infinitely
By default, the grid lines/tracks are only shown inside the element with display: grid set on it.
When you check the 'Extend lines infinitely' option, the grid lines extend to the edge of the viewport along each axis.
Mini grid view
Shows a small version of the currently overlaid grid, which is in proportion to the real thing.
Hovering over the different areas of the mini grid causes the equivalent area on the grid overlay to also highlight, along with a tooltip containing useful information such as the dimensions of that area, its row and column numbers, etc.
See also
- labs.jensimmons.com — lots of interesting grid examples.
- Grid by Example — CSS Grid learning resources from Rachel Andrew.
- CSS Grid Layout — MDN CSS Grid Layout references and tutorials.
Firefox is now supported by Google Hangouts and Meet
Firefox Meet Grid View
After extensive work from the Google Hangouts team and the Firefox WebRTC team both, the consumer version Google Hangouts and the enterprise version Google Meet, are working in Firefox with no plugin required thanks to WebRTC!
How we got here
Google Meet Grid View Firefox
Turning off the NPAPI support in Firefox 53 resulted in the Google Hangouts plugin not working anymore. Unfortunately that meant that Firefox users could no longer enjoy Google Hangouts or Meet.
Google Chrome users could continue to use Hangouts and Meet without a NPAPI plugin, because the Google Hangout backend service had support for a flavor of WebRTC only implemented in Google Chrome. But that version was not spec compliant and was thus never supported by Firefox.
Meet Google Grid View Firefox
It took a considerable amount of effort from the Google Hangouts team to update their backend service to the latest version of the WebRTC specs to support Firefox. At the same time the Firefox WebRTC team implemented a bunch of features to support large scale conferencing for Google Meet.
In fact Google Hangouts, the consumer version, started working with Firefox 56. Now with Firefox 60 we were able to ship all the required features to also support Google Meet.
Thanks to all the hard working people involved in this project and resulting in making the Open Web a better and safer place from today on!