GridHelper.js

// use like 
// <GridHelper columns={12} gutterWidth={50} maxWidth={1500} />

import React, { Component } from 'react';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  componentDidMount() {
    document.addEventListener('keydown', e => {
      if (e.key === 'g') {
        this.setState({
          visible: !this.state.visible,
        });
      }
    })
  }

  render() {
    if (!this.state.visible) return null;
    const {gutterWidth, maxWidth, columns} = this.props;
    return (
      <div className="react-grid-helper" style={{maxWidth: `${maxWidth + gutterWidth}px`}}>
        <div className="lines-helper" style={{
          padding: `0 ${this.props.gutterWidth / 2}px`,
        }}>
          <div className="lines-wrapper">
            {[...Array(columns + 1)].map((_, i) => (
              <div className="line" style={{left: `calc(${100 * i}% / ${columns})`}} key={i} />
            ))}
            {[...Array(columns + 1)].map((_, i) => (
              <div className="gutter" style={{
                left: `calc(${100 * i}% / ${columns} - ${gutterWidth / 2}px)`,
                width: `${gutterWidth}px`,
              }} key={i} />
            ))}
          </div>
        </div>
        <div className="container-helper" style={{
          padding: `0 ${gutterWidth}px`,
          width: `calc(100% - ${gutterWidth * 2}px)`,
        }}>
          <div />
        </div>
        <style jsx>{`
          .react-grid-helper {
            position: fixed;
            height: 100%;
            width: 100%;
            margin: auto;
            z-index: 999999;
            left: 0;
            right: 0;
            top: 0;
            pointer-events: none;
            border-right: 1px solid #f00;
            border-left: 1px solid #f00;
            & > .container-helper {
              position: absolute;
              height: 100%;
              width: 100%;
              margin: auto;
              top: 0;
              left: 0;
              right: 0;
              & > div {
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                border-left: 1px solid #0f0;
                border-right: 1px solid #0f0;
              }
            }
            & .lines-helper {
              position: absolute;
              height: 100%;
              width: 100%;
              margin: auto;
            }
            & .line {
              position: absolute;
              display: block;
              height: 100%;
              width: 1px;
              background: rgba(0, 255, 255, 0.4);
              top: 0;
            }
            & .gutter {
              position: absolute;
              display: block;
              height: 100%;
              background: rgba(255, 0, 255, 0.05);
              top: 0;
            }
            & .lines-wrapper {
              position: relative;
              height: 100%;
            }
          }
        `}</style>
      </div>
    );
  }
}