CSS - grid-template 属性_CSS 菜鸟教程

CSS grid-template 是一个简写属性，用于指定网格列、网格行和网格区域。

grid-template 属性是以下各个网格相关属性的简写：

可能的值

none − 默认值。将根据 grid-auto-rows 和 grid-auto-columns 属性自动创建网格。
<grid-template-rows> / <grid-template-columns> - grid-template-rows 和 grid-template-columns 设置为指定值，grid-template-areas 设置为 none。
[ <line-names>？ <string> <track-size>？ <line-names>？+ [ /<explicit-track-list> ]？− 通过使用指定的字符串定义 grid-template-areas、grid-template-rows 和 grid-template-columns 来设置网格布局。此外，在每个行大小之前和之后创建命名行。

您不能在这些轨道列表中使用 repeat（） 函数，因为轨道必须与“ASCII 艺术”中的行和列完全匹配。

grid 速记属性的工作方式与 grid-template 属性相同，并将隐式网格属性重置为其默认值。您可以使用 grid 而不是 grid-template 来避免这些值的单独级联。

适用于

网格容器。

DOM 语法

object.style.gridTemplate = "none|<grid-template-rows> / <grid-template-columns>|[ <line-names>? <string> <track-size>? <line-names>? ]+ [ /<explicit-track-list> ]?";

CSS 网格模板 - none值

以下示例演示了 grid-template： none 属性根据内容自动排列行和列 -

<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid-template: none;
	 	 	 color: white;
	 	 	 text-align: center;
	 	 	 width: 360px;
	 	 	 background-color: lightgreen;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	</div>
</body>
</html>

CSS 网格模板 - <grid-template-rows> / <grid-template-columns>

以下示例演示了包含两行（高度为 100px 和 50px）以及两列（宽度为 150px 和 300px）的网格布局。

<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid-template: 100px 50px / 150px 300px;
	 	 	 color: white;
	 	 	 text-align: center;
	 	 	 background-color: lightgreen;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	</div>
</body>
</html>

CSS grid-template - 模板设计

以下示例演示了响应式结构化网页布局。网格布局包含导航栏、左右部分以及页脚 -

<html>
<head>
<style>
	 	.navbar {
	 	 	 background-color: lightgreen;
	 	 	 grid-area: nav;
	 	}
	 	.left {
	 	 	 background-color: pink;
	 	 	 grid-area: left;
	 	}
	 	.right {
	 	 	 background-color: violet;
	 	 	 grid-area: right;
	 	}
	 	.footer {
	 	 	 background-color: lightgreen;
	 	 	 grid-area: footer;
	 	}
	 	.grid-box {
	 	 	 display: grid;
	 	 	 width: 100%;
	 	 	 height: 300px;
	 	 	 grid-template:
	 	 	 	 	"nav nav" 40px	
	 	 	 	 	"right left" 200px
	 	 	 	 	"footer footer" 40px;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-box">
	 	 	 <div class="navbar">Navbar</div>
	 	 	 <div class="left">Left Section</div>
	 	 	 <div class="right">Right Section</div>
	 	 	 <div class="footer">Footer</div>
	 	</div>
</body>
</html>

CSS grid-template - 相关属性

以下是与 grid-template 属性相关的 CSS 属性列表：

属性	值
grid-template-columns	指定用于确定网格列大小的网格线和函数的名称。
grid-template-rows	指定用于确定网格行大小的网格线和函数的名称。
grid-template-area	指定用于确定网格区域大小的网格线和函数的名称。

<< CSS - grid-row-start 属性 CSS - grid-template-areas 属性 >>