如何用CSS实现自动新增行的Grid布局？

需求说明 #

需要实现Grid布局自动生成行，替代当前手动指定行数的grid-template-rows: repeat(10, 200px);，无需脚本，纯CSS实现内容适配的自动行新增。

原代码 #

CSS代码 #

*{
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}

html, body{
    width:100%;
    height: 100%;
}
body *{
    border: 1px solid rgb(21, 20, 20);
}
.grid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-rows: 4.375rem calc(100% - 4.375rem);
    grid-template-columns: 1fr;
}

.header{
    
}

.container{
    display:grid;
    grid-template-columns:14% 1fr;
}

.offers{
    }

.content{
    padding:10px;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-template-rows: repeat(10, 200px);
    gap: 10px;

    overflow: auto;
}

.card{

}

.card:nth-of-type(7n+4){
    background-color: blue;
    grid-row: span 2;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <title>Document</title>
</head>
<body>

<div class="grid grid-template">
    <header class="header"></header>
    <div class="container">
        <aside class="offers"></aside>
        <section class="content">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </section>
    </div>
</div>
    
</body>
</html>

解决方案 #

直接修改.content的CSS属性，用grid-auto-rows替代手动指定行数的grid-template-rows：

修改后的.content完整代码：

.content{
    padding:10px;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-auto-rows: 200px; /* 替换原grid-template-rows */
    gap: 10px;
    overflow: auto;
}

原理说明 #

• grid-auto-rows用于指定自动生成的行的高度，当Grid布局中的元素需要更多行容纳时，浏览器会自动创建符合高度要求的新行，无需手动设置行数。
• 对于设置了grid-row: span 2;的蓝色卡片，浏览器会自动为其预留两行高度，后续元素会自动排布到新行中，完全适配内容数量。

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