Chris DeLuca

Aligning CSS Grid area columns

I was looking for a quick, minimal way of aligning columns in grid-template-areas values, and found something more generic and, I think, useful—the venerable column command.

echo "'image title title tag'
                   'image link link tag'
                   'image description description cta'"|column -t
# Output:
# 'image  title        title        tag'
# 'image  link         link         tag'
# 'image  description  description  cta'

That’s a little unwieldy, so I used column -t as a Vim/Neovim filter.

It turns this:

  grid-template-areas:
    'image title title tag'
    'image link link tag'
    'image description description cta';

Into this:

  grid-template-areas:
    'image  title        title        tag'
    'image  link         link         tag'
    'image  description  description  cta';

Not a new insight, but new to me!

tech