Creating a Grid Visualizer

If you're working with a grid-system, chances are, you're using some kind of grid visualizer – maybe in Figma, or in Dev Tools.

I'm currently working on a project where I need a customizable grid-visualizer. Thankfully it's pretty simple – using a bit of math and CSS!

The markup for this demo is very basic. We have a grid, and a single piece of content:

<div class="grid">
  <div class="content"></div>
</div>

In CSS, we need two custom properties to control the amount of columns and the column-gap:

:where(html) {
  --columns: 6;
  --column-gap: 20px;
}

For the .grid-class, we need to set up a basic grid, using the two custom properties, we just configured:

.grid {
  column-gap: var(--column-gap);
  display: grid;
  grid-template-columns: repeat(var(--columns, auto-fit), 1fr);
}

We'll add the colors for the columns and gaps as two new properties:

--_col-bgc: hsl(200, 50%, 75%, .5);
--_gap-bgc: hsl(200, 50%, 45%, .5);

And now for a bit of math! The width of a column is:

100% / number of columns

From that value, we need to deduct the gap-width. There will always be one gap less than the number of columns, so:

((number of columns - 1) * gap-width) / number of columns

Simplified, this is:

(100% - (number of columns - 1) * gap-width)) / number of columns

In CSS, we add this logic to a custom property:

--_w: calc( (100% - (((var(--columns) - 1) * var(--column-gap)))) / var(--columns) );

Finally, using our custom properties, we add a repeating-linear-gradient:

background-image: repeating-linear-gradient(to right,
  var(--_col-bgc), var(--_col-bgc) var(--_w),
  var(--_gap-bgc) var(--_w), var(--_gap-bgc) calc(var(--_w) + var(--column-gap) ) );

With our default settings, this renders a nice 6-column grid with gaps:

For the .content, we add a small chunk of css:

.content {
  background-image: linear-gradient(45deg, black, transparent);
  grid-column: span var(--column-span, 3);
}

With the default --column-span: 3, this gives us:

Let's compare this with Dev Tools' grid visualizer, which we add by clicking the small grid-button next to the markup:

This renders:

Cool – This seems to be working!

Adding an editor

Finally, let's add a small editor, so we can easily play around with the columns-, gap- and colspan-properties:

<form id="app">
  <fieldset>
    <legend>Grid Visualizer</legend>
    <label>Columns
      <input type="range" name="columns" value="6" min="1" max="12" />
    </label>
    <label>Gap
      <input type="range" name="column-gap" value="20" min="0" max="100" data-unit="px" />
    </label>
    <label>Column-span
      <input type="range" name="column-span" value="3" min="1" max="12" data-scope=".content" />
    </label>
  </fieldset>
</form>

To update the custom properties dynamically, we need a small JavaScript:

app.addEventListener('input', (event) => setCustomProperty(event.target));
function setCustomProperty(input) {
  const scope = input.dataset.scope;
  const node = !scope ? document.documentElement : scope === 'self' ? input : scope === 'parent' ? input.parentNode : document.querySelector(scope);
  node.style.setProperty('--' + input.name, input.value + (input.dataset.unit || ''));
}

Codepen demo

Happy coding!

Blog

Creating a Grid Visualizer

Mads Stoumann

Adding an editor

Codepen demo

Join Our Newsletter. No Spam, Only the good stuff.

Related