Comments on a Hacker News <https://news.ycombinator.com/item?id=
39227169>
post where wruza raises a valid point:
> > > In tables without borders and/or margins, you can never tell where each
> > > feature starts or if there’s one or two of them when the text wraps.
> > > Not sure what drives people to use tables at all for title:content or
> > > feature:description lists.
> >
> > Each row has 2 columns. Does the left column ever wrap? I don't see it
> > wrapping because it's pretty narrow. Because the left column never wraps,
> > you can use the left column to determine when a new row begins in both
> > columns.
>
> Yes, the left column wraps on mobile.
grid: auto-flow / 1fr 1fr;
clear: both;
}
-@media (max-width: 42em) {
- .section dl {
- grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
- }
-}
.section dl > dt {
grid-column: 1;
text-align: right;
grid-column: 2;
text-align: left;
padding-left: 1em;
- margin: 0;
+ margin: 0 0 .5ex;
+}
+@media (max-width: 42em) {
+ .section dl {
+ grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
+ }
+ dl > dd {
+ margin-bottom: 1ex; /* distinguish rows more as dts can wrap */
+ }
}
/* "keyboard" (list of keys) */