CSS 网格布局完全指南

# CSS 网格布局完全指南 ## 什么是 Grid 布局？ CSS Grid 是一种二维布局系统，可以同时控制行和列的排列。它比 Flexbox 更适合复杂的页面布局。 ## 基础用法 ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } ``` ## 常用属性 - `grid-template-columns`: 定义列的数量和大小 - `grid-template-rows`: 定义行的数量和大小 - `grid-gap`: 网格间距 ## 实战示例 使用 Grid 可以轻松实现多栏布局、杂志风格排版等复杂设计。配合媒体查询，响应式开发变得前所未有的简单。