CSS grid布局｜怎么样基于线来摆放元素？

CSS网格布局是一组相交的水平线和垂直线，它定义了网格的行和列（可以理解为表格）。我们可以将网格元素放置在与这些列和行相关的位置上，是二维的布局系统，可以用在布局页面主要区域或小型用户界面元素；

特点:

固定的位置和弹性的轨道的大小
可以根据行号、行名或者标定一个网格区域来摆放网格项
创建额外的轨道来包含内容
控制项目对齐
控制重叠内容

这篇内容主要探讨其中一个特点：可以根据行号、行名或者标定一个网格区域来摆放网格项；

网格轨道 （grid track）是网格上任意两条相邻线之间的空间。下图显示了一个突出显示的轨道------这是网格中第一行的轨道。

当我们定义网格时，我们先定义的是网格轨道，而不是网格线；网格布局会为我们创建编号的网格线来让我们来摆放每一个网格元素。

CSS 复制代码

* {
            box-sizing: border-box;
        }

        .wrapper {
            border: 2px solid #f76707;
            border-radius: 5px;
            background-color: #fff4e6;
        }

        .wrapper>div {
            border: 2px solid #ffa94d;
            border-radius: 5px;
            background-color: #ffd8a8;
            padding: 1em;
            color: #d9480f;
        }

        .wrapper {
            display: grid;

            /* 3列轨道  列宽自动计算*/
            grid-template-columns: repeat(3, 1fr);

            /* 3行轨道  行高100px*/
            grid-template-rows: repeat(3, 100px);
        }

html 复制代码

 <div class="wrapper">
        <div class="box1">One</div>
        <div class="box2">Two</div>
        <div class="box3">Three</div>
        <div class="box4">Four</div>
    </div>

如下图三列三行的网格，行从上往下：线号1、2、3、4，从下往上：-1、-2、-3、-4；列从左往右：1、2、3、4，从右往左:-1、-2、-3、-4 理解了网格的线，那么怎么基于线来控制元素在网格的位置？

线编号来布局元素

例如控制One元素，想要最左开始占一个列轨道，占3条行轨道

CSS 复制代码

.box1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
}

One元素，最左开始，占第一列轨道grid-column-start: 1;grid-column-end: 2;，grid-row-start从第1行线号开始，延伸至第4行号结束grid-row-end;Four元素就会自动在行轨道下一个空的单元格，对其他3个元素同样进行控制摆放：

CSS 复制代码

.box1 {
  <*列1号线开始,2号线结束，行1号线开始，4号线结束*>
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  <*列3号线开始,4号线结束，行1号线开始，3号线结束*>
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  <*列2号线开始,3号线结束，行1号线开始，2号线结束*>
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  <*列2号线开始,4号线结束，行3号线开始，4号线结束*>
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

4个元素都各自有设置线编号来实现位置摆放，网格布局的一个优势是：无需给元素周围加上 margin 来阻止文档流自动填补空白，就能实现设计中的留白区域；
grid-column-start,grid-column-end,grid-row-start,grid-row-end CSS代码太多了，还可以简写为 grid-column 和 grid-row，

CSS 复制代码

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

如果元素只延伸一个轨道的话，可以省略grid-xx-end,只写grid-xx-start，元素默认延伸一个轨道

CSS 复制代码

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

属性名和值的简写如下:

CSS 复制代码

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

元素摆放效果是一样的：有没有再进一步简写，来实现相同的元素摆放呢？还可以只定义一个属性grid-area；

`grid-area` 属性

使用这个属性前，先看看写法：

CSS 复制代码

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}

怎么理解这个One元素grid-area值呢？顺序看起来有点奇怪，联想对比padding值，元素的上、有、下、左，先看看grid-area值的顺序分别代表啥意思

grid-area: 行起始(inline-start)/ 块起始(block-start)/ 行结束(inline-end)/ 块结束(block-end)

One元素列1号线开始,2号线结束，行1号线开始，4号线结束。值的顺序和padding值不一样，因为与CSS书写模式规范中的书写方向有关系。书写流关联的4个方向：

块起始（block-start）
块结束（block-end）
行起始（inline-start）
行结束（inline-end）网页的英文书写是从左至右，从上至下，当使用grid-area属性定义网格时，结合书写流方向理解，值的顺序就清晰了；

grid-area: grid-row-start / grid-column-start / grid-row-end/ grid-column-end

同样可以简写：

CSS 复制代码

.box1 {
  grid-area: 1 / 1 / 4;
}

反方向记数

也可以从行和块结束线开始反方向计数

CSS 复制代码

.box1 {
  grid-area: -1 / -1 / -4;
}

使元素跨越整个元素.如果一个元素是占据一行的，拥有从开始计数和从末尾计数这两种定位方法使得使一个元素跨越整个网格变得很方便，例如Four元素

CSS 复制代码

.box4 {
 grid-column: 1 / -1;
}

间距

间距只出现在网格轨道与轨道之间，它们并不会出现在网格容器的四周。给网格容器添加行间距row-gap

CSS 复制代码

.wrapper {
  ...
  row-gap: 1em;
}

CSS 复制代码

.wrapper {
  ...
  row-gap: 1em;
  column-gap: 1px;
}

行间距row-gap，列间距column-gap: 简写：

CSS 复制代码

.wrapper {
  ...
  gap: 1em / 1px;
}

从基于线定位的角度来说，间距的行为就像是使基线变得特别宽。

关键字 `span`

除了"起始线与结束线"的定位方法，你还可以使用"起始线与跨越轨道数量"的定位方法,

CSS 复制代码

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

One元素grid-row: 1 / span 3;理解为从第1号行线开始，跨越3条行轨道 ，截止在第4号行线；
Two元素grid-row: 1 / span 2;理解为从第1号行线开始，跨2条行轨道 ，截止在第3号行线；
Four元素grid-column: 2 / span 2;理解为从第1号列线开始，跨2条列轨道 ，截止在第4号列线；

从确定的线编号开始，跨越指定数量的行轨道；

CSS 复制代码

例1
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3;
}

CSS 复制代码

例2
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}

例1、例2 两个都是会创建相同的网格，One元素在1列轨道，占3条行轨道；

例1:元素就会从 1 号线开始，跨越 3 条线，到 4 号线结束

例2:元素会从指定的线往上跨越 3 条线;

CSS 复制代码

例3
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: span 3;
}

例3:与例2 相同的行为;

当开始和结束都使用了关键字时，只有grid-row-start起效；

CSS 复制代码

例4
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: span 2;
}

例4

CSS 复制代码

例5
.box1 {
  grid-column-start: 1;
  grid-row-start: span 2;
  grid-row-end: span 3;
}

CSS 复制代码

例6
.box1 {
  grid-column-start: 1;
  grid-row-start: span 1;
  grid-row-end: span 3;
}

例6

总结

认识网格基于线来摆放元素的使用，属性grid-column、grid-row的写法，以及元素根据行号，多种方式实现跨行跨列的布局；

CSS grid布局｜怎么样基于线来摆放元素？

线编号来布局元素

grid-area 属性

反方向记数

间距

关键字 span

总结

`grid-area` 属性

关键字 `span`