Beschreibungslisten ausrichten per Grid

In Kapitel 4 von »Einstieg in HTML und CSS« zeige ich, wie man Beschreibungslisten, die auch unter ihrem alten Namen Definitionslisten bekannt sind, erstellen und gestalten kann. Mit ein paar einfachen Anweisungen aus dem in Kapitel 24 vorgestellten CSS Grid Layout kann man solche Listen sehr einfach ausrichten.

1. Das HTML für eine Beschreibungsliste (Definitionsliste): dl, dt und dd

In Kapitel 4 sehen Sie, dass beschreibende Listen aus drei Elementen stehen:

• dl ist kurz für description list (früher definition list) und das Element umfasst die gesamte Liste.
• dt steht für description term und enthält den zu beschreibenden Begriff.
• dd enthält die Beschreibung für den Begriff.

Das folgende Listing zeigt ein einfaches Beispiel:

<dl>

  <dt>HTML</dt> 
  <dd>Die <em>HyperText Markup Language</em> ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente.</dd>

  <dt>CSS</dt> 
  <dd>Die <em>Cascading Style Sheets</em> sind eine Sprache zur Gestaltung von HTML.</dd>

  <dt>JS</dt>
  <dd><em>JavaScript</em> ist eine Skriptsprache, um die Möglichkeiten von HTML und CSS zu erweitern.</dd>

</dl>
Code language: HTML, XML (xml)

Nur mit dem Browser-Stylesheet sieht dieses HTML ungefähr so aus wie in der folgenden Abbildung.

2. Eine einfache Gestaltung per CSS

Ebenfalls in Kapitel 4 lernen Sie eine einfache Möglichkeit zur Gestaltung kennen: Sie heben den zu beschreibenden Begriff dt fett hervor, entfernen die Einrückung für die Beschreibung dd. Genau das macht das folgende CSS:

dt { 
  font-weight: bold; 
}

dd { 
  margin-left: 0; 
  margin-bottom: 1rem; 
}
Code language: CSS (css)

Mit dieser Gestaltung sieht die Liste so aus wie in der folgenden Abbildung.

3. Eine Beschreibungsliste ausrichten mit CSS Grid Layout

In Kapitel 24 lernen Sie im Buch dann das »CSS Grid Layout« kennen, mit dem man Elemente sehr einfach nebeneinander stellen kann. Das folgende CSS zeigt, wie man mit Grid eine Beschreibungsliste ausrichten kann. Zusätzlich bekommt die Liste noch eine grundlegende Gestaltung.

dl {
  display: grid; 
  grid-template-columns: auto 1fr; 
  grid-gap: 1rem; 
      
  background: whitesmoke;  
  padding: 1rem; 
  border: 1px solid gainsboro;      
}
Code language: CSS (css)

In einem modernen Browser sieht die Liste danach aus wie in der folgenden Abbildung.

Falls Sie CSS Grid Layout noch nie im Einsatz gesehen haben, hier eine kurze Erklärung:

• display: grid macht die Liste dl zum Grid-Container.
• grid-template-columns gibt das gewünschte Layout-Raster vor:
  • Die Breite der ersten Spalte orientiert sich mit auto an deren Inhalt.
  • Die zweite Spalte bekommt mit 1 fr den restlichen zur Verfügung stehenden Platz.
• grid-gap sorgt für einen Abstand zwischen Spalten und Zeilen.

Fazit: Grid ist geil

Je mehr man sich mit dem CSS Grid Layout beschäftigt, desto einfacher erscheint das Nebeneinander der Dinge auf Webseiten. Oder anders ausgedrückt: Grid ist geil.

Mehr zum Layouten per Grid finden Sie im Buch oder in Teil 3 des Videokurses.