CSS Grid响应式布局疑问：移动端grid-template-rows:auto不生效

问题根源 #

你设置grid-template-rows: auto时，Grid会让每一行的高度完全由该行内卡片的实际内容高度决定。如果不同卡片的内容多少不一样，对应的行高就会跟着变化，自然没法保持所有卡片高度统一。

而当你写repeat(5, 600px)时，是强制给每一行都指定了固定的600px高度，不管该行卡片内容多少，都会被限制在这个高度里，所以所有卡片高度看起来一致——但这种写法不够灵活，一旦卡片数量变化就会失效。

两种实用解决方法 #

方法一：用grid-auto-rows: 1fr实现自适应等高

让Grid自动分配行高，所有行均分容器的可用空间，不管内容多少，行高都会一致：

@media (max-width: 767px) {
    /* Small screens: 1 card in a row */ 
    .container-cards {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr; /* 替换原来的grid-template-rows: auto */
    }
}

方法二：给卡片本身设置100%高度

直接让卡片占满所在网格单元格的高度，不管单元格行高是怎么计算的，卡片都会撑满：

/* 全局给卡片设置，不用改容器的行高 */
.container-cards .card {
    height: 100%;
    box-sizing: border-box; /* 避免内边距、边框额外增加高度 */
}

内容的提问来源于stack exchange，提问作者Daniel M_D