Aligning description lists with CSS Grid


Aligning your values neatly in a <dl> when you only have one <dt> and <dd> pair is really trivial, thanks to CSS Grid.

Use grid-template-columns: max-content 1fr and the <dt> will set itself to the maximum content width. You could also use auto.

Code language
dl {
  display: grid;
  grid-template-columns: max-content 1fr;

With a little gap, it all looks really neat!


If you liked this post, you might like these ones, too

  1. Dynamic footer copyright date in Eleventy

    That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.

  2. Use grayscale filter to see where you are relying too much on colour

    🔥 A handy quick tip.

  3. Use a set to remove array duplicates

    🔥 A handy quick tip.


Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.