CSS Grid 网格布局：「10」使用 row-gap、column-gap 属性设置网格行列间距

路条编程 2020-10-25

1523

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

使用 row-gap、column-gap 属性设置网格行列间距。

前面文章中我们介绍了设置网格行列间距的 grid-row-gap、grid-column-gap 属性。新的 CSS 标准推荐使用 row-gap 和 column-gap 属性。

通过这两个属性指定网格线的大小，可以将其视为设置行、列之间的间距。具体语法示例如下所示：

<style type="text/css">
  .container {
    /* 推荐用法 */
    column-gap: <line-size>;
    row-gap: <line-size>;
  }
</style>

其中 <line-size> 表示长度值。默认为 normal。normal 表示其值由所设置的 font-size 来确定，就相当于 1em；长度值表示间距的宽度，不允许负值。间距仅在行、列之间创建，不在外边缘上创建。示意图如下所示：

调整页面框架模块 8 ，增加一个 3 行 3 列容器，容器中包含 9 个项目。容器主样式类为 .grid-gap-main ，定义 3 列宽度分别为 100px、50px、100px，定义 3 行高度分别为 80px、auto、80px 。列间距为 10px，行间距为 15px。调整后的样式代码如下所示：

<style type="text/css">
.grid-gap-main {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}
</style>

调整的 html 代码如下所示：

<div class="container grid-gap-main ">
    <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>

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

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

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

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

数据库

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

CSS Grid 网格布局：「10」使用 row-gap、column-gap 属性设置网格行列间距

评论