如何使用HTML和CSS实现网格元素的多行排布？

解决方案 #

核心问题说明 #

你当前的容器设置的是display: flex弹性布局，你写的Grid相关属性不会生效，同时全局div选择器的样式会污染所有div元素，导致网格子项的样式被覆盖，这是你无法实现两行排布的主要原因。

修改步骤 #

• 移除或者修改全局div选择器的样式，避免覆盖网格子项的自定义属性
• 将容器的布局模式改为Grid布局，明确设置两行的布局规则
• 调整列配置，让子项自动适配容器宽度

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>  
    <style>
        .grid-container {
            /* 改为Grid布局 */
            display: grid;
            background-color: darkslategrey;
            padding: 10px;
            /* 固定为2行，行高自动适配内容 */
            grid-template-rows: repeat(2, auto);
            /* 自动计算列数，每列最小宽度180px（适配子项宽度+内边距+边框） */
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            /* 子项之间的间距，不用单独给子项加margin */
            gap: 10px;
        }

        /* 把原来的全局div样式改成仅作用于.table类 */
        .table  {
            display: block;
            width: 300px;
            border: 15px ;
            padding: 50px;
            margin: 20px;
            background-color: sandybrown;
        }
        
        .grid-container > div {
            background-color: #f1f1f1;
            padding: 20px;
            font-size: 30px;
        }

        .grid-item  {
            border: 4px solid black;
            width: 120px;
            height: 50px;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>&nbsp;&nbsp; Game</h1>
    <div class="table">
        <h2>Test element</h2>
    </div>
    <!-- 类名可以保留原来的flex-container，这里修改是为了语义更清晰 -->
    <section class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </section>
</body>
</html>

额外优化说明 #

如果需要固定每行的子项数量，比如第一行5个第二行4个，只需要把grid-template-columns改成repeat(5, 1fr)即可，Grid会自动把剩下的4个元素排布到第二行。后续添加交互动画的时候直接给.grid-item加transition属性就可以实现平滑的交互效果。

内容的提问来源于stack exchange，提问作者Mauricio Vázquez