🍷 Digital Wine Cellar – Pattern Library

Definition list grid 

<dl class="dl-grid">
    <dt>Term 1</dt>
    <dd>Data 1.1</dd>
    <dd>Data 1.2</dd>
    <dd>Data 1.3</dd>
    <dt>Term 2</dt>
    <dd>Data 2.1</dd>
    <dt>Term 3</dt>
    <dd>Data 3.1</dd>
    <dd>Data 3.2</dd>
    <dt>Term 4</dt>
    <dd>Data 4.1</dd>
</dl>
 
<dl class="dl-grid">
  {{#each items}}
    <dt>{{term}}</dt>
    {{#each definitions}}
      <dd>{{this}}</dd>
    {{/each}}
  {{/each}}
</dl>
 
{
  "items": [
    {
      "term": "Term 1",
      "definitions": [
        "Data 1.1",
        "Data 1.2",
        "Data 1.3"
      ]
    },
    {
      "term": "Term 2",
      "definitions": [
        "Data 2.1"
      ]
    },
    {
      "term": "Term 3",
      "definitions": [
        "Data 3.1",
        "Data 3.2"
      ]
    },
    {
      "term": "Term 4",
      "definitions": [
        "Data 4.1"
      ]
    }
  ]
}
  • Content: 
    /**
 * Definition list in a grid layout
 */

@media screen {

  /* Product data */
  .dl-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.2em 0.8em;
    margin: 0;
  }

  .dl-grid dt {
    font-weight: 700;
    text-align: right;
  }

  .dl-grid dd {
    margin-left: 0;
  }

  .dl-grid dd + dd {
    grid-column-start: 2;
  }
}
  • URL: /components/raw/dl-grid/dl-grid.css
  • Filesystem Path: components/02_molecules/dl-grid/dl-grid.css
  • Size: 359 Bytes

Definition list in a grid layout

Usage:

<dl class="dl-grid">
    <dt>Term 1</dt>
      <dd>Data 1.1</dd>
      <dd>Data 1.2</dd>
      <dd>Data 1.3</dd>
    <dt>Term 2</dt>
      <dd>Data 2.1</dd>
    <dt>Term 3</dt>
      <dd>Data 3.1</dd>
      <dd>Data 3.2</dd>
    <dt>Term 4</dt>
      <dd>Data 4.1</dd>
</dl>

Typically, a <dt> is followed by a <dd> at minimum. However, several <dd> elements in succession are supported, both by the HTML5 standard, but also by the layout for this component.