CSS Grid 网格布局：「06」使用 repeat 函数减少行列模板重复设置

路条编程 2020-10-21

1595

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

使用 repeat 函数减少行列模板重复设置。

当使用 grid-template-columns 和 grid-template-rows 属性定义网格结构时，需要为添加的每一行和每一列都输入一个值。如果要添加带 100 行高度相同的网格，单独放入 100 个值设置起来太麻烦了。幸运的是，CSS 提供了一种更好的方法 —— 使用 repeat 函数指定行或列的重复次数，后面加上逗号以及需要重复的值。repeat 函数语法示例如下所示：

<style type="text/css">
  .container {
    grid-template-columns: repeat(100, 30px [col-start]);
  }
</style>

以上代码为网格容器添加 100 列宽度为 30px 的例子。

<style type="text/css">
  .container {
    grid-template-rows: repeat(100, 50px);
  }
</style>

以上代码为网格添加 100 行高度为 50px 的例子。

你还可以用 repeat 函数重复多个值，并在定义网格结构时与其他值一起使用。示例如下所示：

<style type="text/css">
  .container {
      grid-template-columns: repeat(2, 1fr 50px) 20px;
  }
</style>

效果相当于：

<style type="text/css">
  .container {
    grid-template-columns: 1fr 50px 1fr 50px 20px;
  }
</style>

注意：1fr 50px 重复了两次，后面跟着一个 20px 。

调整页面框架模块 4 内容，网格容器增加 10 个项目，每个项目使用不同的背景色区分，项目分别使用 1-10 表示。设置容器第 1、第 5 列宽度分别为 30px、50px, 使用 repeat 函数设置中间 3 列，使用 fr 平分容器剩余空间。调整样式代码如下所示：

<style type="text/css">
    .col3-repeat {
      grid-template-columns: 30px repeat(3, 1fr) 50px;
    }
</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 col3-repeat ">
          <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 class="box item10">10</div>
      </div>
  </div>
</article>

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

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

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

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

数据库

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

CSS Grid 网格布局：「06」使用 repeat 函数减少行列模板重复设置

评论