CSS（四）详解Grid布局

待我称王封你为后i 2021-10-29 12:34 570阅读 0赞

这是一个系列的文章，你也可以查看其他文章：

0、[CSS-预热篇][CSS-]

1、[CSS（一）详解position][CSS_position]

2、[CSS（二）transform][CSS_transform]

3、[CSS（三）flex布局（flex弹性布局详解）][CSS_flex_flex]

4、[CSS（四）详解Grid布局][CSS_Grid]

5、[CSS（五）CSS动画-transition简介][CSS_CSS_-transition]

6、[CSS（六）CSS动画-animation简介][CSS_CSS_-animation]

7、[CSS（七）两栏布局详解][CSS]

> Grid布局又叫做网格布局。是一种强大二维布局，Flex布局是一维布局。

Grid布局和Flex布局类似，Grid布局也分容器和项目两部分。但和Flex不同的是，在容器内部，分为row和column（而不是Flex布局的轴和交叉轴），row和column交叉的部分叫cell，划分cell的线叫做gridline。

正常情况下，n（n>=1） 行和m(m>=1)列的布局产生n\*m个 单元格（cell），n行（列）有n+1条girdline（网格线），例如3行和3列的布局有9个单元格，有16条网格线。

**IE浏览器目前不支持grid布局，其他浏览器对于grid相关属性的详细兼容情况请查看：**[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Grid\_Layout][https_developer.mozilla.org_en-US_docs_Web_CSS_CSS_Grid_Layout]

容器属性

*  grid-template-row/grid-template-column
 *  grid-template-areas
 *  row-gap/column-gap/gap
 *  grid-auto-flow
 *  justify-items ，align-items ，place-items 
 *  justify-content ，align-content ，place-content 
 *  grid-auto-columns ，grid-auto-rows 
 *  grid-template ，grid

项目属性

*  grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end 
 *  grid-column ，grid-row
 *  grid-area
 *  justify-self ，align-self ，place-self

下面分别介绍：

当然首先先要设置容器属性为grid，如下所示：

div {
        display: grid;
    }

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {
      display: inline-grid;
    }

**那么grid属性有没有什么需要注意的点呢？请看下面的小实验,代码如下:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .container{
                width: 600px;
                height: 500px;
                border: 1px solid darkgray;
                background: lightgreen;
                padding: 10px;
            }
            .item{
                height:100px;
                width: 100px;
            }
            .item-inner{
                background: darkred;
                height: 20px;
                width: 30px;
            }
            .item:nth-child(1){
                /* display: grid; */
                background: darkblue;
            }
            .item-float{
                float: right;
            }
            .item:nth-child(2){
                /* display: grid; */
                background: darkmagenta;
            }
            .item-inline-block{
                display: inline-block;
            }
            .item:nth-child(3){
                /* display: grid; */
                background: darkgoldenrod;
                vertical-align:middle;
            }
            .item-table-cell{
                display: table-cell;
            }
            
            .item:nth-child(4){
                /* display: grid; */
                background: lightcoral;
            }
            .item-vertical-align{
                vertical-align:middle;
            }
            .item:nth-child(5){
                /* display: grid; */
                background: yellow;
                column-count: 3;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">
                <div class="item-inner">1-1</div>
                <div class="item-inner item-float">1-2</div>
                <div class="item-inner">1-3</div>
            </div>
            <div class="item">
                <div class="item-inner">2-1</div>
                <div class="item-inner item-inline-block">2-2</div>
                <div class="item-inner">2-3</div>
            </div>
            <div class="item">
                <div class="item-inner">3-1</div>
                <div class="item-inner item-inline-table-cell">3-2</div>
                <div class="item-inner">3-3</div>
            </div>
            <div class="item">
                <div class="item-inner">4-1</div>
                <div class="item-inner item-vertical-align">4-2</div>
                <div class="item-inner">4-3</div>
            </div>
            <div class="item">
                <div class="item-inner">5-1</div>
                <div class="item-inner">5-2</div>
                <div class="item-inner">5-3</div>
            </div>
        </div>
    </body>
    </html>

注释每个小容器的display:grid;时，即正常显示结果如下：

![20190815231736645.png][]

取消注释结果：

![20190815232013967.png][]

**对比可以看出：设为网格布局以后，容器子元素（项目）的`float`、`display: inline-block`、`display: table-cell`、`vertical-align`和`column-*`等设置都将失效。**

注意，以下所有属性值除了自定义属性值外，还有四个属性值：none、inherit、initial和unset。

*  none：不设置
 *  inherit：继承
 *  initial：默认
 *  unset：暂不支持。简单理解为不设置。其实，它是关键字 `initial` 和 `inherit` 的组合。

当我们给一个 CSS 属性设置了 `unset属性值`：

*  如果该属性是默认继承属性，该值等同于 `inherit`
 *  如果该属性是非继承属性，该值等同于 `initial`

一、容器属性

1、grid-template-row / grid-template-column

.container {
      display: grid;
      grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
      grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
    }

当容器被定义为grid时，定义容器的每行和每列的大小。

*  line-name即线的名称，名称可省略。
 *  track-size即为每列的宽度，值可以是长度单位，也可以是百分比，也可以是auto或者以下一些函数。

基本用法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

（1）repeat()：可以重复一些行或者列，值可以是长度或者是**auto-fill（填充尽可能多的单元格）。**

假如要做一个4行4列均相等的，可以这样写：

.container {
      display: grid;
      grid-template-columns: repeat(4, 25%);
      grid-template-rows: repeat(4, 25%);
    }

等同于：

.container {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-template-rows: 25% 25% 25% 25%;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 1][]

颜色值采用js实现：

`repeat()还有一种用法是`接受两个参数，第一个参数是重复的次数（上例是4），第二个参数是所要重复的值。

grid-template-columns: repeat(2, 100px 20px);

这样的结果也是4列，但1,2和3,4列宽度相同。

auto-fill：容器的大小不确定时，`auto-fill`表示自动填充容器，直到容器不能放置更多的列。

.container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
    }

奇数列自动填充，偶数列固定100px

（2）fr：fraction 的缩写，意为"片段"。如果设置了fr，那么设置了fr的行/列将会按照比例分配容器剩余空间。

.container {
      display: grid;
      grid-template-columns: 50px 1fr 2fr;
    }

上面代码表示有3列，第一列固定宽度50px，假如容器尺寸为200px，则第二列和第三列分别为50px和100px。

（3）minmax()：产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

.container{
        display: grid;
        grid-template-columns: 1fr 1fr minmax(50px, 1fr);
    }

上面的代码表示第3列的宽度介于50px 和1fr。

（4）auto：auto表示由浏览器自己决定长度。

.container{
        display: grid;
        grid-template-columns: 100px auto 100px;
    }

上面代码含义是:第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了`min-width`，且这个值大于最大宽度。  
（5）两栏布局左侧固定宽度，右侧自适应

.container{
        display: grid;
        grid-template: 100px auto;
    }

左侧固定100px，右侧自适应宽度

2、grid-template-areas

属性用于定义区域。先用grid-template-row和template-template-column划分区域，然后才是分区域。

.container {
      grid-template-areas: 
        "<grid-area-name> | . | none | ..."
        "...";
    }

布局实例

<div class="container">
        <div class="item-a">header</div>
        <div class="item-b">content</div>
        <div class="item-c">sidebar</div>
        <div class="item-d">footer</div>
    </div>

.item-a {
        grid-area: header;
    }
    
    .item-b {
        grid-area: main;
    }
    
    .item-c {
        grid-area: sidebar;
    }
    
    .item-d {
        grid-area: footer;
    }
    
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            "header header header header"
            "main main main sidebar"
            "footer footer footer footer";
    }
    .container > div{
        border:1px solid lightblue;
        text-align: center;
    }

![20190817183733653.png][]

3、row-gap/column-gap/gap

row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。

.container {
      row-gap: 20px;
      column-gap: 20px;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 2][]

`grid-gap`属性和flex属性类似，是`grid-column-gap`和`grid-row-gap`的合并简写形式。

gap: <grid-row-gap> <grid-column-gap>;

.container{
        gap: 20px 20px;
    }

4、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 3][]

grid-auto-flow默认值是row，如果设为column后

grid-auto-flow: column;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 4][]

`grid-auto-flow`属性还可以设成`row dense`和`column dense`。某些项目指定位置以后，如果容器行或者列有空余位置，dense规定剩下的项目尽可能紧凑排列，并且尽量填满空格。

5、justify-items ，align-items ，place-items

`justify-items`属性设置单元格内容的水平位置（左中右），`align-items`属性设置单元格内容的垂直位置（上中下）。

.container {
      justify-items: start | end | center | stretch;
      align-items: start | end | center | stretch;
    }

`justify-items和align-items`这两个属性都有如下值：

*  start：对齐单元格的起始边缘。
 *  end：对齐单元格的结束边缘。
 *  center：单元格内部居中。
 *  stretch：拉伸，占满单元格的整个宽度（默认值）。

`place-items`属性是`align-items`属性和`justify-items`属性的合并简写形式。

**注意：justify-items和align-items默认值是stretch，当设置这两个属性值为其他时，比如start，则宽度随单元格内容变化。**

例如:

.container {
        display: grid;
        margin: 10px;
        height: 300px;
        width: 300px;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
        justify-items: start;
        align-items: start;
    }

![20190817192549546.png][]

如果省略第二个值，则浏览器认为与第一个值相等。

6、justify-content ，align-content ，place-content

`justify-content`属性是整个内容区域在容器里面的水平位置（左中右），`align-content`属性是整个内容区域的垂直位置（上中下）。这两个值和flex中的juqstify-content和align-items有点类似。

.container {
      justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
      align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
    }

**注意：此属性仅在网格总宽度小于grid容器宽度时候有效果。**意味着假如按照百分比设置行列，那么这两个属性是无效的，除非你按照固定宽度设置才会有效。

例如：

如果按照百分比设置grid-template-column和grid-template-row，

.container {
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
        justify-content: start;
        align-content: start;
        border: 1px solid red;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 4][]

.container {
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: 50px 50px 50px 50px;
        justify-content: start;
        align-content: start;
        border: 1px solid red;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 5][]

`place-content`属性是`align-content`属性和`justify-content`属性的合并简写形式。

7、grid-auto-columns ，grid-auto-rows

`grid-auto-columns`属性和`grid-auto-rows`属性用来设置，浏览器自动创建的多余网格的列宽和行高。

如果容器指定这连个属性，并且在单元格中指定位置，那么浏览器会按照指定的位置和大小放置单元格。

.container {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
      grid-template-rows: 50px 50px 50px 50px;
      grid-auto-rows: 40px; 
    }
    .item:nth-child(15){
      grid-row-start: 5;
      grid-column-start: 3;
    }
    .item:nth-child(16){
      grid-row-start: 6;
      grid-column-start: 4;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 6][]

如果子单元格不设定grid-column-start属性，grid-column-start默认值为1。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 7][]

8、grid-template ，grid

`grid-template`属性是`grid-template-columns`、`grid-template-rows`和`grid-template-areas`这三个属性的合并简写形式。

`grid`属性是`grid-template-rows`、`grid-template-columns`、`grid-template-areas`、 `grid-auto-rows`、`grid-auto-columns`、`grid-auto-flow`这六个属性的合并简写形式。

个人不建议使用这两个属性，会造成代码晦涩难懂。

二、项目属性

以下属性都是作用在item上

1、grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end

这四个数形用来指定项目的位置，具体方法就是指定项目的上、下、左、右四个边框分别在容器的哪个网格线。

*  `grid-column-start`属性：左边框所在的垂直网格线
 *  `grid-column-end`属性：右边框所在的垂直网格线
 *  `grid-row-start`属性：上边框所在的水平网格线
 *  `grid-row-end`属性：下边框所在的水平网格线

注意上面的这四个属性可以覆盖容器中grid-template-row和grid-template-column属性。

.container {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
      grid-template-rows: 50px 50px 50px 50px;
    }
    .item:nth-child(1){
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 3;
      grid-row-end: 5;  
    }

上面代码表示第一个元素左边框起始于第3个列网格线，右边框结束于第5根列网格线；上边框起始于第3个列网格线，下边框结束于第5根列网格线。其他项目都没有指定位置，容器中display近似于absolute表现，由浏览器自动布局。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 8][]

**这四个属性值还可以指定为网格线的名称或者使用`span`关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。**

2、grid-column ，grid-row

`grid-column`属性是`grid-column-start`和`grid-column-end`的合并简写形式，`grid-row`属性是`grid-row-start`属性和`grid-row-end`的合并简写形式。

在此不一一举例，有兴趣的读者可以自己试试。

3、 grid-area

`grid-area`属性指定项目位置.

此属性必须要和容器属性中的grid-template-areas一起使用，这很好理解，只有设定父容器区域才能指定子元素在哪个区域。

.container {
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: 50px 50px 50px 50px;
        grid-template-areas: 'a b c d'
                             'e f g h'
                             'i j k l'
                             'm n o p';
        border: 1px solid red;
    }
    .item:nth-child(1){
        grid-area: g;
    }

结果：

![20190817211102837.png][]

我们可以看到编号为1的变到了g区域。

grid-area 还可用作`grid-row-start`、`grid-column-start`、`grid-row-end`、`grid-column-end`的合并简写形式，直接指定项目的位置。

.item {
      grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    }

4、justify-self ，align-self ，place-self

`justify-self`设置单元格内容在水平方向的位置（左中右），`justify-self`和`justify-items`的用法完全一致，但只作用于单个项目。

`align-self`设置单元格内容的在垂直方向的位置（上中下），`align-self`和`align-items`的用法完全一致，也是只作用于单个项目。

.item {
      justify-self: start | end | center | stretch;
      align-self: start | end | center | stretch;
    }

这两个属性都可以取下面四个值。

>  *  start：对齐单元格的起始边缘。
>  *  end：对齐单元格的结束边缘。
>  *  center：单元格内部居中。
>  *  stretch：拉伸，占满单元格的整个宽度（默认值）。

`place-self`属性是`align-self`属性和`justify-self`属性的合并简写形式。如果省略第二个值，那么第二个值和第一个值相等。

三、参考资料：

1、[CSS Grid 网格布局教程][CSS Grid]

2、[A Complete Guide to Grid][]

3、[\[Grid布局\] - 快到格子里来][Grid_ -]

4、[Understanding the CSS Grid Layout Module][]

5、[Basic Concepts of grid layout][]

[CSS-]: https://blog.csdn.net/u014744118/article/details/98873684
[CSS_position]: https://blog.csdn.net/u014744118/article/details/97300870
[CSS_transform]: https://blog.csdn.net/u014744118/article/details/98037338
[CSS_flex_flex]: https://blog.csdn.net/u014744118/article/details/99199806
[CSS_Grid]: https://blog.csdn.net/u014744118/article/details/99658494
[CSS_CSS_-transition]: https://blog.csdn.net/u014744118/article/details/102616568
[CSS_CSS_-animation]: https://blog.csdn.net/u014744118/article/details/102617125
[CSS]: https://blog.csdn.net/u014744118/article/details/103848497
[https_developer.mozilla.org_en-US_docs_Web_CSS_CSS_Grid_Layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[20190815231736645.png]: /images/20211029/4b0c925608cd43cd98abca3e88169296.png
[20190815232013967.png]: /images/20211029/d1db5e88a35e4841b6b79e6173f9b1c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: /images/20211029/871ca58d580743e691bee7852fca7528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 1]: /images/20211029/22553deb69ac4976a09050b3630d66c1.png
[20190817183733653.png]: /images/20211029/22df2a283ca74255b55394029d50cf0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 2]: /images/20211029/501c02c84b964d6f8b87a582815be731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 3]: /images/20211029/720bdb31bb114eae92136c4417f3a1b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 4]: /images/20211029/988751257f414bbba7cbd11e5b2e9026.png
[20190817192549546.png]: /images/20211029/19e185fc13aa48e9990afc30fef91c30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 5]: /images/20211029/78ca8446916c4856a293ef4d9e37131c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 6]: /images/20211029/18cc807a62e343aebe31e59d4f9a804e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 7]: /images/20211029/2956056259df46cca746a2e49392ce57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 8]: /images/20211029/2954ca021f914adeb1ed384ae189fed4.png
[20190817211102837.png]: /images/20211029/6167ebf503564c57a65fe904ab94a28d.png
[CSS Grid]: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
[A Complete Guide to Grid]: https://css-tricks.com/snippets/css/complete-guide-grid/
[Grid_ -]: https://juejin.im/post/5d2e9a9951882556d1683770
[Understanding the CSS Grid Layout Module]: https://webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module--cms-1079
[Basic Concepts of grid layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout