CSS Grid 网格布局：「18」使用 grid-auto-flow 属性控制没有明确指定位置的网格项目的放置方式

路条编程 2020-11-02

1028

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

使用 grid-auto-flow 属性控制没有明确指定位置的网格项目的放置方式。

划分网格以后，容器的项目会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ，变成"先列后行"。grid-auto-flow 属性除了设置成 row 和 column，还可以设成 row dense 和 column dense 。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。语法如下所示：

<style type="text/css">
.container {
  grid-auto-flow: row | column | row dense | column dense;
}
</style>

假设有一个两行五列的网格，并将 grid-auto-flow 属性设置为 row ，即"先行后列"方式排列，html 代码如下所示：

<div class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</div>

样式代码如下所示：

<style type="text/css">
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}
</style>

将项目 item-a 、item-e 设置为以下样式，指定这两个项目的排列位置：

<style type="text/css">
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}
</style>

由于设置 grid-auto-flow 为 row，因此网格将如下所示。注意，我们没有放置其他三个项目item-b、item-c、item-d 在行中的排列方式。

将 grid-auto-flow 调整为 column 排列方式，则 item-b、item-c、item-d 沿列向下排列，效果图如下所示：

样式代码如下所示：

<style type="text/css">
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 60px 60px;
  grid-auto-flow: column;
}
</style>

调整页面框架模块 16 ，为了看出效果，将模块 16 的样式 ant-col-xl-6 调整为 ant-col-xl-8 ，占整个页面框架宽度的三分之一。增加一个 2 行 5 列容器，行高属性 grid-template-rows 为 60px，列宽 grid-template-columns 属性为 60px。容器中包含 10 个项目。其中项目内容为 01、02的为要演示列效果的项目，使用了特殊的绿色及橙色为背景色，项目 3

、 4、5 为蓝色、紫色、黑色。其他项目背景色均为白色。为了显示定义的 2 行 5 列容器，项目使用黑色 1px 实线边框。调整后的样式代码如下所示：

<style type="text/css">
.grid-auto-flow-main {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
.grid-auto-flow-item-01 {
  grid-column: 1;
  grid-row: 1 / 3;
}
.grid-auto-flow-item-02 {
  grid-column: 5;
  grid-row: 1 / 3;
}
</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-8">
     <div class="card">                
        <div class="grid-auto-flow-main">
          <div class="box-no-margin grid-auto-border item1 grid-auto-flow-item-01 border-radius-top-left border-radius-bottom-left ">a</div>
          <div class="box-no-margin grid-auto-border item5 grid-auto-flow-item-02 ">e</div>
          <div class="box-no-margin grid-auto-border item2">b</div>
          <div class="box-no-margin grid-auto-border item3">c</div>
          <div class="box-no-margin grid-auto-border item4">d</div>
          <div class="box-no-margin grid-auto-border "></div>
          <div class="box-no-margin grid-auto-border "></div>
          <div class="box-no-margin grid-auto-border "></div>
          <div class="box-no-margin grid-auto-border border-radius-top-right "></div>
          <div class="box-no-margin grid-auto-border border-radius-bottom-right"></div>
        </div> 
      </div>
</article>

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

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

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

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

数据库

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

CSS Grid 网格布局：「18」使用 grid-auto-flow 属性控制没有明确指定位置的网格项目的放置方式

评论