Beispiel:CSS-grid-dl-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
dl {
display: grid;
grid-template-columns: auto 1fr;
max-width: 18em;
margin: 1em;
line-height: 1.4;
}
dt {
grid-column: 1;
font-weight: bold;
}
dd {
grid-column: 2;
}
</style>
<title>Beschreibungsliste im Rasterlayout</title>
</head>
<body>
<h1>Beschreibungsliste, die sich durch den auto-placement-Algorithmus selbständig am Raster ausrichtet </h1>
<h2>Tiere Südafrikas</h2>
<dl>
<dt>Säugetiere</dt>
<dd>Löwe</dd>
<dd>Nashorn</dd>
<dd>Elefant</dd>
<dd>Büffel</dd>
<dt>Fische</dt>
<dd>Hai</dd>
<dd>Quastenflosser</dd>
<dt>Vögel</dt>
<dd>Pinguin</dd>
<dd>Strauß</dd>
</dl>
</body>
</head>