如何放置两个<；td>；元素合并到单个CSS网格单元中

我正在构建一个web应用程序，并首次对CSS网格进行了认真的尝试（没有使用像Bootstrap这样的CSS框架）。在我的应用程序的各个地方，在一个好的老式表格中显示表格数据是有意义的，至少在视口足够大的时候，比如在桌面浏览器中。例如，像这样：

对于移动浏览器而言，表格视图的意义要小得多，相反，我希望获取相同的数据，并将其显示在更大的全屏幕卡片列表中，如下所示：

我并没有因为基于

而与底层HTML结为夫妻，但是为了语义和可访问性的目的，以这种方式构建页面对我来说非常有意义

<table class="data-list">
    <thead>
        <tr>
            <th>Day</th>
            <th>Date</th>
            <th>Time</th>
            <th>Event</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Friday</td>
            <td>October 23</td>
            <td>8:00pm</td>
            <td>Event A</td>
        </tr>
        <tr>
            <td>Saturday</td>
            <td>October 24</td>
            <td>10:00am</td>
            <td>Event B</td>
        </tr>
    </tbody>
</table>

请特别注意，我希望使用

网格列：1/3将第一个和第二个表数据项拉入共享单元格（跨越两列）用于
tr td:n个孩子（1）
和
tr td:n个孩子（2）
。这不起作用，而是将第二、第三和第四个数据项流到一个新的网格行，如下所示：


问题：是否可以使用CSS将两个td元素拉入一个CSS网格单元（如果可以，如何实现）？

可运行示例：

问：是否可以使用CSS将两个td元素拉入单个CSS网格单元（如果可以，如何实现）

您可以将前两个
td
s部分分解为
块

（
网格
和
内容
显示
这里似乎不需要）


表格{
边界间距：0.2米；
边缘：1米；
}
thead tr{
背景#03337f；
颜色：白色；
}
t车身tr:n个孩子（偶数）{
背景：灰色；
}
运输署{
填充：0.25em；
}
@媒体屏幕和屏幕（最大宽度：800px）{
桌子{
颜色：白色；
}
表tr：第n个子项（1n）{
背景：#000099；
}
/*从这里打破表格布局*/
表tbody tr:n第n个孩子（1），
表tbody tr:n第n个子项（2）{
显示：块；
}
表tr：第n个孩子（2）{
字号：0.65em；
}
/*不知道你想要什么关于thead td*/
表THAD tr：第n个孩子（1），
表THAD tr：第n个孩子（2）{
float:left；/*也会杀死表布局*/
/*或者不透明度：0；可能*/
字号：0.01em；
}
表THAD tr：第n个孩子（2）{
字号：1rem；
}
}

白天
日期
时间
事件
星期五
十月二十三日
晚上八点
事件A
星期六
10月24日
上午10:00
事件B
一旦应用
显示：网格
对于
表格
标记，表格将松开其
显示：表格
属性，整个布局将不再作为表格，而是作为网格。因此，您必须做出决定：将其视为表格或网格，并根据该决定调整CSS的其余部分。
G-Cyrillus-谢谢您的回答。我可以看到代码片段作为一个独立的程序运行。在我的代码中，当我将tr:nth child（1）和tr:nth child（2）的显示更改为block（并删除间隙列指定）时，每个td元素都会进入其常用的网格列。如果我将间隙列指定保留在中，那么第一个td将进入第一列，第二个td将进入下一个网格行的第一列。一旦表格设置为display:grid并且表格提供了网格模板列，display:block实际上似乎没有任何影响。@JoelBrown我的代码实际上根本不介意初始的
grid
显示，它从一个表格变为一个中断的
display:table
。在我看来，通过
display:grid是不必要的
从您共享的代码中，我已经用mediaquery更新了代码片段，以澄清我在这一点上的答案；）如果仍要使用网格，请使其他单元格跨2行，而应堆叠的单元格不跨2行；）测试：跨行和使用行密集网格自动流是解决这一问题的关键。非常感谢你在这方面的帮助@达曼-我已还原了您的编辑。我的问题的答案是由G-Cyrillus提供的，我恰当地接受了他的回答。我在问题中添加了一些非常具体的细节，这些细节围绕着我如何实施G-Cyrillus提供的正确建议，并添加了一些可能有用的额外细节，这些细节不足以回答我的问题。如果您有任何其他细节，请留下评论。问题是为了问题，不是为了答案或对答案的评论。如果注释与答案有很大差异，则发布新答案，而不是留下注释。可运行解决方案：-感谢@G-Cyrillus识别解决方案。总结要点：（a）添加
网格自动流：行密集到主网格元素（即表格）（b）中，对于“合并”元素之后的所有
元素（在我的示例中：
tr td:nth child（2）~td
添加行span:
网格行：span 2；
和对齐：
对齐自：拉伸；
-如果希望背景与页面的其余部分不同。（c）同样，对于“卡片”的背景颜色不同的情况，在合并td的卡片和所有后续卡片（我的案例：
tr td:nth child（n+2）
）之间添加间距，如下所示：
margin bottom:0.5rem；
。
table.data-list {
    display: grid;
    border-collapse: collapse;
    min-width: 100%;
    grid-template-columns: min-content min-content max-content 1fr;

    thead {
        display: none;
    }

    tbody,
    tr {
        display: contents;
    }

    row-gap: var(--grid-work-row-spacing);

    tr td {
        background-color: var(--cs-secondary-md);
        color: var(--cs-white-ish);
    }

    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: var(--grid-work-table-vertical-padding) var(--grid-work-table-horizontal-padding);
        font-size: var(--grid-work-row-label-height);
    }

    tr td:nth-child(1) {
        grid-column: 1/3;
    }

    tr td:nth-child(2) {
        grid-column: 1/3;
    }

    tr td:nth-child(3) {
        grid-column: 3/4;
    }

    tr td:nth-child(4) {
        grid-column: 4/5;
    }
}