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

CSS 属性 grid-template-rows 定义了行名称和用于调整网格行中轨道大小的函数。

您可以通过以下方式定义此属性：

值 none 表示为关键字。
或 <track-list> 值。
或 <auto-track-list> 值。

可能的值

none - 这是一个关键字，指示缺少显式网格结构。在这种情况下，行是隐式创建的，其大小由 grid-auto-rows 属性确定。
[line-name] - <custom-ident> 指定位于那里的行的名称。此标识符可以是任何有效的字符串，但保留术语 span 和 auto 除外。
<length> - 非负长度。
<percentage> - 相对于网格容器的块大小，此值是非负的 <percentage>。如果网格容器的大小取决于其轨迹，则百分比的行为类似于 auto，用于确定容器的实际大小。
<flex> - 此值是非负维度，单位为 fr，表示轨道的弯曲系数。根据其弯曲系数，每个具有一定尺寸的轨道都会占用剩余空间的一部分。
max-content - 这是一个关键字，用于指定占据网格轨道的网格元素的最大内容贡献。
min-content - 这是一个关键字，用于指定网格轨道中网格元素的最大最小内容贡献。
minmax（min， max） - 此函数定义一个大小范围，从最小值到最大值。如果最大值小于最小值，则不考虑最大值，函数仅使用最小值。
auto - 轨道中的最大值和最小值分别表示最大和最小内容大小（由 min-width/min-height 指定），当在 minmax（）表示法之外单独使用时，auto 会覆盖它们之间的范围。
fit-content( [ <length> | <percentage> ] ) - 表示表达式 min（max-content， max（auto， argument）），其计算方式类似于 auto （i.e. minmax（auto， max-content）），但如果超过自动最小值，则轨道大小仅限于参数。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) - 表示轨道列表的重复部分，并允许以更压缩的方式编写具有重复模式的大量行。
subgrid - 如果设置为子网格，则网格沿轴继承其父网格的跨区部分，依赖于父网格对行/列的定义。

语法

grid-template-rows = none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

适用于

网格容器。

CSS grid-template-rows - 基本示例

以下示例演示如何指定网格行大小。

在给定的示例中，grid-template-rows 属性通过指定大小相等的三行和分数单位（1fr）来定义网格容器的布局。

<html>
<head>
<style>
	 	body {
	 	 	 font-family: Arial, sans-serif;
	 	 	 margin: 0;
	 	 	 padding: 0;
	 	}
	 	.grid {
	 	 	 display: grid;
	 	 	 height: 400px;
	 	 	 grid-template-rows: 45px , 1fr;
	 	 	 gap: 10px;
	 	}
	 	.grid-item {
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 font-size: 20px;
	 	 	 color: white;
	 	 	 border-radius: 5px;
	 	}
	 	.demo-areaA {
	 	 	 background-color: #3498db;
	 	}
	 	.demo-areaB {
	 	 	 background-color: #e74c3c;	
	 	}
	 	.demo-areaC {
	 	 	 background-color: #2ecc71;
	 	}
	 	.demo-areaD {
	 	 	 background-color: #f39c12;
	 	}
	 	.demo-areaE {
	 	 	 background-color: #9b59b6;
	 	}
	 	.demo-areaF {
	 	 	 background-color: #34495e;
	 	}
	 	.demo-areaG {
	 	 	 background-color: #c9d12e;
	 	}
</style>
</head>
<body>
	 	<div class="grid">
	 	 	 <div class="grid-item demo-areaA">One</div>
	 	 	 <div class="grid-item demo-areaB">Two</div>
	 	 	 <div class="grid-item demo-areaC">Three</div>
	 	 	 <div class="grid-item demo-areaD">Four</div>
	 	 	 <div class="grid-item demo-areaE">Five</div>
	 	 	 <div class="grid-item demo-areaF">Six</div>
	 	 	 <div class="grid-item demo-areaG">Seven</div>
	 	</div>
</body>
</html>

CSS grid-template-rows - 使用 [行名]

在以下示例中，grid-template-rows 属性定义网格容器 [row1] 的布局，该布局用作 grid-template-rows 属性中的命名行，以创建名称为 row1 的特定行，其高度为 120 像素。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #f0f8ff;
	 	 	 font-family: 'Arial', sans-serif;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: [row1] 120px;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ff9966;
	 	 	 color: #fff;
	 	 	 font-size: 1.2em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 20px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div style="grid-row: row1;">Header Row</div>
	 	<div>Item One</div>
	 	<div>Item Two</div>
	 	<div>Item Three</div>
	 	<div>Item Four</div>
	 	<div>Item Five</div>
	 	<div>Item Six</div>
	 	<div>Item Seven</div>
	 	<div>Item Eight</div>
	 	<div>Item Nine</div>
	 	<div>Item Ten</div>
	 	<div>Item Eleven</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用 <flex>

在以下示例中，CSS 属性 grid-template-rows： 1fr 2fr 1fr 3fr; 定义了网格容器的行大小，确保四行具有不同的高度。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #f2f2f2;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: 1fr 2fr 1fr 3fr;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #3498db;
	 	 	 color: white;
	 	 	 font-size: 2em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 10px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Element 1</div>
	 	<div>Element 2</div>
	 	<div>Element 3</div>
	 	<div>Element 4</div>
	 	<div>Element 5</div>
	 	<div>Element 6</div>
	 	<div>Element 7</div>
	 	<div>Element 8</div>
	 	<div>Element 9</div>
	 	<div>Element 10</div>
	 	<div>Element 11</div>
	 	<div>Element 12</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用 <length>

在以下示例中，CSS 属性 grid-template-rows 使用不同的长度值定义网格容器的行大小，以确保四行具有不同的高度。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #dcdcdc;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: 30px 40px 60px 80px;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ff8c00;
	 	 	 color: #fff;
	 	 	 font-size: 1.4em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 15px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Item Alpha</div>
	 	<div>Item Beta</div>
	 	<div>Item Gamma</div>
	 	<div>Item Delta</div>
	 	<div>Item Epsilon</div>
	 	<div>Item Zeta</div>
	 	<div>Item Eta</div>
	 	<div>Item Theta</div>
	 	<div>Item Iota</div>
	 	<div>Item Kappa</div>
	 	<div>Item Lambda</div>
	 	<div>Item Mu</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用<百分比>

在以下示例中，CSS 属性 grid-template-rows 使用不同的百分比值定义网格容器的行大小，确保四行具有不同的高度。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #e6e6e6;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: 15% 20% 30% 40%;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #4CAF50;
	 	 	 color: #fff;
	 	 	 font-size: 1.5em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 15px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Item A</div>
	 	<div>Item B</div>
	 	<div>Item C</div>
	 	<div>Item D</div>
	 	<div>Item E</div>
	 	<div>Item F</div>
	 	<div>Item G</div>
	 	<div>Item H</div>
	 	<div>Item I</div>
	 	<div>Item J</div>
	 	<div>Item K</div>
	 	<div>Item L</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用 max-content

在以下示例中，CSS 属性 grid-template-rows： max-content 定义了网格容器的行大小，每行将根据其中的内容调整其高度。

当您希望网格动态适应每行中的内容大小时，这可能很有用

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #dcdcdc;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: max-content;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ff8c00;
	 	 	 color: #fff;
	 	 	 font-size: 1.2em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 12px;
	 	 	 border-radius: 6px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Item Alpha with lengthy content</div>
	 	<div>Item Beta</div>
	 	<div>Item Gamma</div>
	 	<div>Item Delta 	with lengthy content</div>
	 	<div>Item Epsilon</div>
	 	<div>Item Zeta</div>
	 	<div>Item Eta</div>
	 	<div>Item Theta</div>
	 	<div>Item Iota</div>
	 	<div>Item Kappa 	with lenghthy content</div>
	 	<div>Item Lambda</div>
	 	<div>Item Mu</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用 min-content

在以下示例中，CSS 属性 grid-template-rows： min-content 定义了网格容器的行大小，每行将根据其中的内容调整其高度。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #e6f7ff;
	 	 	 font-family: 'Arial', sans-serif;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: min-content;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ffcc66;
	 	 	 color: #333;
	 	 	 font-size: 1.5em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 15px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Item One</div>
	 	<div>Item Two</div>
	 	<div>Item Three</div>
	 	<div>Item Four</div>
	 	<div>Item Five</div>
	 	<div>Item Six</div>
	 	<div>Item Seven</div>
	 	<div>Item Eight</div>
	 	<div>Item Nine</div>
	 	<div>Item Ten</div>
	 	<div>Item Eleven</div>
	 	<div>Item Twelve</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用重复函数

在以下示例中，CSS 属性 grid-template-rows： repeat（）使用不同的百分比值定义网格容器的行大小，确保行的高度不同。

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #e6f7ff;
	 	 	 font-family: 'Arial', sans-serif;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-rows: repeat(3, minmax(0, 15%));
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ffcc66;
	 	 	 color: #333;
	 	 	 font-size: 1.5em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 15px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div>Item One</div>
	 	<div>Item Two</div>
	 	<div>Item Three</div>
	 	<div>Item Four</div>
	 	<div>Item Five</div>
	 	<div>Item Six</div>
	 	<div>Item Seven</div>
	 	<div>Item Eight</div>
	 	<div>Item Nine</div>
	 	<div>Item Ten</div>
	 	<div>Item Eleven</div>
	 	<div>Item Twelve</div>
</div>
</body>
</html>

CSS grid-template-rows - 使用自动

在以下示例中，网格容器的行大小由 CSS 规则 grid-template-rows： auto auto; 定义，该规则表示它有两行，其自动高度会根据每行中的内容而变化。

这将生成一个网格布局，其中每行的高度会动态更改以适应内容。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F2F2F2;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 grid-template-columns: auto auto auto;
	 	 	 gap: 15px;
	 	 	 background-color: #4CAF50;
	 	 	 padding: 15px;
	 	 	 grid-template-rows: auto auto;
	 	}
	 	#customGrid div {
	 	 	 background-color: rgba(255, 255, 255, 0.9);
	 	 	 text-align: center;
	 	 	 padding: 20px;
	 	 	 font-size: 24px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<h1>Grid with grid-template-rows</h1>
<div id="customGrid">
	 	<div class="box1"> Box A</div>
	 	<div class="box2">Box B</div>
	 	<div class="box3">Box C</div>
	 	<div class="box4">Box D</div>
	 	<div class="box5">Box E</div>
	 	<div class="box6">Box F</div>
</div>
</body>
</html>

<< CSS - grid-template-columns 属性 CSS - Flexbox - flex-wrap 属性 >>