CSS grid-row 属性-之路教程

CSS grid-row 属性值说明

值	描述
grid-row-start	指定项目（item）（item）的起始位置。
grid-row-end	指定项目（item）（item）的结束位置和要跨度的行数。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

grid-row: grid-row-start/grid-row-end;

grid-row 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: 2/3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row 属性示例</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

指定为跨度 2 的 grid-row 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row 属性示例</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

CSS grid-row 属性

grid-row 属性用于指定项目（item）（item）在哪一行开始，哪一行结束。
它是以下属性的简写：

grid-row-start
grid-row-end

初始值	auto auto
应用于	网格项目（item）（item）。
继承	无效
可动画的	是的。物品是有动画的。
版本	CSS网格布局模块级别1
DOM 语法	object.style.gridrow =“1/span 2”;

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

←CSS grid-row-start 属性

CSS grid-template-areas 属性→

CSS grid-row 属性值说明

语法

grid-row 属性示例：

指定为跨度 2 的 grid-row 属性示例：

目录