Definition List with CSS Grid

1 minute to read

Laying out a definition list to look like a telephone directory requires 2 lines of CSS using grid.

Example layout of a definition list styled to look like a telephone directory
Example layout of a definition list styled to look like a telephone directory

To align the <dt> to the left and the <dd> to the right, use the following:

display: grid;
grid-template: auto / 210px 1fr;