上查看所有课程
CSS 网格容器是 HTML 元素，作为网格项的父元素。
下图显示了一个带有三个网格项（橙色框）的网格容器（紫色框）。
CSS 网格布局模型在使用任何基于网格的属性之前需要一个网格容器。
display 属性和 grid 值可以将元素设置为网格容器。例如，
/* A div element (grid container) having
three paragraphs (grid items) */
<div>
<p>First Item</p>
<p>Second Item</p>
<p>Third Item</p>
</div>
/* CSS */
div {
display: grid;
}在此，display: grid 将 div 元素设置为网格容器。div 元素内的所有直接元素都称为网格项。
网格容器属性定义了整体网格结构，例如列和行的数量以及列和行的大小和间距。
CSS 网格容器属性
网格容器具有以下一组属性
设置网格
display: grid- 将 HTML 元素转换为网格容器。
指定网格行和列
grid-template-columns- 定义列的大小和数量。
grid-template-rows- 定义行的大小和数量。
grid-template-areas- 定义网格项可以放置的命名网格区域。
grid-template- 定义行、列和区域的单个属性的简写。
指定网格行和列间隙
grid-column-gap- 定义列之间的间隙。
grid-row-gap- 定义行之间的间隙。
grid-gap- 定义行和列间隙的简写。
对齐网格项
justify-items- 在其网格单元格内水平对齐项。
align-items- 在其网格单元格内垂直对齐项。
place-items- 水平和垂直对齐项的简写。
对齐网格
justify-content- 沿水平轴对齐网格。
align-content- 沿垂直轴对齐网格。
place-content- 水平和垂直对齐内容的简写。
设置自动网格轨道
grid-auto-columns- 定义自动生成的列的大小。
grid-auto-rows- 定义自动生成的行的大小。
grid-auto-flow- 定义自动生成网格项的放置。
简写网格属性
grid- 在单个声明中定义多个网格属性的简写属性。
让我们详细了解每个属性。
CSS display 属性
display 属性的 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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
/* sets the element as a grid container */
display: grid;
width: 400px;
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;
}浏览器输出
在上面的示例中，display: grid 将外部 div 元素设置为网格容器。
但是，布局中仍然没有可见的效果，并且网格项，即 div 元素，在网格容器内正常流动。
CSS grid-template-columns
grid-template-columns 属性定义了网格容器中列的大小和数量。
grid-template-columns 属性的语法是
grid-template-columns: column1-size column2-size column3-size ..在这里，grid-template-columns 属性接受不同的长度值（px、em、百分比等）作为列的大小。
列大小值的数量决定了列的数量。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* creates a three columns of size 100px, 200px, 100px respectively */
grid-template-columns: 100px 200px 100px;
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-template-columns: 100px 200px 100px;创建了三个列的网格，大小分别为 100px、200px 和 100px。
列大小值也可以根据需要混合在一起。例如，
grid-template-columns: 100px 25% 3em;浏览器输出
这里，
grid-template-columns: 100px 25% 3em;创建了三个列的网格，大小分别为 100px、容器总宽度的 25% 和 3em。
CSS grid-template-rows
grid-template-rows 属性定义了网格容器中行的大小和数量。
grid-template-rows 属性的语法是
grid-template-rows: row1-size row2-size row3-size ..在这里，grid-template-rows 接受不同的长度值（px、em、百分比等）作为行的大小。
行大小值的数量决定了行的数量。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
grid-template-columns: 100px 200px 100px;
/* sets three rows of size 100px, 60px, and 80px respectively */
grid-template-rows: 100px 60px 80px;
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-template-rows: 100px 60px 80px;创建了三行网格，大小分别为 100px、60px 和 80px。
注意：行或列也称为网格轨道。网格轨道是两条网格线之间的相邻空间。
CSS 分数（Fr）单位
分数单位 (fr) 将网格容器中的可用空间分成几部分。它以灵活动态的方式将网格容器中的可用空间分配给列或行。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* column-1, column-2, column-3 */
grid-template-columns: 1fr 2fr 1fr;
/* row-1, row-2, row-3 */
grid-template-rows: 1fr 1fr 2fr;
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-template-columns: 1fr 2fr 1fr;将可用水平空间分成四等份：第一列占据 **一部分**，第二列占据 **两部分**，第三列占据 **一部分**。
同样，
grid-template-rows: 1fr 1fr 2fr;将可用垂直空间分成四等份：第一行和第二行各占 **一部分**，而第三行占 **两部分**。
最小和最大网格轨道大小
minmax() 函数定义了网格轨道的最小和最大尺寸，即行或列的大小。
minmax() 函数的语法是
minmax(min-size, max-size)minmax() 函数接受 2 个参数
min-size：第一个是轨道的最小尺寸max-size：第二个是最大尺寸。
例如，
grid-template-columns: minmax(100px, 300px) 200px;创建了两列，其中，
- 第一列的宽度可以动态变化，从最小的
100px到最大的300px，以及 - 第二列保持固定的
200px宽度。
除了长度（px、em、百分比等）值之外，minmax() 函数还接受 auto 值，该值允许轨道根据内容的大小进行增长/拉伸。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">
The first column track has a minimum size of auto. This means
that the minimum size it will take is to fit the content. Its
maximum size of 50% will prevent it from getting wider than 50%
of the grid container width.
</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* column-1, column-2, column-3 */
grid-template-columns: minmax(auto, 80%) 1fr 3em;
/* row-1, row-2, row-3 */
grid-template-rows: 1fr 1fr 3fr;
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的示例中，第一列的值是
minmax(auto, 80%)这使得列能够自动调整其宽度以适应其内容，但不会超过网格容器中可用空间的 80%。
重复网格轨道
repeat() 函数定义重复的网格轨道。这对于尺寸相等的网格很有用。
repeat() 函数的语法是
repeat(no of tracks, track size)repeat() 表示法接受两个参数
no of tracks：第一个表示定义的轨道应重复的次数track size：第二个是轨道大小。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* creates 3 columns of 100px each */
grid-template-columns: repeat(3, 100px);
/* creates 3 rows of equal fraction */
grid-template-rows: repeat(3, 1fr);
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-template-columns: repeat(3, 100px)创建了三列，每列宽度为 100px。
而且，
grid-template-rows: repeat(3, 1fr)创建了三行，占据了可用垂直空间的相等分数。
CSS grid-template-areas
grid-template-areas 属性使用命名的网格区域定义网格容器的布局。
grid-template-areas 属性的语法是
grid-template-areas:
"area-name1 area-name2 area-name3"
"area-name4 area-name5 area-name6"
/* ... additional rows ... */;这里，
- 双引号内的每一行代表网格中的一行
- 每个区域名称对应一个命名的网格区域，它们之间用空格分隔
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<div class="container">
<header>HEADER</header>
<aside class="left">SIDEBAR 1</aside>
<aside class="right">SIDEBAR 2</aside>
<main>MAIN SECTION</main>
<footer>FOOTER</footer>
</div>
</body>
</html>div.container {
display: grid;
/* defines the columns */
grid-template-columns: 1fr 3fr 1fr;
/* defines the rows */
grid-template-rows: 40px 100px 40px;
/* defines the grid areas placing the grid items */
grid-template-areas:
"header header header"
"sidebar1 main sidebar2"
"footer footer footer";
border: 2px solid black;
text-align: center;
}
header {
/* places the header within the header grid area */
grid-area: header;
background-color: skyblue;
}
aside.left {
/* places left sidebar within the sidebar1 grid area */
grid-area: sidebar1;
}
aside.right {
/* places right sidebar within the sidebar2 grid area */
grid-area: sidebar2;
}
main {
/* places the main content within the main grid area */
grid-area: main;
background-color: greenyellow;
}
footer {
/*places the footer in the footer grid area*/
grid-area: footer;
background-color: skyblue;
}浏览器输出
在上面的例子中：
grid-template-areas:
"header header header"
"sidebar1 main sidebar2"
"footer footer footer";定义了一个具有五个元素的不同区域的网格布局：标题、两个侧边栏、主内容和页脚部分。
grid-area 属性允许将网格项放置在相应的网格地址中。例如，
header {
grid-area: header;
}允许 header 元素完全占据网格容器的第一行。
元素被放置在 grid-template-areas 属性中提到的相应网格区域。
CSS grid-template 属性
grid-template 是一个简写属性，用于在单个声明中指定 grid-template-rows、grid-template-columns 和 grid-template-areas。
grid-template 属性的语法是
grid-template: none | grid-template-rows / grid-template-columns让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
</div>
</body>
</html>div.container {
display: grid;
/* grid-template-rows / grid-template-columns */
grid-template: 50px 150px 50px / 1fr 1fr 1fr;
width: 400px;
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: 10px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-template: 50px 150px 50px / 1fr 1fr 1fr;创建了一个三行网格容器，高度分别为 50px、150px 和 50px，以及三列，它们各自占据网格容器宽度的相等分数。
CSS grid-column-gap 属性
grid-column-gap 属性定义了网格容器中列之间的间距。
grid-column-gap 属性的语法是
gird-column-gap: value该值可以是任何有效的长度单位，例如像素、百分比、em、rem 等。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* defines 3 rows of 80px each */
grid-template-rows: repeat(3, 80px);
/* defines 3 columns of equal fraction */
grid-template-columns: repeat(3, 1fr);
/* creates a column gap of 20px */
grid-column-gap: 20px;
width: 400px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 30px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-column-gap: 20px在网格容器的相邻列之间定义了 20px 的间隙。
CSS grid-row-gap 属性
grid-row-gap 属性定义了网格容器行之间的间距。
grid-row-gap 属性的语法是
gird-row-gap: value该值可以是任何有效的长度单位，例如像素、百分比、em、rem 等。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* defines three rows of 80px each */
grid-template-rows: repeat(3, 80px);
/* defines three columns of equal fraction */
grid-template-columns: repeat(3, 1fr);
/* creates a row gap of 20px */
grid-row-gap: 20px;
width: 400px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 30px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-row-gap: 20px在网格容器的相邻行之间定义了 20px 的间隙。
CSS grid-gap 属性
grid-gap 是一个简写属性，用于同时指定 grid-column-gap 和 grid-row-gap。例如，
<!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 Container</title>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>div.container {
display: grid;
/* defines three rows of 80px each */
grid-template-rows: repeat(3, 80px);
/* defines three columns of equal fraction */
grid-template-columns: repeat(3, 1fr);
/* creates a row and column gap of 20px */
grid-gap: 20px;
width: 400px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
text-align: center;
padding: 30px;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid-gap: 20px在网格容器的相邻列和行之间定义了 20px 的间隙。
CSS justify-content 属性
justify-content 属性控制网格在网格容器内的水平对齐。
justify-content 属性的可能值是 start、end、center、space-around、space-between 和 space-evenly。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* aligns the entire grid to center in the grid container*/
justify-content: center;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在上面的例子中：
justify-content: center将网格对齐到网格容器的中心。
注意：只有当形成的网格大小小于网格容器大小时，justify-content 才会生效。
justify-content 属性的值
justify-content: start
justify-content 的 start 值将网格对齐到网格容器的起始边缘。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* aligns the grid to start of the grid container*/
justify-content: start;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
justify-content: end
justify-content 的 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* aligns the grid to end of the grid container*/
justify-content: end;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
justify-content: space-around
justify-content 的 space-around 值在网格项之间均匀分布水平空间，同时在两端保持一半的空间。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and column */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* adds the space around the grid items */
justify-content: space-around;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
justify-content: space-between
justify-content 的 space-between 值仅在网格项之间均匀分布空间。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* adds the space only between the gird items */
justify-content: space-between;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
justify-content: space-evenly
justify-content 的 space-evenly 值在网格项之间均匀分布空间，包括第一个和最后一个网格项。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 40px);
/* distributes the space evenly between the items */
justify-content: space-evenly;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
CSS align-content 属性
align-content 属性控制网格在网格容器内的垂直对齐。
align-content 属性的可能值是 start、end、center、space-around、space-between 和 space-evenly。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* aligns the grid vertically to center of grid container */
align-content: center;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
这里，
align-content: center将网格垂直对齐到网格容器的中心。
注意：当网格容器大于网格本身时，align-content 才会生效。
align-content 属性的值
align-content: start
align-content 属性的 start 值将网格对齐到网格容器的顶部边缘。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines the rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* aligns the grid to the top of grid container*/
align-content: top;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
align-content: end
align-content 的 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* aligns the grid to bottom of grid container*/
align-content: end;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
align-content: space-around
align-content 的 space-around 值在网格项之间均匀分布垂直空间，同时在两端保持一半的空间。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* vertically aligns the space */
align-content: space-around;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
align-content: space-between
align-content 的 space-between 值仅在网格项之间均匀分布垂直空间。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* distributes the space between the items vertically */
align-content: space-between;
width: 400px;
column-gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
align-content: space-evenly
justify-content 的 space-evenly 值在网格项之间均匀分布空间，包括第一个和最后一个网格项的垂直空间。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* distributes the space evenly in vertical direction */
align-content: space-evenly;
width: 400px;
column-gap: 12px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
CSS place-content 属性
place-content 是一个简写属性，用于在单个声明中指定 justify-content 和 align-content。
place-content 属性的语法是
place-content: align-content place-content在这里，第一个值设置 align-content，第二个值设置 justify-content。如果省略第二个值，则第一个值将同时用于这两个属性。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
width: 400px;
height: 180px;
/* defines rows and columns */
grid-template-rows: repeat(2, 30px);
grid-template-columns: repeat(3, 80px);
/* sets align-content to center and justify-content to end of grid container*/
place-content: center end;
column-gap: 20px;
border: 2px solid black;
background-color: orange;
}
/* styles all grid items */
div.item {
text-align: center;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在上面的例子中：
place-content: center end将 align-content 属性设置为 center，将 justify-content 设置为 end。
结果，网格在垂直方向上居中对齐，在水平方向上右对齐。
CSS justify-items 属性
justify-items 属性控制网格项在其各自网格单元格内的水平对齐。
justify-items 属性的常见值是 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the end of grid cells */
justify-items: end;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
width: 20px;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，justify-items 属性的 end 值将网格项对齐到网格单元格的末端。
注意：单个项也可以使用 justify-self 属性进行自我对齐。此属性应应用于网格项。
justify-items 属性的值
justify-items: start
justify-items 的 start 值将网格项对齐到网格单元格的起始位置。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the start of grid cells */
justify-items: start;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
width: 20px;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，justify-items: start 将所有网格项对齐到网格单元格的起始位置。
justify-items: center
justify-items 的 center 值将网格项对齐到网格单元格的中心。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the center of grid cells */
justify-items: center;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
width: 20px;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，justify-items: center 将所有网格项对齐到网格单元格的中心。
justify-items: stretch
justify-items 的 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* stretches the grid items to fill the grid cells */
justify-items: stretch;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，所有网格项都被拉伸以填充整个网格单元格。
CSS align-items 属性
align-items 属性控制网格项在其各自网格单元格内的垂直对齐。
align-items 属性的常见值是 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the bottom of grid cells */
align-items: end;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，align-items 属性的 end 值将网格项对齐到网格单元格的底部。
注意：单个项也可以使用 align-self 属性进行自我对齐。此属性应应用于网格项。
align-items 属性的值
align-items: start
align-items 的 start 值将网格项对齐到网格单元格的顶部。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the top of grid cells */
align-items: start;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，align-items: start 将所有网格项对齐到网格单元格的顶部。
align-items: center
align-items 的 center 值将网格项对齐到网格单元格的中心。例如，
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the center of grid cells */
align-items: center;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，align-items: center 将所有网格项对齐到网格单元格的中心。
align-items: stretch
align-items 的 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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* aligns the grid items at the top of grid cells */
align-items: stretch;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，所有网格项都被拉伸以填充整个网格单元格。
CSS place-items
place-items 是一个简写属性，用于在单个声明中指定 align-items 和 justify-items 属性。
place-items 的语法如下：
place-items: align-items justify-items在这里，第一个值设置 align-items，第二个值设置 justify-items 属性。如果省略第二个值，则第一个值将同时用于这两个属性。
让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* defines rows and columns */
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(3, 1fr);
/* sets align-items and justify-items to the center of grid cell */
place-items: center;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
width: 40px;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在这里，place-items 属性将 align-items 和 justify-items 属性都设置为中心。
结果，网格内容在网格单元格内垂直和水平居中对齐。
CSS grid 属性
grid 是一个简写属性，用于在单个声明中指定 grid-template-rows 和 grid-template-columns 属性。
grid 属性的语法是
grid: none | grid-template-rows / grid-template-columns让我们看一个例子。
<!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 Container</title>
</head>
<body>
<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>
</body>
</html>div.container {
display: grid;
/* grid-template-rows / grid-template-columns */
grid: 50px 100px / 1fr 1fr 2fr;
width: 400px;
gap: 12px;
border: 2px solid black;
background-color: orange;
padding: 12px;
}
/* styles all grid items */
div.item {
width: 100%;
border: 1px solid black;
background-color: greenyellow;
font-weight: bold;
}浏览器输出
在上面的例子中：
grid: 50px 100px / 1fr 1fr 2fr;等同于：
grid-template-rows: 50px 100px;
grid-template-columns: 1fr 1fr 2fr;