菜鸟教程
教程 css tutorial

网格线与区域

CSS Grid 中，网格线是定义网格单元边界的线，网格区域是由多条网格线围成的矩形区域。

1. 网格线编号

网格线从 1 开始编号，横向为列线，纵向为行线。

例如：

css 
grid-column: 1 / 3; /* 从第1条列线开始，到第3条列线结束（不包括第3条线所在列） */
grid-row: 2 / 4; /* 从第2条行线开始，到第4条行线结束 */

2. 命名网格线

可以使用方括号为网格线命名，方便布局。

css 
grid-template-columns: [start] 100px [line2] 1fr [end];
grid-template-rows: [top] 50px [bottom];

然后项目可以用命名定位：

css 
grid-column: start / line2;
grid-row: top / bottom;

3. 网格区域（Grid Area）

通过 grid-template-areas 定义命名区域，直观定义布局。

css 
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

给子元素赋值区域名：

css 
grid-area: header;

网格线与区域示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>Grid 网格线与区域示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: [start] 100px [line2] 1fr [end];
grid-template-rows: [top] 50px [middle] 150px [bottom];
grid-template-areas:
"header header"
"sidebar main";
gap: 10px;
background-color: #f3e5f5;
padding: 10px;
border: 2px solid #7b1fa2;
}


.header {
  grid-area: header;
  background-color: #ba68c8;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 6px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ce93d8;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 6px;
}

.main {
  grid-area: main;
  background-color: #ab47bc;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 6px;
}



</style>
</head>


<body>
<div class="grid-container">
<div class="header">头部区域</div>
<div class="sidebar">侧边栏</div>
<div class="main">主内容区</div>
</div>
</body>


</html>

相关内容