CSS 网格容器 详解
css3基础 2022-05-23 12:10:01小码哥的IT人生shichen
CSS 网格容器
1
2
3
4
5
6
7
8
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<h1>网格容器</h1>
<p>网格容器由按列和行排列的网格项目组成：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>网格容器的直接子元素将自动成为网格项目。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
网格容器
如需使 HTML 元素充当网格容器，您必须把 display 属性设置为 grid 或 inline-grid。
网格容器由放置在列和行内的网格项目组成。
grid-template-columns 属性
grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。
该值是以空格分隔的列表，其中每个值定义相应列的长度。
如果您希望网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。
示例代码：
生成包含四列的网格：
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-columns 属性：</h1>
<p>您可使用 <em>grid-template-columns</em> 属性来规定网格布局中的列数。</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注意：如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行并将这些项目放入其中。
grid-template-columns 属性还可以用于指定列的尺寸（宽度）。
示例代码：
设置这 4 列的尺寸：
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 30px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-columns 属性：</h1>
<p>请使用 <em>grid-template-columns</em> 属性来规定每列的尺寸。</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
grid-template-rows 属性
grid-template-rows 属性定义每列的高度。
1
2
3
4
5
6
7
8
它的值是以空格分隔的列表，其中每个值定义相应行的高度：
示例代码：
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-rows 属性：</h1>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<p>请使用 <em>grid-template-rows</em> 属性来规定每行的尺寸（高度）。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
justify-content 属性
justify-content 属性用于在容器内对齐整个网格。
1
2
3
4
5
6
7
8
注意：网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。
示例代码：
.grid-container {
display: grid;
justify-content: space-evenly;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "space-evenly" 会在列之间以及列周围留出相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
justify-content: space-around;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "space-around" 会在列周围留出相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
justify-content: space-between;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "space-between" 会在列之间留出相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
justify-content: center;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px; /* 制作小于容器的网格 */
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "center" 会在容器中间对齐网格：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
justify-content: start;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "start" 会在容器开头对齐网格：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
justify-content: end;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
<p>值 "end" 会在容器末端对齐网格：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
align-content 属性
align-content 属性用于垂直对齐容器内的整个网格。
1
2
3
4
5
6
7
8
注意：网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "center" 会对齐容器中间的行：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "space-evenly" 将使行之间以及行周围具有相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "space-around" 将使行周围具有相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "space-between" 将使行之间具有相等的空间：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: start;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "start" 会对齐容器开头的行：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: end;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 属性</h1>
<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
<p>值 "end" 会对齐容器末端的行：</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
