Как мне контролировать горизонтальное пространство между dt и dd в этом списке описаний на основе сетки? ⇐ CSS

[Anonymous]

Я пытаюсь создать концертный сет-лист, который выглядит следующим образом:

Код: Выделить всё

I:   Song 1, Song 2, Song 3, Song 4, Song 5,
Song 6, Song 7

II:  Song 10, Song 11, Song 12, ...

E:   Song 20

Вот код, который я пробовал. Он почти делает то, что я хочу, за исключением того, что я не могу найти, как контролировать ширину промежутка между каждым dt и dd. Я хочу сократить разрыв. Я отметил в CSS различные вещи, которые пробовал.
Я новичок в HTML/CSS, поэтому буду также рад предложениям, если есть лучший подход к этому. . Я хочу, чтобы это было отзывчивым и избегало старых вещей (например, float), которые, как я читал, можно лучше реализовать, используя более современные функции (например, сетку и гибкость).

Код: Выделить всё

   * {
box-sizing: border-box;
}

body {
background-color: black;
background-attachment: fixed;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
.headline-div {
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
font-size: 110%;
color: red;
}

.setlist-dl {
display: grid;
column-gap: 0; /* Thought this would reduce the gap but no */
grid-template-columns: max-content auto;
}
.setlist-dt {
grid-column-start: 1;
color: yellow;
#margin-right: 0; /* Also tried this */
}
.setlist-dd {
grid-column-start: 2;
margin-bottom: 10px; /* put some vertical space between each set */
}
.setlist-songs-ul {
margin: 0;
padding: 0;
}
.setlist-song-li {
color: green;
display: inline; /* makes it horizontal */
}

/* Show outlines of divs and dl components for troubleshooting */
div, dt, dd, dl {
outline-style: dotted;
outline-color: green;
outline-width: 1px;
}
*/

Код: Выделить всё

5/1/81 [Fri] Grateful Dead - Hampton Coliseum, Hampton, VA




I:


[list]
[*]Alabama Getaway>
[*]Promised Land,
[*]Friend Of The Devil>
[*]Me & My Uncle>
[*]Big River,
[*]Althea>
[*]Little Red Rooster,
[*]Tennessee Jed>
[*]Let It Grow>
[*]Deal
[/list]



II:


[list]
[*]Feel Like A Stranger>
[*]Franklin's Tower>
[*]Lost Sailor>
[*]Saint Of Circumstance>
[*]He's Gone>
[*]The Other One>
[*]Drums>
[*]Space>
[*]The Wheel>
[*]Wharf Rat>
[*]Sugar Magnolia
[/list]



E:


[list]
[*]U.S.  Blues
[/list]

Подробнее здесь: https://stackoverflow.com/questions/786 ... ased-descr