CSS Grid 网格布局：「05」使用 grid-template-rows 定义网格布局行宽度及网格线的名称

路条编程 2020-10-20

674

欢迎关注路条编程网站，通过学习 CSS Grid 网格布局这一系列文章，你将会逐步掌握网格布局的容器和项目、行和列、单元格、网络线等相关的知识。

使用 grid-template-rows 定义网格布局行宽度及网格线的名称。

grid-template-rows 属性用空格分隔的值列表定义网格的行高。网格行的语法定义如下所示：

<style type="text/css">
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
</style>

其中 track-size 可以是长度值、百分比或 fr 单位（网格剩余空间比例单位）

line-name 用来和的名称，可以任意命名

根据目前学习的属性值，定义一个网格布局，容器定义如下所示：

<style type="text/css">
  .container {
    grid-template-rows: 25% 100px auto;
    grid-template-columns: 40px 50px auto 50px 40px;
  }
</style>

以上代码定义了 3 行 5 列的网格容器， grid-template-rows 属性含 3 个值，定义了 3 行。从上往下每行的高度分别是 25%、100px、auto（自动）。

grid-template-columns 属性包含 5 个值，定义了 5 列，从左往右每列的尺寸分别是 40px 、50px 、auto（自动）、50px 、40px 。

以上定义中未给网格线命名，行列之间仅仅有空格时，网格线会被自动分配数字名称，容器示意图如下所示：

可以给网格线指定确切的命名。确切命名的容器定义如下所示：

<style type="text/css">
  .container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  }
</style>

容器示意图如下所示：

需要注意的是，一个网格线可以有不止一个名字。例如，这里第 2 条网格线有两个名字：row1-end 和 row2-start：

<style type="text/css">
.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
</style>

调整页面框架模块 3 内容，增加一个 3 行 3 列网格容器，容器中增加 9 个项目。3 行从上往下每行的高度分别是 40px 、50px、auto(自动)，3 列从左往右每列的尺寸分别是 25%、100px、auto(自动)。页面样式中增加两个项目的背景颜色定义，页面样式代码调整如下所示：

<style type="text/css">
      .rows3-col3 {
          grid-gap: 8px 3px;
          grid-template-columns: [first] 40px [line2] 50px [line3] auto ;
          grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto ;
      }


      .item9 { background:#2ecc71;}
      .item10 { background:#16a085;}
</style>

html 代码调整如下所示：

<article class="article  ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6">
   <div class="card">
      <div class="container rows3-col3 ">
          <div class="box item1">1</div>
          <div class="box item2">2</div>
          <div class="box item3">3</div>
          <div class="box item4">4</div>
          <div class="box item5">5</div>
          <div class="box item6">6</div>
          <div class="box item7">7</div>
          <div class="box item8">8</div>
          <div class="box item9">9</div>
      </div>
  </div>
</article>

保存页面代码，预览页面，整体效果图如下所示：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

CSS Grid 网格布局：「05」使用 grid-template-rows 定义网格布局行宽度及网格线的名称

评论