Grid Ruler
Extension Actions
CRX ID
joadogiaiabhmggdifljlpkclnpfncmj
Status
- Live on Store
Description from extension meta
Create grids and measure their distance easily.
Image from store
Description from store
It allows web developers to create vertical and horizontal grids, Photoshop style.
It has a ruler to measure distance between your grids too.
# How to use:
- click & drag from main vertical/horizontal ruler to create grid guides.
- click on intersection of vertical ruler and horizontal ruler to go into measurement mode.
- while in measurement mode, hold `Shift` key to get a straight line.
Latest reviews
- Oliver Tripp
- Decent Tool. Nothing more. The color of the lines you're drawing is not changeable therefore this tool can't be used for many things. Would be an easy fix to give users the ability to change colors, this should be done. The ability to save a grid-layout would also be beneficial.
- Nikita Pushkin
- Works as designed, helped me a lot
- Dawid Moskalczuk
- Very usefully, thank You.. missing only to save/auto load rulers on hard page refresh.
- Edwin Brito
- Love this app 👍👍 Thanks for sharing
- my smtpd
- Would be very good if you can add CLEAR button to remove all rulers, Thank You
- Siraj Memon
- Verry useful for quick measurements or straight alignment.
- Sneha R
- Perfect....awesome. Does the job very well
- Katie Nance
- It does its job. I've tried many grid and ruler extensions, just wanting grid lines to check my alignment when doing frontend work. But every other extension tries to force you to make boxes to measure things, when all I needed was alignment and the occasional measurement. This one works perfect. I can get grid lines just like in Photoshop. It hasn't been updated in 10 years apparently, but I've used it my entire career without issues.
- Flaviu Jurcut
- Verry useful for quick measurements or straight alignment.
- Andrejs Garbuzovs
- Vary easy to use! But: 1) ruler show over content - It would be better if roulette was pushing out content. 2) no opportunity to use it with Device Toolbar in chrome developer mode.
- Andrei Kurhan
- Simple to use, does its job perfectly
- Ajit Waghmare
- Apart from the responsive mode bug, this tool is very helpful.
- Darshan Parmar
- This Tool is very greatest and helpful make a responsive websites in Proper Alignments.
- Ken Mendoza
- This is a great tool especially if you build websites. Only suggestion would be to add an option where we can select the color of the grid ruler not just light blue, sometimes it's hard to see when the background has bright color.
- Артена SEO
- Раньше было очень полезным расширением, теперь кроме линеек ничего не работает, направляющие не вытаскиваются
- Eduardo Bautista
- This should be a very useful extension but for people like me that rely on numbers and measurement for development purposes, this is not so helpful. - would be great to have a unit of measure included (and have the option to choose what type of unit)
- Terje Nesthus
- Its a cool plugin, but it does not work in responsive mode, you cannot click the rulers
- Terje Nesthus
- Its a cool plugin, but it does not work in responsive mode, you cannot click the rulers
- STX
- I thought I saw this someplace before. I think mah brain had me thinking it was a Chrome feature because I used it in Photoshop to cut up website designs in the 90s. Maybe it was Firefox. Maybe it was an alternative reality or parallel universe. Why isn't this in DevTools already?!!! This is exactly what I need! +1 Grid Ruler Creator +1 !!!
- STX
- I thought I saw this someplace before. I think mah brain had me thinking it was a Chrome feature because I used it in Photoshop to cut up website designs in the 90s. Maybe it was Firefox. Maybe it was an alternative reality or parallel universe. Why isn't this in DevTools already?!!! This is exactly what I need! +1 Grid Ruler Creator +1 !!!
- Carlos Pulido Luque
- Si estás diseñando una web y no usas programas como Figma es ideal. Muy útil para diseñar en Wordpress. Me parece una herramienta sencilla, útil y bien hecha. Lástima que lleve tanto sin actualizarse.
- Jo Blogs
- Does exactly as it's meant to, provides guides so you can align elements on a page. Easy to use.
- Jo Blogs
- Does exactly as it's meant to, provides guides so you can align elements on a page. Easy to use.
- Tamakamasa Iwasaki
- The function to measure the px of a selection of pages is not working well these days.
- Tamakamasa Iwasaki
- The function to measure the px of a selection of pages is not working well these days.
- Esteban Soriano
- No funciona
- Yunhai Wang
- 一小格是多少px啊，还是vw？能不能有个说明
- Luiza Schmidt
- It doesn't work well when you are inspecting the page or testing responsiveness in chrome dev tools. So the tool isn't as complete as it could be, mainly when it comes to front end development.
- Luiza Schmidt
- It doesn't work well when you are inspecting the page or testing responsiveness in chrome dev tools. So the tool isn't as complete as it could be, mainly when it comes to front end development.
- Youssef OUIZIANE
- Thank you, very simple !
- Youssef OUIZIANE
- Thank you, very simple !
- Poked Armory
- Nothing happened when I clicked on the extension.
- Poked Armory
- Nothing happened when I clicked on the extension.
- Estrella Peña
- Me es de mucha utilidad, muchas gracias
- Originality Maze. TV
- Really Loved it! SO HELPFUL!
- Originality Maze. TV
- Really Loved it! SO HELPFUL!
- Arnold Thabang Moeketsi
- Excellent ruler tool but I only figured it out because I have experience in photoshop and illustrator. I don't think beginners will have an easy time trying to use it.
- Arnold Thabang Moeketsi
- Excellent ruler tool but I only figured it out because I have experience in photoshop and illustrator. I don't think beginners will have an easy time trying to use it.
- Vlad Zams
- I liked that rulers stays persistently after being added to the page while still allowing to continue interacting with the page. Along with following the explanation here in the comments how to switch to measurement-mode, this tool solves at least 90% of my problems. The explanation about measurement-mode, btw, is the following: 1. when rulers are enabled (visible), click on the top left corner of your page (a rectangular space between the left and top ruler) > you should see the rectangle is turned to be blue 2. do a mouse-left-click anywhere on the page and start dragging (just like you'd do to draw a line in any graphical editor) > you should see a segment is drawn along with a label with a distance specified Optionally you can hold Shift button while drawing the line to make it strictly vertical or horizontal – that also helps a lot!) Tnx!
- Vlad Zams
- I liked that rulers stays persistently after being added to the page while still allowing to continue interacting with the page. Along with following the explanation here in the comments how to switch to measurement-mode, this tool solves at least 90% of my problems. The explanation about measurement-mode, btw, is the following: 1. when rulers are enabled (visible), click on the top left corner of your page (a rectangular space between the left and top ruler) > you should see the rectangle is turned to be blue 2. do a mouse-left-click anywhere on the page and start dragging (just like you'd do to draw a line in any graphical editor) > you should see a segment is drawn along with a label with a distance specified Optionally you can hold Shift button while drawing the line to make it strictly vertical or horizontal – that also helps a lot!) Tnx!
- Vitor Santos De Oliveira
- I've been using it for 1 month and the point I'd like to make is that sometimes it just stop working, I click on the extension but it doesn't work. But in general it's a great extension.
- Vitor Santos De Oliveira
- I've been using it for 1 month and the point I'd like to make is that sometimes it just stop working, I click on the extension but it doesn't work. But in general it's a great extension.
- Nina Musillo
- The grids are cool and I managed to figure out how to get the actual measurement function to work. Im rating 3 stars because it took me 10 minutes to figure out the ruler...because the website page I was testing it on it doesn't work. I tried a different website and the ruler worked. Extension should function regardless of the platform the website was built with (joomla in this case)
- Nina Musillo
- The grids are cool and I managed to figure out how to get the actual measurement function to work. Im rating 3 stars because it took me 10 minutes to figure out the ruler...because the website page I was testing it on it doesn't work. I tried a different website and the ruler worked. Extension should function regardless of the platform the website was built with (joomla in this case)
- UwU
- How to remove grid line? or the straight line created in "ruler mode"?
- UwU
- How to remove grid line? or the straight line created in "ruler mode"?
- Leonardo Albuquerque
- I've been using it for years and I love it. But I never got to make it work while on mobile/responsive view. The clicks are just ignored. It would be perfect if it worked on mobile/responsive view
- Leonardo Albuquerque
- I've been using it for years and I love it. But I never got to make it work while on mobile/responsive view. The clicks are just ignored. It would be perfect if it worked on mobile/responsive view
- Bruno Finger
- Great extension I rely on for years. Just one small issue. Please make them use the maximum z-index allowed. I have elements drawing on top of them, especially the website tap navbar drawing on top of the top ruler so I can't use it.
- Bruno Finger
- Great extension I rely on for years. Just one small issue. Please make them use the maximum z-index allowed. I have elements drawing on top of them, especially the website tap navbar drawing on top of the top ruler so I can't use it.