geist mono

geist mono

Search…

Perfect grid*

Perfect grid*

Toggle style

Updated:

Jan 4, 2024

Type:

Code

Notes

  • Generates columns that perfectly fit your viewport/container width.

  • Chooses a value that gives an integer amount of columns closest to your input size.

  • Encodes a background image with SVG attributes so it's both performant and highly customisable. It won't render on the Canvas so test it out in Preview.

  • *almost perfect grid. Still exploring the best way to account for sub-pixel anti-aliasing — currently the right edge won't always be perfectly flush.

Help

How do I add code components?