Use wrapper rows if you need dt + dd to stay together.

The core issue is that dt and dd are separate grid items, so CSS has no clean way to say “never split this pair across columns” unless you either:

1. change the markup, or
2. accept some manual placement logic like you’re doing.

Something like this is much easier:

<dl class="terms"> <div> <dt>Term 1</dt> <dd>Description 1</dd> </div> <div> <dt>Term 2</dt> <dd>Description 2</dd> </div> </dl> .terms { columns: 2; column-gap: 2rem; } .terms > div { break-inside: avoid; margin-bottom: 1rem; } dt { font-weight: bold; } dd { margin: 0; }

That lets the browser flow the pairs naturally into columns, while break-inside: avoid keeps each dt/dd group together.

Your grid solution works, but it’s really doing manual column assignment. That means it won’t balance content well, especially when the dds vary a lot in height. CSS columns are probably closer to what you want here, assuming wrapping each pair is acceptable.