Aligning description lists with CSS Grid

Categories

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
CSS
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
}

With a little gap, it all looks really neat!

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me