如何通过display:grid属性在CSS中启用网格布局？

本文共计1052个文字，预计阅读时间需要5分钟。

不是通过添加class或引入某库来启用CSS网格布局，只需要设置+display: grid（或+display: inline-grid）。一旦设置，元素立即变为网格容器，子元素自动成为网格项——无需这句，后续所有+grid-template-columns、+grid-gap等属性都将不生效。

常见错误现象：grid-column 写了但完全没反应；开发者反复检查语法，却漏掉父容器根本没设 display: grid。

• 必须作用于直接父容器，不能靠继承
• display: grid 会重置元素的默认文档流行为（比如 float、vertical-align 失效）
• 如果只是想让某几个子元素用网格对齐，别在 body 或大 wrapper 上盲目加，容易破坏整体布局结构

grid-template-columns 和 grid-template-rows 定义轨道尺寸

设完 display: grid 后，真正画出“格子”的是 grid-template-columns 和 grid-template-rows。它们不是可选配置，而是网格存在的基础骨架。

使用场景：三栏布局、响应式卡片栅格、表单字段对齐、等宽按钮组。