Grid 布局详解

CSS3 教程 · 第 8 章 · 7 次浏览

Grid（网格）是 CSS 的二维布局系统，同时控制行和列，适合页面骨架、卡片墙、复杂栅格这类布局。Flexbox 管一维（一行或一列），Grid 管二维。

基本用法

容器设 display: grid，用 grid-template-columns 和 grid-template-rows 定义列和行：

常用写法

grid-template-columns: 1fr 1fr 1fr 三等分列
repeat(3, 1fr) 同上，repeat 简写
auto-fill, minmax(200px, 1fr) 自适应列数，经典卡片墙写法
grid-gap（现在直接 gap）设置间距
grid-area 指定元素占哪几行几列

代码示例

.card-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* 经典三栏页面骨架 */
.page {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    grid-template-areas: "header header header"
                         "aside  main   right"
                         "footer footer footer";
}
.page > header { grid-area: header; }
.page > aside  { grid-area: aside; }
.page > main   { grid-area: main; }
.page > .right { grid-area: right; }
.page > footer { grid-area: footer; }

📚 CSS 属性速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`color: #333;`	文字颜色
`background: #fff;`	背景色 / 背景图
`font-size: 16px;`	字号
`font-family: Arial;`	字体
`font-weight: bold;`	字重（加粗）
`margin: 10px;`	外边距（上右下左）
`padding: 10px;`	内边距
`border: 1px solid #ccc;`	边框：粗细样式颜色
`border-radius: 8px;`	圆角
`width: 100%;`	宽度
`height: 200px;`	高度
`display: flex;`	弹性布局（现代布局主力）
`display: none;`	隐藏元素
`position: relative / absolute / fixed;`	定位方式
`top / left / right / bottom`	定位偏移
`text-align: center;`	文字水平对齐
`line-height: 1.6;`	行高
`overflow: hidden;`	内容溢出处理
`box-shadow: 0 2px 8px rgba(0,0,0,.1);`	阴影
`transition: all .3s;`	过渡动画
`cursor: pointer;`	鼠标手型
`z-index: 10;`	层叠顺序
`max-width: 1200px; margin: 0 auto;`	容器居中（经典写法）
`@media (max-width: 768px) {}`	响应式断点
`:hover`	鼠标悬停状态