logoalt Hacker News

turtleyacht • today at 1:15 PM • 1 reply • view on HN

Hoped to see CSS for the alternative, where <div> is not nested inside the <dl>. Too used to thinking of div as "layout containers."

Replies

WorldMaker • today at 6:30 PM

CSS Grid is a very good friend when trying to style DL without extra DIV wrappers. An example:

    dl {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto;
    }

    dt {
        grid-column-start: 1;
    }

    dd {
        grid-column-start: 2;
    }
That very simply puts terms side-by-side data in a nice obvious way. (Even with multiple DDs per DT.) A bit like the Wikipedia screenshot in the article but that's more balanced `grid-template-columns: 1fr 1fr;`. (But that's the flexibility of CSS Grid, right? Real easy to tweak this further for your needs/interests/design.)