Beispiel:CSS-grid-dl-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>