面试题：Grid布局下的响应式设计要点

关键属性

grid-template-columns 和 grid-template-rows：定义网格的列和行的布局。可以使用相对单位（如 fr）来灵活分配空间。例如，grid-template-columns: 1fr 2fr; 表示第一列占一份空间，第二列占两份空间。
grid-gap：设置网格项之间的间距。例如，grid-gap: 10px; 可以在网格项的水平和垂直方向都设置 10px 的间距。
grid-auto-flow：控制网格项如何自动排列。常见值有 row（按行排列）、column（按列排列）等。

断点设置思路

基于常见设备尺寸：考虑常见的手机（一般宽度小于 600px）、平板（600px - 992px）、桌面（大于 992px）等设备宽度范围来设置断点。
内容优先：根据网页内容在不同宽度下的展示效果来确定断点。如果某些内容在特定宽度下开始出现布局混乱，那么这个宽度就是一个合适的断点。

与媒体查询配合使用方法

媒体查询语法：@media (max-width: 600px) 表示屏幕宽度小于等于 600px 时应用后面的样式。
在媒体查询中修改网格布局：在不同的媒体查询块内，根据设备宽度调整 grid-template-columns、grid-template-rows 等关键属性的值，以实现不同的布局。

针对不同屏幕尺寸优化布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: grid;
            grid-gap: 10px;
        }
        @media (min-width: 992px) {
            .container {
                grid-template-columns: 1fr 3fr;
            }
        }
        @media (min-width: 600px) and (max-width: 991px) {
            .container {
                grid-template-columns: 1fr 2fr;
            }
        }
        @media (max-width: 599px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
    </div>
</body>
</html>

在这个示例中：

桌面设备（宽度大于等于 992px）：容器内的两个项目按 1:3 的比例分栏布局。
平板设备（宽度在 600px 到 991px 之间）：容器内的两个项目按 1:2 的比例分栏布局。
手机设备（宽度小于等于 599px）：容器内的项目垂直排列，即一列布局。

星途面试题库

面试题：Grid布局下的响应式设计要点

知识考点

面试题答案

关键属性

断点设置思路

与媒体查询配合使用方法

针对不同屏幕尺寸优化布局示例