
Gridt by gavink
A highly customizable CSS Grid overlay for web developers
You'll need Firefox to use this extension
Extension Metadata
Screenshots

About this extension
Gridt, a nifty, highly customizable grid overlay perfect for grid based layouts.
Features:
- Customizable Columns, Rows, Grid Gaps, & Outside Margin!
- Attach grid to window or html element via CSS Selectors!
- Use your own grid-template-columns / rows for uneven grids!
- Grid stays open on hot reload!
- Adjustable line color & stroke width!
- Light Mode & Developer Mode 😎
Using the gridt:
Once Gridt is installed you can start adjust columns, rows, outside
margin (of even length), and grid gaps using the basic settings. You can also
keep your grid attached to the window or attach to an html element by using css
selectors.
In the advanced settings you can input your own grid-template-columns or rows
for uneven grid layouts, customize the outside margins individually, customize
grid line color and stroke, and toggle to keep the grid open on hot reload.
Out of the box you can toggle the grid with `Cmd/Ctrl + .` or you can change
your keybinding in the settings.
Features:
- Customizable Columns, Rows, Grid Gaps, & Outside Margin!
- Attach grid to window or html element via CSS Selectors!
- Use your own grid-template-columns / rows for uneven grids!
- Grid stays open on hot reload!
- Adjustable line color & stroke width!
- Light Mode & Developer Mode 😎
Using the gridt:
Once Gridt is installed you can start adjust columns, rows, outside
margin (of even length), and grid gaps using the basic settings. You can also
keep your grid attached to the window or attach to an html element by using css
selectors.
In the advanced settings you can input your own grid-template-columns or rows
for uneven grid layouts, customize the outside margins individually, customize
grid line color and stroke, and toggle to keep the grid open on hot reload.
Out of the box you can toggle the grid with `Cmd/Ctrl + .` or you can change
your keybinding in the settings.
Rate your experience
Support this developer
The developer of this extension asks that you help support its continued development by making a small contribution.
PermissionsLearn more
This add-on needs to:
- Access browser tabs
- Access browser activity during navigation
This add-on may also ask to:
- Access your data for all websites
More information
- Add-on Links
- Version
- 1.0.3
- Size
- 168.66 KB
- Last updated
- 2 months ago (Mar 5, 2025)
- Related Categories
- License
- MIT License
- Version History
Add to collection
Release notes for 1.0.3
- Added a resize event listener on the appended element
- Changed gridline elements to gridt-columns / gridt-rows
- Corrected storage method in background script
- Fixed messaging between background script & popup
- Added a tsx constructor which will be used to develop a better user interface in the future
More extensions by gavink
- There are no ratings yet
- There are no ratings yet
- There are no ratings yet
- There are no ratings yet
- There are no ratings yet
- There are no ratings yet