如何让CSS Grid在小屏实现首元素满宽、后两元素各50%布局？

你可以通过新增一个针对小屏幕的媒体查询，结合grid-column属性来实现需求。修改后的完整代码如下：

.grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}
@media(max-width: 990px) {
    .grid-main {
        grid-template-columns: 3fr 2fr 2fr;
    }
}
/* 新增小屏幕适配规则，可根据需求调整宽度阈值 */
@media(max-width: 768px) {
    .grid-main {
        grid-template-columns: 1fr 1fr;
    }
    /* 让第一个网格元素横跨两列，占满整行 */
    .grid-main > :first-child {
        grid-column: 1 / span 2;
    }
}

实现逻辑说明： #

• 针对小屏幕（这里以768px为阈值，你可以根据实际需求调整），将网格列设置为两等宽列（1fr 1fr）
• 通过:first-child选择器定位第一个网格元素，用grid-column: 1 / span 2让它横跨整个网格的两列，自然占满整行宽度
• 剩下的两个元素会自动排列到第二行，各自占据一列，也就是各占50%宽度

内容的提问来源于stack exchange，提问作者Jody Christian