![[The Modular Grid logo. ]](img/logo.png){kind=logo}
What is it?
The Modular Grid provides a set of grid overlays in web pages so web authors can better implement translations of design comps to web pages. The user is able to create baseline, or leading, grids, column grids, and modular (simultaneous baseline and column) grids. Some key options include changing baseline distances, altering column and gutter widths, and updating baseline and column colors.
Install
The Modular Grid is in beta, so installation is manual. Read instructions here. Once released, the extension will be available via the Chrome Web Store or Chrome’s Extensions page, with new features available in beta releases via GitHub.
Examples
The Modular Grid can render basic grids. For example:
A Leading Grid
![[A screen shot of a leading grid.]](img/leading-grid.png "An example of a leading grid.")
A Column Grid
![[A screen shot of a column grid.]](img/column-grid.png "An example of a column grid.")
A Modular Grid
![[A screen shot of a modular grid, consisting of the combination of a leading and column grid.]](img/modular-grid.png "An example of a modular grid, consisting of the combination of a leading and column grid.")
A Single-Pixel Grid
![[A screen shot of a box-like grid consisting of 1-pixel columns where gutter width is equal to vertical distance.]](img/single-pixel-grid.png "An example of a box-like grid consisting of 1-pixel columns where gutter width is equal to vertical distance."){kind=tracking}
The Options Page
![[A screen schot of The Modular Grid’s options page.]](img/options.png "All the available options of The Modular Grid.")
Contributing
As an open source project, The Modular Grid is open to contributions from everyone, and you don’t even need to be a web programmer. For example, we need German, French, Spanish, and Italian translations of The Modular Grid. If you are a web programmer, The Modular Grid uses HTML, CSS, Sass, core JavaScript, and Gulp. All open issues are filed on GitHub.
Feature Requests
Suggestions, feature requests, and bugs may be submitted via GitHub.