CSS Grid 布局实战指南

Grid 布局彻底改变了网页排版的方式，通过几个简单的属性就能实现复杂的二维布局。

基础概念

CSS Grid 是一个二维布局系统，可以同时处理行和列。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

常用属性

grid-template-columns

定义列的数量和宽度：

/* 三列等宽 */
grid-template-columns: 1fr 1fr 1fr;

/* 使用 repeat */
grid-template-columns: repeat(3, 1fr);

/* 混合单位 */
grid-template-columns: 200px 1fr 2fr;

gap

设置网格项目之间的间距：

gap: 20px; /* 行列间距相同 */
gap: 20px 10px; /* 行间距 列间距 */

实际应用

Grid 布局非常适合用于：

• 整体页面布局
• 图片画廊
• 卡片列表
• 响应式设计

掌握 Grid 布局，能让你的 CSS 代码更简洁、更强大。