CSS3 grid layout（网格布局）（六）

最新推荐文章于 2023-06-19 10:36:17 发布

Violet丶Evergarden

最新推荐文章于 2023-06-19 10:36:17 发布

阅读量474

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/Vollerei/article/details/103952384

版权

让我们接着来看网格布局

八、网格线

我们在使用网格布局创建网格轨道的同时也会创建 网格线，在正常的页面下我们是看不到这些网格线的，但当我们打开浏览器的 开发者工具（F12） 时这些网格线便会显现。不过在我之前的几篇关于网格布局博客的例子中，大家应该已经发现了网格线的存在。下面我将介绍网格线的一些特点和功能。

网格线的寻址

网格线可以用它们的编号来寻址。在从左到右的语言（即文字的 写入方向），比如英语中：列线1将位于网格的左侧，行线1将位于其顶部。而在从右到左的语言中，列线1行将位于网格的右侧。下面的代码和图片将展示一个网格的线编号，假设语言是从左到右的。

代码如下：

<style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 100px;
        }
</style>

<body>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>

示例图如下：

在这里插入图片描述
图中被黑色线段截取的就是列线，而被红色线段截取的则是行线。

当创建 隐式轨道 去支持显式网格外的内容时，网格线也会在 隐式网格 中被创建，但是这些网格线 不能通过编号来寻址。

按网格线编号将元素放置到网格上(跨轨道放置网格元素)

创建一个网格后，可以通过网格线编号将元素放置到该网格上，而 grid-column-start，grid-column-end，grid-row-start，grid-row-end 这四个属性可以帮助实现这个功能。在下面的例子中，元素定位从列线1到列线3，从行线1到行线3。

代码如下：

<style>
   .wrapper {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: 100px 100px;
   }
   
   .item {
       grid-column-start: 1;
       grid-column-end: 3;
       grid-row-start: 1;
       grid-row-end: 3;
   }
</style>

<body>
    <div class="wrapper">
        <div class="item">Item</div>
    </div>
</body>

在CSS中：
grid-column-start: 1; 表示元素放置开始位置的列线编号。
grid-column-end: 3; 表示元素放置结束位置的列线编号。
grid-row-start: 1; 表示元素放置开始位置的行线编号。
grid-row-end: 3; 表示元素放置结束位置的行线编号。

效果如图：

在这里插入图片描述
可以看到图中蓝色区域便是我们放置到网格中的元素，由三条行线和三条列线构成。网格线编号也符合我在CSS中的设置。

那么后置入的网格元素又会如何排布呢？

我将在上面例子的代码中添加三个表格元素（注意！此时的网格元素将会溢出，也就是说将会有隐式网格生成）

<body>
    <div class="wrapper">
        <div class="item">Item</div>
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
    </div>
</body>

效果如图：在这里插入图片描述

可以看到 One 和 Two 在右侧的两个表格单元中，而 Three 在左下角（被遮挡住了），那么这些元素的排布规律我们通过简单分析便可知道：默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 ，当然这个顺序也可以通过 grid-auto-flow:column 属性设置为 先列后行 。当通过网格线编号来规定元素的放置位置时，网格容器便会重新规定网格元素的位置，通过网格线编号确定位置的元素将会优先放置，其余元素则会按照上面所提到的规律摆放。

网格线的命名

在显式网格中创建的网格线可以被命名，在 轨道大小 信息之前或之后的方括号中命名。当放置一个元素时，你可以使用这些名称代替编号。现在我将网格线第一个例子使用命名的方式再实现一次，如下所示。

.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}

<body>
    <div class="wrapper">
        <div class="item">Item</div>
    </div>
</body>

写在 grid-template-columns 与 grid-template-rows 属性中方括号里的，便是可以自定义名字的网格线。

效果如图
在这里插入图片描述
图中蓝色区域便是我们放置的元素，可以看到，和第一个例子实现的效果是一样的。

这就是网格线命名的作用。

以上就是本篇博客的全部内容。

更多关于 grid layout（网格布局） ，敬请期待我的后续博文。

Violet丶Evergarden

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 grid layout（网格布局）（六）

让我们接着来看网格布局八、网格线我们在使用网格布局创建网格轨道的同时也会创建网格线，在正常的页面下我们是看不到这些网格线的，但当我们打开浏览器的开发者工具（F12）时这些网格线便会显现。不过在我之前的几篇关于网格布局博客的例子中，大家应该已经发现了网格线的存在。下面我将介绍网格线的一些特点和功能。网格线的寻址网格线可以用它们的编号来寻址。在从左到右的语言（即文字的写入方向），比如英...
复制链接

扫一扫