Canvas Grid Lines examples

Columns

<div
data-grid="columns"
data-grid-columns="49"
data-grid-color="rgba(0, 0, 255, 0.5)" >

Time flies like an arrow, fruit flies like a banana.

Squared

<div
data-grid="squared"
data-grid-columns="40"
data-grid-color="rgba(0, 255, 0, 0.5)" >

Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry. Red lorry, yellow lorry.

Baseline

<div
data-grid="baseline"
data-grid-columns="50"
data-grid-color="rgba(255, 0, 0, 0.5)" >

Excuse my french!

Rows

<div
data-grid="rows"
data-grid-columns="30"
data-grid-color="rgba(255, 0, 255, 0.5)" >

She sells sea shells at the sea shore. She sells sea shells at the sea shore. She sells sea shells at the sea shore. She sells sea shells at the sea shore. She sells sea shells at the sea shore.

<div
data-grid="baseline"
data-grid-color="rgba(0, 255, 255, 0.5)" >

This container was hidden at page load. Using an IntersectionObservers the grid was drawn after making the container visible.