The DIY Responsive Grid Calculator

Font size / Line height (in pixels)
/

Possible breakpoints

Media Query Container Width 1 Column 2 Columns 3 Columns 4 Columns
{{breakpoint.mediaQuery}}px {{breakpoint.containerWidth}}rem {{breakpoint.columns[0]}} {{breakpoint.columns[1]}} {{breakpoint.columns[2]}} {{breakpoint.columns[3]}}

Grid background

Copy this code into your CSS to get the visual grid:

.grid { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="{{lineHeight * 2}}" height="{{lineHeight * 2}}" version="1.1"><rect style="fill:#ff6600;fill-opacity:1;" width="{{ lineHeight * 2 }}" height="1" x="0" y="{{ lineHeight - 1 }}" /><rect style="fill:#ff6600;fill-opacity:0.3;" width="{{ lineHeight * 2 }}" height="1" x="0" y="{{ lineHeight - fontSize - 1 }}" /><rect style="fill:#ff6600;fill-opacity:1;" width="{{ lineHeight * 2 }}" height="1" x="0" y="{{ lineHeight * 2 - 1 }}" /><rect style="fill:#ff6600;fill-opacity:0.3;" width="{{ lineHeight * 2 }}" height="1" x="0" y="{{ lineHeight + lineHeight - fontSize - 1}}" /><rect style="fill:#ff6600;fill-opacity:1;stroke:none" width="1" height="{{ lineHeight * 2 }}" x="0" y="0" /><rect style="fill:#ff6600;fill-opacity:1;stroke:none" width="1" height="{{ lineHeight * 2 }}" x="{{ lineHeight }}" y="0" /></svg>'); }