使用定义列表和网格布局创建表

Question

这是我尝试创建伪表,使用<dl>和display: grid.

实际上,它的工作原理.唯一的问题是,我被迫使用丑陋的方式来定义行.这是完全手动的方式.因此,如果我在表格中有30行,那么dt + dd + ... + dd对每一行重复都会非常愚蠢.

如何解决这个问题？

(我不想使用真正的表,因为它适用于Markdown).

dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

dt {
    text-align: center;
}

dd {
    margin-left: 0;
}

dt, dd {
    border: 1px solid lightgray;
    padding: 0 1em;
}

/* Ugly part
 * (Red, yellow, and green colors are just for demo)
 */

dt {
    grid-row-start: 1;
}

dt + dd {
    grid-row-start: 2;
    color: rgb(244, 67, 54);
}

dt + dd + dd {
    grid-row-start: 3;
    color: rgb(255, 152, 0);
}

dt + dd + dd + dd {
    grid-row-start: 4;
    color: rgb(76, 175, 80);
}

<dl>
    <dt><p>Term 1</p></dt>
    <dd>
        <p>Definition of term 1 long long long long</p>
        <p>Lorem ipsum...</p>
        <p>Lorem ipsum...</p>
        <p>Lorem ipsum...</p>
    </dd>
    <dd><p>Definition of term 1</p></dd>
    <dd><p>Definition of term 1</p></dd>

    <dt><p>Term 2</p></dt>
    <dd><p>Definition of term 2</p></dd>
    <dd><p>Definition of term 2</p></dd>
    <dd><p>Definition of term 2</p></dd>

    <dt><p>Term 3</p></dt>
    <dd><p>Definition of term 3</p></dd>
    <dd><p>Definition of term 3</p></dd>
    <dd><p>Definition of term 3</p></dd>
</dl>

Answer 1

假设......你使用的是Firefox或Chrome,而不是IE/Edge:p,这是一个有效的解决方案,每个术语包含任意数量的术语和任意数量的定义:

➡️ Codepen

说明:

1. 在列➡️之后填充网格列 grid-auto-flow: column;
2. (网格项目)每个术语应该在第1行,所以它的定义在它下面➡️ dt { grid-row-start: 1 }就像"下一栏请"
3. 创建足够的显式行(例如,50),但只有当任何给定的术语至少有N个定义时,行N + 1才应显示(具有任何高度)(如果给定术语的最大定义为3,则可见4行.无有4个)➡️ grid-template-rows: repeat(50, min-content);
4. 然后尝试使用未定义数量的列/术语,但我无法通过显式列实现它(我希望像"1fr,如果有内容但是0否则"与minmax(),min | max-content无效).虽然工作就像一个隐含列的魅力:➡️grid-auto-columns: 1fr;

dl {
    display: grid;
    grid-auto-flow: column;
    /* doesn't assume 3 terms but N */
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */
}

dt {
    grid-row-start: 1; /* reset, next column */
}