上查看所有课程
Grid 元素是 flex 容器的直接子元素。
在下面的图表中，紫色框代表 grid 容器，其中三个 grid 元素为橙色框。
有不同的属性集用于在 grid 容器内放置和对齐 grid 元素。
Grid 线编号
CSS grid 由一组水平和垂直线组成，形成行和列。这些线通过其线编号来引用。
Grid 容器内的 grid 元素可以使用这些线编号进行放置。
四个相邻的 grid 线形成一个 grid 单元格。grid 元素可以放置在一个或多个 grid 单元格内。
注意：grid 线从 grid 容器的左上角开始。行线编号向下增加，列线编号向右增加。
使用线编号放置 Grid 元素
可以使用 grid 线编号来放置 grid 元素。以下属性控制使用 grid 线编号放置 grid 元素。
grid-column-start：定义起始列线编号
grid-column-end：定义结束列线编号
grid-row-start：定义起始行线编号
grid-row-end：定义结束行线编号
这些属性接受以下值
line-number：用于引用带编号的 grid 线的数字
span <number>：grid 元素将跨越提供的 grid 轨道数量
示例 1：放置 Grid 元素
让我们使用 grid 线编号来放置 grid 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 3 rows and three columns */
grid-template: 100px 100px 50px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* places the first grid item */
div.item-1 {
grid-row-start: 1;
grid-row-end: 3;
background-color: purple;
}
/* places the second grid item */
div.item-2 {
grid-column-start: 2;
grid-column-end: 4;
background-color: red;
}浏览器输出
这里，
div.item-1 {
grid-row-start: 1;
grid-row-end: 3;
background-color: purple;
}将第一个元素（紫色）从行线1设置到行线3。
同样，
div.item-2 {
grid-column-start: 2;
grid-column-end: 4;
background-color: red;
}将第二个元素（红色）从列线2设置到列线4。
默认情况下，grid 元素会在 grid 容器内的 grid 单元格中按顺序自动填充。
注意：我们无法在浏览器输出中可视化 grid 线，因为它们用于在页面上定位元素，而不是显示。但是，我们可以使用 Mozilla 浏览器在控制台中提供的 Grid Inspector 来可视化 grid 线。
CSS grid-row 和 grid-column 属性
grid-row 和 grid-column 是用于指定 grid 线编号的简写属性。
这里，
grid-row：定义grid-row-start和grid-row-end属性grid-column：定义grid-column-start和grid-column-end属性
grid-row 和 grid-column 属性的语法如下：
grid-row: grid-row-start / grid-row-end;
grid-column: grid-column-start / grid-column-end;让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 3 rows and three columns */
grid-template: 100px 100px 50px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* places the first grid item */
div.item-1 {
grid-row: 1/4;
background-color: purple;
}
/* places the second grid item */
div.item-2 {
grid-column: 2/4;
background-color: red;
}浏览器输出
在上面的例子中：
grid-row: 1/4在 grid 容器内，将第一个 grid 元素（紫色框）从行线1放置到行线4。
同样，
grid-column: 2/4将第二个 grid 元素（红色框）从列线2放置到列线4。
注意：Grid 线也可以分配自定义名称，grid 元素可以使用这些名称进行定位。线名称必须在指定 grid 列和行时定义。
跨越行和列
span 关键字用于按指定数量扩展行和列。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 3 rows and three columns */
grid-template: 100px 100px 50px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* places the first grid item */
div.item-1 {
grid-column: 1 / span 3;
background-color: purple;
}浏览器输出
在上面的例子中：
grid-column: 1 / span 3;在 grid 容器内，将第一个 grid 元素从列线1扩展到列线3。
CSS grid-area 属性
grid-area 属性在单个声明中指定 grid 元素的行和列位置。
grid-area 属性的语法如下：
grid-area: row-start / column-start / row-end / column-end | item-name;让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 3 rows and three columns */
grid-template: 100px 100px 50px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* places the first grid item */
div.item-1 {
grid-area: 1 / 1 / 3/ 3;
background-color: purple;
}浏览器输出
在上面的例子中：
grid-area: 1 / 1 / 3 / 3等同于
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;注意：grid-area 属性可以指定一个区域名称，该名称对应于 grid-template-areas 属性定义的命名 grid 区域。
CSS justify-self 属性
justify-self 属性用于控制 grid 元素在其 grid 单元格内的水平对齐。
justify-self 属性的可能值为 start、end、center 和 stretch。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the end of grid cell */
div.item-1 {
justify-self: end;
background-color: purple;
}浏览器输出
在上面的示例中，justify-self: end 将第一个元素的 grid 内容对齐到 grid 单元格的 end。
justify-self 的值
justify-self: start
justify-self 属性的 start 值将 grid 内容对齐到 grid 单元格的起始位置。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the start of grid cell */
div.item-1 {
justify-self: start;
background-color: purple;
}浏览器输出
justify-self: center
justify-self 属性的 center 值将 grid 内容对齐到 grid 单元格的中心位置。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the center of grid cell */
div.item-1 {
justify-self: center;
background-color: purple;
}浏览器输出
justify-self: stretch
justify-self 的 stretch 值将内容拉伸以填充 grid 单元格。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* stretches the content to fill the grid cell */
div.item-1 {
justify-self: stretch;
background-color: purple;
}浏览器输出
CSS align-self 属性
align-self 属性用于控制 grid 元素在其 grid 单元格内的垂直对齐。
align-self 属性的可能值为 start、end、center 和 stretch。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the end of grid cell */
div.item-1 {
align-self: end;
background-color: purple;
}浏览器输出
在上面的示例中，align-self: end 将第一个元素的 grid 内容对齐到 grid 单元格的末尾。
align-self 的值
align-self: start
align-self 属性的 start 值将 grid 内容对齐到 grid 单元格的起始位置。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the start of grid cell */
div.item-1 {
align-self: start;
background-color: purple;
}浏览器输出
align-self: center
align-self 属性的 center 值将 grid 内容对齐到 grid 单元格的中心位置。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the center of grid cell */
div.item-1 {
align-self: center;
background-color: purple;
}浏览器输出
align-self: stretch
align-self 的 stretch 值将内容拉伸以填充 grid 单元格。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* stretches the content to fill the grid cell */
div.item-1 {
align-self: stretch;
background-color: purple;
}浏览器输出
CSS place-self 属性
place-self 属性是一个简写属性，用于在单个声明中指定 justify-self 和 align-self 属性。
place-self 属性的语法如下
place-self: align-self place-self;在这里，第一个值设置 align-self，第二个值设置 justify-self 属性。如果省略第二个值，则第一个值将同时分配给这两个属性。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Items</title>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
/* defines the grid of 2 rows and three columns */
grid-template: 100px 100px / 100px 150px 100px;
width: 550px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 5px;
font-weight: bold;
}
/* aligns the content to the end of grid cell */
div.item-1 {
place-self: center center;
background-color: purple;
}浏览器输出
在上面的例子中：
place-self: center center;将 grid 内容水平和垂直居中对齐在 grid 单元格内。