CSS Grid布局详解

发表于 2024-07-22 分类于技术本文字数： 272 阅读时长 ≈ 1 分钟

CSS Grid是现代布局利器，比Flexbox更适合复杂的页面布局。

基本概念

grid container - 网格容器
grid item - 网格项
grid line - 网格线
grid cell - 网格单元格

简单示例

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

常用属性

grid-template-columns/rows - 定义网格轨道
grid-area - 命名网格区域
grid-column/row - 指定项目位置

Grid让复杂布局变得简单！

0%