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!

Demo permalink