CSS grid-template-rows 属性-之路教程

CSS grid-template-rows 属性值说明

值	描述
none	这是属性的默认值。
auto	行的大小占用容器的大小。
max-content	每行的大小取决于行中的最大项目（item）（item）。
min-content	每行的大小取决于行中最小的项目（item）（item）。
minmax(min.max)	大小范围大于或者等于“min”，小于或者等于“max”。
<length>	行的大小由长度值指定。
<percentage>	行的大小由百分比指定。
<flex>	具有单位“FR”的非负维度，指定轨道的Flex因子。每个％26lt;柔性％26gt; - 化轨道与其Flex因子成比例地分享剩余空间。
fit-content	表示min（max-content，max（auto，参数）），其类似于auto（即minmax（auto，max-content）），但大小大于自动最小值。该值被认为是实验性的。
repeat	表示轨道列表的重复片段，允许大量表现出以更紧凑的形式写入的重复图案。这值被认为是实验性的。
subgrid	表示网格将在指定的轴上采用其父网格的跨界部分。网格行/列的大小取自父网格定义。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

grid-template-rows: none | auto | max-content | min-content | flex | fit-content| repeat | length | initial | inherit;

grid-template-row 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows 属性示例</h2>
    <div class="auto-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>

具有指定行大小的 grid-template-row 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows 属性示例</h2>
    <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>

CSS grid-template-rows 属性

grid-template-rows 属性定义了网格布局中行的数量和大小。
grid-template-row 属性的值用空格分隔。
每个值指定行高。

除了主要值，还有另外两个值是实验技术：“fit-content”和“repeat”。

初始值	none
应用于	网格容器。
继承	无效
可动画的	是的。行的大小是可动的。
版本	CSS网格布局模块级别1
DOM 语法	object.style.gridtemplaterows =“20px 100px”;

日期：2020-06-02 22:14:34 来源：oir作者：oir

←CSS grid-template-columns 属性

CSS grid-template 属性→

CSS grid-template-rows 属性值说明

语法

grid-template-row 属性示例：

具有指定行大小的 grid-template-row 属性示例：

目录