CSS Grid 是目前最强大的布局系统，它可以让复杂的两维布局变得简单直观。本文将分享一些我在项目中使用 Grid 的实战技巧，从基础的 grid-template-columns 到高级用法。

基础网格布局

Grid 布局的核心是设置行和列。通过grid-template-columns和grid-template-rows，我们可以定义网格的轨道大小。

css
/* 创建一个三列等宽网格 */
.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

自动填充与最小宽度

auto-fill和auto-fit是响应式布局的利器。它们可以让你无需媒体查询就实现自适应的网格。

css
/* 最小 200px，自动填充列数 */
.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
}
小提示： auto-fill和auto-fit的区别在于：当容器宽度超过所有列的总和时，auto-fit会让已存在的列拉伸填充空白区域，而auto-fill则保持列的原始大小。

网格区域命名

Grid 允许我们给网格区域命名，这样在布局复杂页面时会更加直观。

css
.layout {
	display: grid;
	grid-template-areas:
		"header header header"
		"sidebar main aside"
		"footer footer footer";
	grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

对齐方式

Grid 提供了强大的对齐能力。justify-items、align-items控制单元格内容，justify-content、align-content控制整个网格在容器中的位置。

实用技巧总结

无论你是前端新手还是有经验的开发者，掌握 Grid 都能让你的布局工作更加高效。记住几个关键点：先用 display: grid 开启网格布局，然后用grid-template-columns定义列轨道，通过gap设置间距，最后用grid-column和grid-row让元素占据特定网格区域。

Grid 和 Flexbox 不是互斥的，而是互补的。通常的建议是：需要一维布局时用 Flexbox，需要两维布局时用 Grid。