Dynamic rows

A key aspect of making content accessible is to ensure it uses the many different sizes of screen to best effect. For example if you have a very long list and a very wide screen it would be best if the number of columns increases responsively to use this additional space.

eg https://fairs.manystories.org/fairs

<div class="row row-auto">
    <div>
        1972<br>
        Barsham Faire - Roos Hall, Beccles
    </div>
    <div>
        1973.<br>
        <a href="https://fairs.manystories.org/barsham-faire-1973">Barsham Faire</a> - Rectory Paddock, Barsham
    </div>
    <div>
        1974.<br>
        Barsham Faire - Rectory Paddock, Barsham
    </div>
    <div>
        1975.<br>
        Barsham Faire - Rectory Paddock, Barsham
    </div>
    <div>

with the following clever styling CREDIT

.node td {vertical-align: top;}

.row-auto {grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));display: grid;}

Functionally, this means columns of about one-third on larger screens, half on mid-sized screens, and single column on small ones.

We use minmax() to set the minimum allowed column width, and then use 1fr as the max which ensures the content fills the column as much as room allows.

.row-auto div {padding: 0 10px;border-bottom: 1px solid var(--theme-color);}

.row.row-auto::before {content: none;}

See also ModernCss.dev