初涉grid布局

╰半橙微兮° 2022-10-01 05:53 178阅读 0赞

一直觉得grid 是个离我很遥远的技术，以为兼容性差，直到最近查看了 [caniuse][]

发现其实兼容性已经很好了，本篇文章基于[Wes Bos的grid课程][Wes Bos_grid]，以及相关技术文章整理而成。 相关属性的取值可能有多个，需要自行查阅文档?

### 开发浏览器选择 ###

推荐使用火狐浏览器开发者版本 [Firefox Developer Edition][] ，对css grid调试很有帮助，相关好处下文有提到。

### 术语 ###

#### 容器 (grid container) ####

就是运用`display: grid`的元素，对其内部的直接子元素进行布局。

#### 项目 (grid item) ####

容器的直接子元素，下面代码中的`.item` ,不包括 `.sub-item`

<div class="container">
      <div class="item"></div> 
      <div class="item">
      	<p class="sub-item"></p>
      </div>
      <div class="item"></div>
    </div>
    复制代码

#### 分割线 (grid line) ####

分割grid内行和列的线。 打开火狐开发者版的开发者工具更直观点。将需要调试的grid 容器勾上，右边勾选上显示分割线数字。

如下图所示可以看到分割线的序号了。

.container{
                display:grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
    复制代码

ps: 如果对 `fr` 有疑问的可以在下文中找到答案，这里只是为了展示火狐的开发者工具。

#### 单元格 (grid cell) ####

上图所示有一行四列。被分割出来4个单元格。

--------------------

正文部分开始，没有申明html 结构的代码部分都是采用以下

<div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
            <div class="item item4">4</div>
        </div>
        <style> .item{ border: 5px solid rgba(0, 0, 0, 0.03); border-radius: 3px; font-size: 35px; background-color: #ffc600; } </style>
    复制代码

### 1、grid 基础 ###

.container{
            display:grid;
            grid-template-columns: 50px 100px;
            grid-template-rows: 50px 80px;
            grid-gap: 20px;
        }
    复制代码

知识点：

1.  `grid-template-columns` 定义列。 `grid-template-rows` 定义行。 `grid-gap` 定义列行之间的间隔。
2.  分割线纵向有3条，横向同样有3条。每条分割线的数字标示可以有正数和负数，-1 表示最后一条线。
3.  4个项目放入grid中的时候会被拉伸放大。当前样式中没有设置.item 的大小，会被自动拉伸。如果设置了大小

.item {
      width: 100px;
      height: 100px;
    }
    复制代码

则如下图所示没有超出容器的范围

1.  grid边界在调试工具下是实现。划分行列的线是虚线；gap中填充的是斜线。
2.  `grid-template-columns: 50px 100px;` 和 `grid-template-rows: 50px 80px;` 可以被简写成 `grid-template: 50px 80px/50px 100px;`

### 2、明确和非明确的grid ( explicit implicit grid ) ###

.container{
            display:grid;
            grid-template-columns: 50px 100px;
            grid-gap: 20px;
        }
    复制代码

1.  我们用`grid-template-columns`创建了两列，但是并没有指定行, grid 默认情况下会帮我们创建新的分割线和行。
2.  明确的grid (explicit grid) e.g. `grid-template-columns`，`grid-template-rows` 创建的在开发者工具上是虚线，而非明确创建的看图上1、3，2、4之间的是点线。
3.  自动创建的行的高度是item本身的高度。如果同一行的两个item高度不一致则会采用高度高的item作为当前行的高度。

.item3{
            height: 100px;
        }
    复制代码

4. `grid-auto-rows` 可以定义自动添加的row分配的高度

.container{
            display:grid;
            grid-template-columns: 50px 100px;
            grid-auto-rows: 100px;
            grid-gap: 20px;
        }	
    复制代码

火狐中目前只能是单个值；谷歌可以是两个值。

（火狐）（谷歌）

### 3、grid-auto-flow ###

默认情况下grid会在当前行放不下新的item时会创建新的行，通过`grid-auto-flow: column`可以更改这个默认行为。

.container{
        display:grid;
        grid-template-columns: 50px 100px;
        grid-gap: 20px;
        grid-auto-flow: column;
    }
    复制代码

1.  grid会创建非明确的列，注意看虚线。
2.  创出明确grid的item的宽度在不指定宽度的情况下会均分剩下的空间类似我们即将要介绍的`fr`单位。自动创建的行的高度是item自身的高，有点像一个div的默认宽度就是容器的宽度，高度是div内容的高度。
3.  可以通过`grid-auto-columns`指定非明确创立的列。

### 4、设置行、列的大小 ###

除了上面设置`grid-template-columns: 50px 100px` 这种固定大小还有其他单位可以用。`auto`, `fr`, `%`; 甚至还可以应用函数`repeat()`, `minmax()`

#### 百分数 ####

`grid-template-columns: 200px 50%`

如图所示，分成两列第二列的宽度是container宽的50%。如果屏幕宽度再小的话就会出现如下图所示grid超出了container的范围，再小的话就会出现滚动条了。

#### fr ####

fr是fractional. 可以考虑成free space. 他会将剩下空间进行划分，并且兼顾到grid-gap.有点像flexbox的`flex`会自动填满剩余空间一样。

.container{
        display:grid;
        grid-template-columns: 100px 1fr;
        grid-gap: 20px;
    }
    复制代码

#### auto ####

个人总结如下：

1.  如果没有fr之类的单位，比如 px auto的组合，auto在这里会扮演类似fr的角色，会自动填充；如果全是auto则类似。

.container{
        display:grid;
        grid-template-columns: 50px auto auto;
        grid-gap: 20px;
    }
    复制代码

2. 如果有fr，则auto就是当列最宽的宽度作为列宽。fr负责填充

.container{
        display:grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20px;
    }
    .item2{
        width: 50px;
    }
    .item4{
        width: 200px;
    }
    复制代码

3. 如果item有 min-width的时候，auto列是不会比这个min-width要小的。

#### repeat () ####

`grid-template-columns: 1fr 1fr 1fr` 可以写成 `grid-tempalte-columns: repeat(3,1fr)` repeat函数的第二个参数也可以为多个单位。比如 `repeat(2,1fr 100px)`

#### minmax() ####

表示一个取值范围；

.container{
        display:grid;
        grid-template-columns : minmax(100px, 1fr)  1fr 1fr;
        grid-gap: 20px;
    }
    复制代码

如果最大值比最小值小的情况下直接返回最小值, 在当前容器是1fr 1fr 1fr且单个fr的值大于100px的时候才会运用fr，其他情况都是100px

[初涉grid布局?（二）][grid]

转载于:https://juejin.im/post/5cc076d3e51d456e4b3c6ebf

[caniuse]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dgrid
[Wes Bos_grid]: https://link.juejin.im?target=https%3A%2F%2Fcssgrid.io%2F
[Firefox Developer Edition]: https://link.juejin.im?target=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2Ffirefox%2Fdeveloper%2F
[grid]: https://juejin.im/post/5cc27514f265da038557fefb