面试官刁钻问题【必看】

聊聊网格布局（Grid Layout）和响应式布局（Responsive Layout）

网格布局（Grid Layout）

是什么：

网格布局是一种二维布局系统，将页面划分为行和列，使得元素可以放置在这个二维网格中的任意位置。

用法：

• 使用 display: grid; 属性将一个元素设为网格容器。
• 使用 grid-template-rows 和 grid-template-columns 属性定义网格的行和列。
• 使用 grid-template-areas 属性定义网格区域，方便地放置元素。
• 使用 grid-gap 属性定义网格行和列的间距。

使用场景：

• 水平和垂直居中
• 嵌套网格
• 自适应容器大小

响应式布局（Responsive Layout）

是什么：

响应式布局是一种设计方法，通过使用媒体查询（M