CSS Grid 网格布局：「04」使用 grid-column-gap 属性设置多个项目列间距

路条编程 2020-10-19

2383

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

使用 grid-column-gap 创建多列之间的间距。

使用 grid-column-gap 属性设置多个项目列间距,示意图片如下所示：

到目前为止，在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间隙，我们可以使用 grid-column-gap 属性, 代码示例如下所示：

<style type="text/css">
grid-column-gap: 10px;
</style>
复制

这会在我们创建的所有列之间添加 10px 的空白间隙。

使用 grid-row-gap 属性设置多个项目行间距,示意图片如下所示：

和上面在两列之间添加间隙一样，你可以用 grid-row-gap 在两行之间添加间隙。

使用 grid-gap 属性设置多个项目行列间距,示意图片如下所示：

grid-gap 是 grid-row-gap 和 grid-column-gap 的简写，它更方便使用。如果 grid-gap 有一个值，行与行之间和列与列之间将添加等于该值的间隙。但是，如果有两个值，第一个值将作为行间隙的高度值，第二个值是列间隙的宽度值。

调整页面框架模块 2 的内容，为容器增加 5 个项目，每个项目使用不同的背景色，为容器增加五列。将容器宽度平均分成五份。增加样式类 .col5-2, 每列间距 10px ,最终页面样式代码如下所示：

<style type="text/css">
.col5-2{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
}
</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 col5">
          <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>
  </div>
</article>
复制

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

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

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

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

数据库

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

CSS Grid 网格布局：「04」使用 grid-column-gap 属性设置多个项目列间距

评论

相关阅读