Gridt - A highly customizable CSS Grid overlay for web developers

Gridt, a nifty, highly customizable grid overlay perfect for grid based layouts.

Table of Contents

• Features
• Getting Started
  • Installation
  • Build from source
  • Using the Gridt
• Contributing
• Support
• Star

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 😎

Getting Started

Installation

Gridt is available for download on addons.mozilla.org (AMO)

https://addons.mozilla.org/en-US/firefox/addon/gridt

Gridt is now available for download on the Chrome Web Store

https://chromewebstore.google.com/detail/gijangdmilikehdjjipfhjbehcmajkpe

Build from source

gh repo clone gavink97/gridt .
cd gridt
npm install
make eb
make build

Using the Gridt

Now that you have Gridt 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.

Contributing

I’m open to contributions.

Support

If you’re feeling generous you can support this project and others I make on Ko-fi :)

Star

If you’ve found this useful please give it a star ⭐️ as it helps other developers find my repos.