当前位置：首页 > news >正文

Grid网格布局完整功能介绍和示例演示

news 2025/7/12 18:16:51

CSS Grid布局是一种强大的二维布局系统，可以将页面划分为行和列，精确控制元素的位置和大小。以下是其完整功能介绍和示例演示：

基本概念

网格容器（Grid Container）：应用display: grid的元素。
网格项（Grid Item）：容器的直接子元素。
网格线（Grid Line）：划分行和列的分界线。
网格轨道（Grid Track）：两条相邻网格线之间的空间。
网格单元格（Grid Cell）：行和列交叉形成的最小单位。
网格区域（Grid Area）：由多个单元格组成的矩形区域。

容器属性

定义网格结构

grid-template-columns和grid-template-rows：指定列和行的大小。

.container {display: grid;grid-template-columns: 100px 200px 100px; /* 三列，宽度分别为100px、200px、100px */grid-template-rows: 100px 200px; /* 两行，高度分别为100px、200px */
}

repeat()函数：简化重复的轨道定义。

grid-template-columns: repeat(3, 1fr); /* 三列等宽，占据剩余空间 */

fr单位：表示可用空间的比例。

minmax()函数：定义轨道的最小和最大尺寸。

grid-template-columns: 1fr minmax(200px, 1fr) 1fr; /* 中间列最小200px，最大占据剩余空间 */

auto关键字：根据内容自动调整大小。

网格间距
- gap（或row-gap、column-gap）：设置行和列之间的间距。
```
.container {gap: 20px; /* 行间距和列间距均为20px */
}
```

定位网格项

grid-area：命名区域，简化定位。

.container {grid-template-areas:"header header header""sidebar content content""footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

grid-column-start、grid-column-end、grid-row-start、grid-row-end：精确控制项的位置和跨度。

.item {grid-column-start: 1; /* 从第1列开始 */grid-column-end: 3; /* 到第3列结束 */grid-row-start: 2; /* 从第2行开始 */grid-row-end: 3; /* 到第3行结束 */
}
/* 简写形式 */
.item {grid-column: 1 / 3; /* 从第1列到第3列 */grid-row: 2 / 3; /* 从第2行到第3行 */
}

命名网格线

使用方括号[]为网格线命名，方便定位。

.container {grid-template-columns: [left] 100px [center] 200px [right];grid-template-rows: [top] 100px [middle] 200px [bottom];
}
.item {grid-column: left / center; /* 从left线到center线 */grid-row: top / middle; /* 从top线到middle线 */
}

项目属性

justify-self、align-self：控制单个项在单元格内的对齐方式。

.item {justify-self: center; /* 水平居中对齐 */align-self: end; /* 垂直底部对齐 */
}

示例演示

简单网格布局

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div>

.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 100px 100px;gap: 10px;
}
.item {background-color: lightgray;padding: 10px;text-align: center;
}

效果：六项均匀分布在3列2行的网格中。

响应式布局
```
.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;
}
```
效果：根据容器宽度自动调整列数，每列最小200px，最大占据剩余空间。

复杂布局

<div class="container"><div class="header">头部</div><div class="sidebar">侧边栏</div><div class="content">内容</div><div class="footer">底部</div>
</div>

.container {display: grid;grid-template-areas:"header header header""sidebar content content""footer footer footer";grid-template-columns: 200px 1fr 200px;grid-template-rows: auto 1fr auto;gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }