←CSS grid-auto-flow 属性
CSS grid-column-end 属性→

语法

grid-auto-rows: auto | max-content | min-content | <length> | <percentage> | <flex> | initial | inherit;

grid-auto-rows 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1/1/2/2;
      }
      .box2 {
        grid-area: 1/2/2/3;
      }
      .box3 {
        grid-area: 1/3/2/4;
      }
      .box4 {
        grid-area: 2/1/3/2;
      }
      .box5 {
        grid-area: 2/2/3/3;
      }
      .box6 {
        grid-area: 2/3/3/4;
      }
      .auto-box1 {
        grid-area: 1/1/2/2;
      }
      .auto-box2 {
        grid-area: 1/2/2/3;
      }
      .auto-box3 {
        grid-area: 1/3/2/4;
      }
      .auto-box4 {
        grid-area: 2/1/3/2;
      }
      .auto-box5 {
        grid-area: 2/2/3/3;
      }
      .auto-box6 {
        grid-area: 2/3/3/4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows 属性示例</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
  </body>
</html>

具有多个值的 grid-auto-rows 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1/1/2/2;
      }
      .box2 {
        grid-area: 1/2/2/3;
      }
      .box3 {
        grid-area: 1/3/2/4;
      }
      .box4 {
        grid-area: 2/1/3/2;
      }
      .box5 {
        grid-area: 2/2/3/3;
      }
      .box6 {
        grid-area: 2/3/3/4;
      }
      .grey-box1 {
        grid-area: 1/1/2/2;
      }
      .grey-box2 {
        grid-area: 1/2/2/3;
      }
      .grey-box3 {
        grid-area: 1/3/2/4;
      }
      .grey-box4 {
        grid-area: 2/1/3/2;
      }
      .grey-box5 {
        grid-area: 2/2/3/3;
      }
      .grey-box6 {
        grid-area: 2/3/3/4;
      }
      .auto-box1 {
        grid-area: 1/1/2/2;
      }
      .auto-box2 {
        grid-area: 1/2/2/3;
      }
      .auto-box3 {
        grid-area: 1/3/2/4;
      }
      .auto-box4 {
        grid-area: 2/1/3/2;
      }
      .auto-box5 {
        grid-area: 2/2/3/3;
      }
      .auto-box6 {
        grid-area: 2/3/3/4;
      }
      .min-box1 {
        grid-area: 1/1/2/2;
      }
      .min-box2 {
        grid-area: 1/2/2/3;
      }
      .min-box3 {
        grid-area: 1/3/2/4;
      }
      .min-box4 {
        grid-area: 2/1/3/2;
      }
      .min-box5 {
        grid-area: 2/2/3/3;
      }
      .min-box6 {
        grid-area: 2/3/3/4;
      }
      .max-box1 {
        grid-area: 1/1/2/2;
      }
      .max-box2 {
        grid-area: 1/2/2/3;
      }
      .max-box3 {
        grid-area: 1/3/2/4;
      }
      .max-box4 {
        grid-area: 2/1/3/2;
      }
      .max-box5 {
        grid-area: 2/2/3/3;
      }
      .max-box6 {
        grid-area: 2/3/3/4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 150px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-rows: 30%;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .min-container {
        display: grid;
        grid-auto-rows: min-content;
        grid-gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .min-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .max-container {
        display: grid;
        grid-auto-rows: max-content;
        grid-gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .max-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows 属性示例</h2>
    <p>使用 grid-auto-rows 属性为所有行设置默认大小（高度）。</p>
    <h3>150 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>30%</h3>
    <div class="grey-container">
      <div class="grey-box1">1</div>
      <div class="grey-box2">2</div>
      <div class="grey-box3">3</div>
      <div class="grey-box4">4</div>
      <div class="grey-box5">5</div>
      <div class="grey-box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
    <h3>min-content</h3>
    <div class="min-container">
      <div class="min-box1">1</div>
      <div class="min-box2">2</div>
      <div class="min-box3">3</div>
      <div class="min-box4">4</div>
      <div class="min-box5">5</div>
      <div class="min-box6">6</div>
    </div>
    <h3>max-content</h3>
    <div class="max-container">
      <div class="max-box1">1</div>
      <div class="max-box2">2</div>
      <div class="max-box3">3</div>
      <div class="max-box4">4</div>
      <div class="max-box5">5</div>
      <div class="max-box6">6</div>
    </div>
  </body>
</html>

具有“minmax”值的 grid-auto-rows 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1/1/2/2;
      }
      .box2 {
        grid-area: 1/2/2/3;
      }
      .box3 {
        grid-area: 1/3/2/4;
      }
      .box4 {
        grid-area: 2/1/3/2;
      }
      .box5 {
        grid-area: 2/2/3/3;
      }
      .box6 {
        grid-area: 2/3/3/4;
      }
      .minmax1 {
        grid-area: 1/1/2/2;
      }
      .minmax2 {
        grid-area: 1/2/2/3;
      }
      .minmax3 {
        grid-area: 1/3/2/4;
      }
      .minmax4 {
        grid-area: 2/1/3/2;
      }
      .minmax5 {
        grid-area: 2/2/3/3;
      }
      .minmax6 {
        grid-area: 2/3/3/4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .minmax-container {
        display: grid;
        grid-auto-rows: minmax(90px, 4cm);
        grid-gap: 10px;
        background-color: #cccccc;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #f5f5f5;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows 属性示例</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>minmax</h3>
    <div class="minmax-container">
      <div class="minmax1">1</div>
      <div class="minmax2">2</div>
      <div class="minmax3">3</div>
      <div class="aminmax4">4</div>
      <div class="minmax5">5</div>
      <div class="minmax6">6</div>
    </div>
  </body>
</html>

其中 grid-auto-rows 用于为所有行设置默认大小（高度）。

CSS grid-auto-rows 属性值说明

值描述
auto行的大小占用容器的大小。这是属性的默认值。
max-content每行的大小取决于行中的最大项目（item）（item）。
min-content每行的大小取决于行中最小的项目（item）（item）。
minmax(min.max)大小范围大于或者等于“min”，小于或者等于“max”。
<length>行的大小由长度值指定。
<percentage>行的大小由百分比指定。
<flex>具有单位“FR”的非负维度，指定轨道的Flex因子。每个％26lt;柔性％26gt; - 化轨道与其Flex因子成比例地分享剩余空间。
initial使属性使用其默认值。
inherit从父母元素继承属性。
CSS grid-auto-rows 属性

grid-auto-rows 属性指定网格容器中行的大小。

它只对没有指定大小的行有效。

此属性具有以下值：auto、max-content、min-content、minmax、长度和百分比。

初始值auto
应用于网格容器。
继承无效
可动画的是的。行的大小是可动的。
版本CSS网格布局模块级别1
DOM 语法object.style.gridautorows =“40px”;
日期：2020-06-02 22:14:33 来源：oir作者：oir
←CSS grid-auto-flow 属性
CSS grid-column-end 属性→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策