Have you ever wanted gridlines directly in your browser to measure lines while developing? Then this is for you. You can also measure distances between elements in pixels. Swell right.
Hex Grid is a Chrome Extension that aims to ease frontend development by guiding choices made during spacing and positioning of elements/components/boxes on web apps/pages. With Hex Grid, you can draw a virtual grid on any web page, know the borders of elements, and determine the vertical and horizontal pixel distances between any two HTML elements on a web page.
To use Hex Grid, you must have installed it from Chrome Webstore and activated it. When activated, top and left rulers can be seen on the web page. Pin Hex Grid to Chrome's topmost bar for easy access. To activate Hex Grid, click on the pinned Hex Grid icon.
Hex Grid has two rulers. One fixed at the top of the page and the other fixed at the left of the page. They have markings at regular intervals, better known as gradations. The markings are separated by 10px with bolder ones at 100px intervals. Rulers are used build grids by pulling out gridlines from them. When Hex Grid is active, the rulers are in view.
Gridlines are straight, vertical or horizontal lines placeable at any point on the web page. They are moveable and deleteable. These lines run from either the top or left ruler to the extreme bottom or right of the screen. Gridlines basically make up the grids you build with Hex Grid.
In essence, you build/draw a grid by pulling gridlines from the rulers. Hover over any ruler and drag the mouse out to any point of the page. You have just "pulled out"/created a gridline. Long press on the gridline and drag the mouse to move the line to any place of your choice. Pull out many vertical and horizontal gridlines and position them as you wish to build your grid.
To delete a gridline, click on it to focus it. Then press the Delete Key or Backspace Key and it will be deleted.
At any point in time, you can turn off the gridlines or make the grid invisible by toggling Grid Visibility from Hex Grid's submenu from Chrome's right click menu anywhere on a web page.
Grids/Grid lines are temporary. They do not persist across different sessions of your usage of Hex Grid. For example, if you had pulled gridlines and deactivated Hex Grid (by clicking on the pinned Hex Grid icon), all those gridlines are lost. If you re-activate Hex Grid after that, you will see only the top and left rulers. Please have this in mind, while using Hex Grid.
As the name suggests, this feature of Hex Grid permits you to determine the distance between any two points on the web page, in pixels.
When Hex Grid is activated, click on any point (element) in the web page. (If you click on an element, its borders are shown). Then drag to the mouse to another point. As you are drag, two lines follow your mouse drag and on them are the pixel distances dynamically changing as you drag the mouse. Click anywhere a second time to stop the drag and keep the distance static. You can read the distance from here. Clicks elsewhere on the page clears previously set pixel distances.
At any point in time, you can turn off this pixel distance feature by toggling Pixel Distance Visibility from Hex Grid's submenu from Chrome's right click menu anywhere on a web page.