[Day27] grid-row-start / grid-row-end + grid-column-start / grid-column-end

如果想要控制网格项目的放置位置，就要知道怎麽定义项目放置的"行"与"列"分别是在哪里。

grid-row-start / grid-row-end

.container {
    grid-row-start: <grid-line>
    grid-row-end: <grid-line>
    grid-column-start: <grid-line>
    grid-column-end: <grid-line>
}
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
预设：auto

看起来好像很复杂，实际用起来其实很容易，直接看例子与图片：

范例

<style>
    .container{
      display: grid;
      width: 360px;
      height: 180px;
      grid-template-columns: repeat(auto-fill, 60px) ;
      grid-template-rows: repeat(auto-fill, 60px);
      background-color: #a5def5;
    }
    .item1{
      border: 5px solid green;
      grid-row-start:2;
      grid-row-end: 4;
      grid-column-start: 2;
      grid-column-end: 4;
    }
    .item2{
      border: 5px solid red;
      grid-row-start:1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 5;
    }
    .item3{
      border: 5px solid blue;
      grid-row-start:2;
      grid-row-end: 3;
      grid-column-start:3;
      grid-column-end: 8;
    }
    </style>
</head>
<body>
  <div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
  </div>
</body>

https://ithelp.ithome.com.tw/upload/images/20201012/20128346O8IrZKG37f.png

预设 auto 在这里通常是延伸为一个网格单元格。

- 数字的范围算法

这些属性的意思，其实就是我想把它的起始线跟终点线放在哪里，而计算方式，是以第一个最左 / 上网格单元格的线开始计 1。

如范例中红色 item2 要放在第 1 列 ~ 第 4 列的位置，起始线（grid-column-start）就是 1，终点线（grid-column-end）就是 5；行（row）的概念也是一样的。

grid-column-start:1; grid-column-end:5;

- 网格线的名称也行

如果网格线段有名称，也可以用线段的名称来定义；然而当网格线名称很多一样时，可以加上编号，如 col-A 4 为第 4 条 col-A 线段。

grid-column-start:col-A; grid-column-end:col-A 4;
（范围会从 col-A 线段～第 4 条 col-A 线段）

另外如果搭配 span 使用时，会变成从有定义的线段开始查找，值到线段的名称才停止，然而当线段名称不只一个时，可以加上数字来表达要找到第几个同样名称的线段为定义线段。

grid-column-start:col-A; grid-column-end:span 4 col-A;
（范围会从 col-A 线段～从起始线段开始计算到遇到第 4 条 col-A 线段）

如果你还记得 grid-template-area 有自动命名的功能，也可以使用 -start 和 -end 的线段名称来定义线段。

- 负值也可以

正值会从网格环境的开头开始算起，而负值会从网格环境最尾巴的线开始算起。范例中红色 item2 要放在第 1 列 ~ 第 4 列的位置，总列长度是 6 格、7 条线，所以又可以衍生出非常多不同的写法：

1.grid-column-start:1; grid-column-end:5;
2.grid-column-start:1; grid-column-end:-3;
3.grid-column-start:-7; grid-column-end:5;
4.grid-column-start:-7; grid-column-end:-3;

- span 之我要多长

span 本身就有长度的意思，在这里 span 後面放数字就是"我要延伸多少格轨道"，有趣的是，定义 span 的属性值，会往有定义线段值的方向计算。范例中红色 item2 要放在第 1 列 ~ 第 4 列的位置，总共占了 4 格，所以还可以这样写：

start 为起始线，所以 start 为第 1 条线，向结束方向 4 格
1.grid-column-start:1; grid-column-end: span 4;

end 为终点线，所以 end 为第 5 条线，向起始方向 4 格
2.grid-column-start: span 4; grid-column-end:5;

- 超出界线的奇怪地方（可以不用记）

如果 start 和 end 都是在最左/上边的线段，则范围会是最左上的网格单元格。

如果 start 和 end 定义的范围是超出左上方的空间，则会新增一格轨道在左 / 上，然後把整个网格环境往外推，然而新增的那个网格区域会被压缩程内容的尺寸，而每增加一个轨道就只会在那格轨道中再平均分割网格区域。

如果 start 和 end 定义的范围都是在最右/下边的线段或向右下超出容器范围，则会向外自己新增一个轨道，网格区域会被压缩为内容尺寸

- 错误处理

  1. start 和 end 顺序相反的
    通常不会这样写，但因为放置的线段一样，得到的范围一样，结果当然也一样

    a. grid-column-start:1; grid-column-end:5;
    b. grid-column-start:5; grid-column-end:1;

  2. 两个都是 span

如果两个线段都是 span ，则 start 或 end 其中一个 span 後面没有数字的会被取代为 auto，并且从最左/上起始线段开始计算，看 start 还是 end 有所有权能决定 span 占几格来决定轨道长度。如果两个 span 都有数字则会以 start 为准。

  1. span 搭配网格线名称，另一个却是 auto

这种方法会直接将网格线名称视为数字 1，结果就是占据最左/上的网格单元格。

资料来源：


<<:  第27天-CSS-影像(3-1)

>>:  第三十课：毕业成果报告

铁人赛Day30-第九章：动画5.2－天气与湾熊，今天一次完成它！

不知不觉来到了最後一天，虽然每天要挤出时间做动画不容易，但做的时候以及解决一个难题的时候都会很开心地...

[Day12]ISO 27001 标准：验证范围

其实 ISO 系统都是通用的，从 ISO 9001、 ISO 14001、 ISO 50001、IS...

Day30 - 使用 Rails Generator 快速实作卡米狗学说话

LINE Developers：https://developers.line.biz/zh-ha...

015-登入

今天来简单聊个登入页面。 其实一个简单的登入页面，能思考的事情就很多了。 首先，先聊聊登入最基本的两...

[DAY-30] 最後一幕只是故事的结尾，你也知道故事没有结尾是行不通的。

And So It Is. 其实想说一些三八的话，BUT 没有 FU XDDD 好啦三十天 ya!...