在不同的屏幕高度创建新列以及标题

Question

假设数据有 20 条记录，对于特定的屏幕尺寸，8 行将适合，而对于另一种屏幕尺寸，仅能适合 6 行。因此，使用 css 网格可以轻松实现根据屏幕高度自动加载行数（参考 - Make grid container fill columns not rows）。但我的要求是为每一列添加标题。如何实现？

图片一

图片二

Answer 1

我自己没用过，不过看来你可以用grid-template-areas

这是他们使用的示例：

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

一个（hacky）替代方法是使用一个单独的网格，在当前网格正上方有一行。