dl要素を使った横並びのリスト
説明
dlを使って横並びのリストを作る際、これまではdtの幅を揃えることが困難でした。
CSS Gridを使えば、dt同士の幅を揃えることが簡単になります。
さらに、この例ではdtとddの高さを揃えることができています。
HTML
<dl>
<dt>項目1</dt>
<dd>テキストが入ります。テキストが入ります。テキストが入ります。</dd>
<dt>項目2</dt>
<dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
<dt>項目3</dt>
<dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
<dt>項目9999999</dt>
<dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
</dl>CSS
dl {
display: grid;
gap: 10px;
grid-template-columns: [key] minmax(100px, min-content) [value] 1fr;
}
dt {
grid-column: key;
border: 1px solid #ccc;
white-space: nowrap;
}
dd {
grid-column: value;
margin-left: 0;
border: 1px solid #ccc;
}