如何修复CSS Grid响应式布局以实现指定元素排序效果？

要实现你需要的响应式布局，CSS Grid是最适配的方案，以下是修改后的完整代码及关键说明：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            gap: 10px; /* 可选，给元素间添加间距优化视觉 */
        }
        .red { background-color: red; padding: 20px; }
        .green { background-color: green; padding: 20px; }
        .blue { background-color: blue; padding: 20px; color: white; }

        /* 屏幕宽度≥600px时的布局规则 */
        @media (min-width: 600px) {
            .container {
                grid-template-columns: 1fr 1fr; /* 容器分为两等宽列 */
                grid-auto-rows: minmax(100px, auto); /* 行高最小100px，超出自适应 */
            }
            .green {
                grid-row: 1 / span 2; /* 让绿色元素从第1行开始，跨占2行 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="red">Red</div>
        <div class="green">Green</div>
        <div class="blue">Blue</div>
    </div>
</body>
</html>

关键修改说明 #

• 父容器.container默认设置display: grid，此时Grid会自动单列排列元素，刚好满足屏幕<600px时红、绿、蓝垂直排序的需求。
• 在min-width: 600px的媒体查询中：
  • grid-template-columns: 1fr 1fr将容器拆分为两等宽列，为左右布局打基础。
  • .green的grid-row: 1 / span 2属性强制它占据左侧红、蓝两个元素的行高总和，实现右侧绿色占两行的效果。
• 若你原有代码使用Flex布局，由于Flex是一维布局，无法直接实现跨行效果，因此建议替换为Grid方案。

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