CSS grid-row-gap 属性-之路教程

语法

grid-row-gap: normal | length;

grid-row-gap 属性示例：

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

此处，行间距指定为 0。
在下一个示例中，行间距为 40px。

以像素为单位指定的 grid-row-gap 属性示例：

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

以百分比指定的 grid-row-gap 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 15%;
        grid-column-gap: 3%;
        background-color: grey;
        padding: 40px;
      }
      .grid-container > div {
        background-color: white;
        text-align: center;
        padding: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

CSS grid-row-gap 属性

grid-row-gap 属性设置网格元素行之间的间隙大小。
可以指定间隙宽度，使用 grid-row-gap 的值分隔行。

它可以在“px”和百分比中指定。

row-gap 属性现在正在替换前缀 grid-row-gap 属性。
但是对于应用了前缀属性而不是 row-gap 的浏览器，仍然需要 grid-row-gap。

初始值	0
应用于	多列元素，Flex容器，网格容器。
继承	无效
可动画的	是的。行之间的间隙是有动画的。
版本	CSS网格布局模块级别1
DOM 语法	object.Style.GridRowGap =“30px”;

CSS grid-row-gap 属性值说明

值	描述
normal	使用浏览器在行之间的默认间隔。这是此属性的默认值。
length	行之间的间隙在PX或者百分比中指定。不允许使用负值。默认值为0。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

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

←CSS grid-row-end 属性

CSS grid-row-start 属性→

语法

grid-row-gap 属性示例：

以像素为单位指定的 grid-row-gap 属性示例：

以百分比指定的 grid-row-gap 属性示例：

CSS grid-row-gap 属性值说明

目录