Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Last active March 28, 2024 06:22
Show Gist options
  • Save LeaVerou/12b1d1e078510900c7ab206da1a0ff2e to your computer and use it in GitHub Desktop.
Save LeaVerou/12b1d1e078510900c7ab206da1a0ff2e to your computer and use it in GitHub Desktop.
Two column <dl> with two lines of CSS! Thank you Grid Layout!
/**
* Two column <dl> with two lines of CSS! Thank you Grid Layout!
* Limitation: Breaks if we have multiple consecutive <dt>s or <dd>s
*/
dl {
display: grid;
grid-template: auto / 10em 1fr;
}
dt {
background: #fee;
}
dd {
background: hsl(220, 10%, 95%);
}
dt, dd {
margin: 0;
padding: .3em .5em;
border-top: 1px solid rgba(0,0,0,.1);
}
<dl>
<dt>Foo</dt>
<dd>Bar</dd>
<dt>Foo</dt>
<dd>Bar</dd>
<dt>Foo</dt>
<dd>Bar</dd>
<dt>Foo</dt>
<dd>Bar</dd>
<dt>Foo</dt>
<dd>Bar</dd>
</dl>
// alert('Hello world!');
{"view":"split","fontsize":"110","seethrough":"","prefixfree":"","page":"css"}
@korenevskiy
Copy link

Perfect

@ap
Copy link

ap commented Apr 15, 2023

If you add dt { grid-column: 1 } and dd { grid-column: 2 } then it works without limitations.

@rblakejohnson
Copy link

dt { grid-column: 1 } and dd { grid-column: 2 }

This is exactly what I needed, thank you @ap and thank for posting this gist @LeaVerou

@elron
Copy link

elron commented Mar 28, 2024

Beautiful! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment