如何实现目标样式的CSS Grid网格布局，避免首列占满整行高度？

修复方案 #

你当前的布局错误核心来自grid-template-columns配置和grid-template-areas不匹配，修改代码如下即可实现预期效果：

1. 修改网格容器样式

.cards_grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    /* 按area定义的12列设置等宽网格 */
    grid-template-columns: repeat(12, 1fr);
    /* 两行高度均由内容自动撑开 */
    grid-template-rows: auto auto;
    grid-template-areas:
        "first first first first second second second second second third third third"
        "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
}

2. 给每个网格子元素绑定对应区域

.first {grid-area: first;}
.second {grid-area: second;}
.third {grid-area: third;}
.fourth {grid-area: fourth;}
.fifth {grid-area: fifth;}
.sixth {grid-area: sixth;}

说明 #

• 你原有代码中grid-template-columns: minmax(auto, 1fr)仅定义了1列网格，和你写的12列结构的grid-template-areas完全不匹配，导致布局规则失效，出现首列占满整行的问题
• 该方案使用CSS Grid标准属性，所有主流现代浏览器均支持，无需使用兼容性差的masonry相关实验属性
• 每个单元格高度会由自身内容高度自动决定，不会出现同列单元格被强制拉伸等高的问题

内容的提问来源于stack exchange，提问作者Ankit R