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() 表示法。

  • fit-content( [ <length> | <percentage> ] ): 表示表达式 min(max-content, max(auto, argument))，其计算方式与 auto 类似（即 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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    CSS grid-template-rows: 使用 [line-name]

    在下面的示例中，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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    CSS grid-template-rows: 使用 <percentage>

    在下面的示例中，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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    CSS grid-template-rows: 使用 auto

    在下面的示例中，网格容器的行大小由 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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35