Css-Grid布局(强大)

前言

我们前面讲的Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局，Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看做是二维布局，Grid布局远比Flex布局强大

grid布局像一个个子一个格子的排列，更加灵活，更加强大。

在这里插入图片描述

常用布局方式

传统布局方式
1. 利用position属性+display属性+float属性布局，兼容性最好，但是效率低，麻烦
flex布局
1. 有自己的一套属性，效率高，学习成本低，兼容性强
grid布局
1. 网格布局(Grid)是最强大的css布局方案。但是知识点较多，学习成本相对困难，目前的兼容性不如flex好

基本概念图

在这里插入图片描述

每个grid布局，有隐藏的网格线，用来帮助定位的

在这里插入图片描述

准备

准备一个大div，里面包裹住10个div，然后给每个div的内容设置不同的数字和背景色，方便标识

<template>
  <div id="app">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>
    <div class="d8">8</div>
    <div class="d9">9</div>
    <div class="d10">10</div>
  </div>
</template>

<style type="text/css" lang="scss">
  #app{
    margin-left: 10vw;
    margin-top: 10vh;
    color: white;
    font-size: 18px;
    font-weight: 600;
    width: 400px;
    height: 600px;
    border: 5px solid skyblue;
  }
  #app{

  }
  .d1{
    background-color: #fff799;
  }
  .d2{
    background-color: #80a492;
  }
  .d3{
    background-color: #422517;
  }
  .d4{
    background-color: #c12c1f;
  }
  .d5{
    background-color: #a76283;
  }
  .d6{
    background-color: #6b5458;
  }
  .d7{
    background-color: #4f6f46;
  }
  .d8{
    background-color: #C67915;
  }
  .d9{
    background-color: #2C2F3B;
  }
  .d10{
    background-color: #a3bbdb;
  }
</style>

容器属性

和flex布局一样，拥有容器和项目的概念

容器共有15个属性：

grid-tamplate-columns：设置容器每列的宽度(项目的宽度)
grid-template-rows：设置容器每行的宽度(项目的高度)
grid-row-gap：设置每行之间的行间距
grid-column-gap：设置每列之间的列间距
grid-gap：上面两个设置的简写
grid-template-areas：一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
grid-auto-flow：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序，和flex布局的flex-direction属性基本一样)
justify-items：设置单元格内容的水平和垂直的对齐方式(主(水平)方向)
align-items：设置单元格内容的水平和垂直的对齐方式(副(垂直)方向)
place-items：上面两个属性的简写
justify-content：设置整个内容区域的水平和垂直的对齐方式(主(水平))
align-content：设置整个内容区域的水平和垂直的对齐方式(副(垂直))
place-content：上面两个属性的简写
grid-auto-columns：用来设置多出来的项目的宽
grid-auto-rows：用来设置多出来的项目的高

1、grid-tamplate-columns

常和grid-template-rows一起使用，想要多少行和列，就填写相应属性值的个数，不填写，自动分配

比如我想设置前三行和前四列的宽高为100px

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
}

在这里插入图片描述

2、grid-template-rows

一般和上个属性搭配使用，上面演示了。。。

grid-template-* 值写法

repeat()：第一个参数是重复的次数，第二个参数是所要重复的值

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(3,100px); /* 效果和上面一样 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px); /* 效果和上面一样 */
}

auto-fill：有时，单元格的大小时固定的，但是容器的大小不确定，这个属性就会自动填充

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(auto-fill,100px); /* 内容自动把容器的宽度填满 项目自身宽度依旧保持100px */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

fr：为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为：片段)

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: repeat(5,1fr); /* 宽度平均分成5份 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

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

演示需要先把容器的宽高去掉

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: 1fr minmax(150px, 1fr); /* 第二列最少不能低于150px */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(3,100px);
}

在这里插入图片描述

auto：表示由浏览器自己决定长度

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: 100px auto 100px;/* 第一列和第三列占100px，中间剩余的空间给第二列 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px);
}

在这里插入图片描述

网格线，可以用方括号定义网格线名称，方便以后的引用

#app{
    display: grid;
    /* grid-template-columns: 100px 100px 100px; */
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
    /* grid-template-rows: 100px 100px 100px 100px; */
    grid-template-rows: repeat(4,100px);
}

3、grid-row-gap

项目之间的行间距,一般和grid-column-gap一起使用

比如想要设置每个项目之间的间距为10px

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    grid-column-gap: 10px; /* 项目之间的列间距 */
    grid-row-gap: 10px; /* 项目之间的行间距 */
}

在这里插入图片描述

4、grid-column-gap

项目之间的列间距，一般和上面一起使用，上面一起演示了

5、grid-gap

上面两个间距的合并的写法，如果行列间距值一样，可以只写一个

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* grid-column-gap: 10px;
    grid-row-gap: 10px; */
    /* grid-gap: 10px 10px; */
    grid-gap: 10px; /* 如果值一样，可以只写一个 */
}

在这里插入图片描述

grid-*-gap扩展

根据最新标准，上面三个属性名的grid-前缀已经删除

#app{
    display: grid;
    /* grid-template-columns: 1fr 2fr 3fr; 第一列占1份，第二列占2份，第三列占3份 */
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* column-gap: 10px;
    row-gap: 10px; */
    /* gap: 10px 10px; */
    gap: 10px; /* 如果值一样，可以只写一个 */
}

6、grid-template-areas

一个区域由单个或多个单元格组成，由你决定具体使用，需要在项目属性里面设置

#app{
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 宽度平均分成5份 */
    grid-template-rows: repeat(3,100px);
    /* grid-template-areas: 'a b c'
    						'd e f'
    						'g h i'; */
    /* grid-template-areas: 'a a a'
    						'd b b'
    						'c c c'; */
    grid-template-areas: 'a . c'
        				 'd . d'
        				 'e . f';
}

7、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序)

默认是grid-auto-flow: row;

#app{
    display: grid;
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px;
    grid-template-rows: repeat(4,100px);
    grid-auto-flow: column; /* 主方向为列 */
}

在这里插入图片描述

grid-auto-flow扩展

grid-auto-flow: row;

grid-auto-flow: row danse;可以合理利用空间

**注意：**拥有以上效果，需要先给.d1 和 .d2元素单独设置grid-column: 1 / 3;属性，表示占表格列的第一条线开始，到第三条线结束的距离，后面讲项目的时候会讲到

8、justify-items

设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值

start：开头
end：尾部
center：中间
stretch

需要给项目里面内容单独设置宽度才能看出来

8.1、start

#app{
    display: grid;
    /* 外面格子宽度 */
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: start;
    /* 里面内容宽度 */
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

8.1、end

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: end;
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

8.1、center

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-items: center;
    &>div{
        width: 50px; /* 重要设置*/
        height: 100%; /* 重要设置*/
    }
}

在这里插入图片描述

9、align-items

设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值

start：开头
end：尾部
center：中间
stretch

需要给项目里面内容单独设置宽度才能看出来，这里只演示一个了

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    align-items: end;
    &>div{
        width: 100%; /* 重要设置*/
        height: 50px; /* 重要设置*/
    }
}

在这里插入图片描述

10、place-items

上面两个属性的简写，如果值一样，可以只写一个

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    /*
        相当于
        justify-items: center;
        align-items: center;
    */
    place-items: center;
    &>div{
        width: 50px; /* 重要设置*/
        height: 50px; /* 重要设置*/
    }
}

在这里插入图片描述

11、justify-content

设置整个内容区域的水平对齐方式，共有7个值：

start：行首
end：行尾
center：行中间
stretch
space-around：和flex布局的效果一样，均匀排列每个元素，首个元素放置于起点，末尾元素放置于重点
space-betweeen：和flex布局的效果一样，均匀排列每个元素，每个元素周围分配相同的空间
space-evenly：均匀排列每个元素，每个元素之间的建个相等

11.1、start

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    justify-content: start;
}

在这里插入图片描述

11.2、end

justify-content: end;

在这里插入图片描述

11.3、center

justify-content: center;

在这里插入图片描述

11.4、space-around

justify-content: space-around;

在这里插入图片描述

11.5、space-between

justify-content: space-between;

在这里插入图片描述

11.6、space-evenly

justify-content: space-evenly;

在这里插入图片描述

12、align-content

设置整个内容区域的垂直对齐方式,和上面一样，拥有七个值，这里就不再一一列举了，举两个例子

12.1、end

align-content: end;

在这里插入图片描述

12.2、space-around

align-content: space-around;

在这里插入图片描述

13、place-content

上面两个属性的简写

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(4,100px);
    /*
    相当于
    justify-content: center;
    align-content: center;
    */
    place-content: center;
}

在这里插入图片描述

14、grid-auto-columns

用来设置多出来的项目的宽

我这里内容区设置三行三列的行列为100px，这样就多出来一个div10没有设置。

可以单独给多出来的元素设置宽

grid-auto-columns: 200px; /* 不管用，不晓得 */

15、grid-auto-rows

用来设置多出来的项目的高

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: repeat(3,100px);
    grid-auto-rows: 50px;
}

在这里插入图片描述

项目属性

项目共有10个属性

grid-column-start：用来指定item的具体位置，根据在哪根网格线(起始线)
grid-column-end：用来指定item的具体位置，根据在哪根网格线(结束线)
grid-row-start：用来指定item的具体位置，根据在哪根网格线(起始线)
grid-row-end：用来指定item的具体位置，根据在哪根网格线(结束线)
grid-column：1和2的简写形式
grid-row：3和4的简写形式
grid-area：指定项目放在哪一个区域
justify-self：justify-self属性设置单元格内容的水平位置 (左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)
align-self：align-self属性设置单元格内容的垂直位置 (上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)
place-self：8和9的简写形式

1、grid-column-start

用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示

2、grid-column-end

用来指定item的具体位置，根据在哪根网格线(结束线)

比如我第一个元素需要使用所在行上两个格子

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #fff799;
}

在这里插入图片描述

3、grid-row-start

用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示

4、grid-row-end

用来指定item的具体位置，根据在哪根网格线(结束线)

比如我第一个元素需要使用所在行上两个格子，所在列上两个格子

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: #fff799;
}

在这里插入图片描述

5、grid-column

1和2的简写形式，使用 / 分隔

.d1{
    /* grid-column-start: 1;
    grid-column-end: 3; */
    grid-column: 1 / 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: #fff799;
}

6、grid-row

3和4的简写形式，使用 / 分隔

.d1{
    grid-column-start: 1;
    grid-column-end: 3;
    /* grid-row-start: 1;
    grid-row-end: 3; */
    grid-row: 1 / 3;
    background-color: #fff799;
}

7、grid-area

指定项目放在哪一个区域，搭配grid-template-areas使用

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    /* grid-template-areas: 'a b c'
    'd e f'
    'g h i'; */
    grid-template-areas: 'a a a'
        'b b b'
        'c c c'
        'd d d';
}
.d1{
    grid-area: b;/* 放在b区，独占一行 */
    background-color: #fff799;
}

在这里插入图片描述

8、justify-self

justify-self属性设置单元格内容的水平位置 (左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)，也是四个值

start
end
center
stretch

8.1、start

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: start;
    background-color: #fff799;
}

在这里插入图片描述

8.2、end

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: end;
    background-color: #fff799;
}

在这里插入图片描述

8.3、center

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    justify-self: center;
    background-color: #fff799;
}

在这里插入图片描述

9、align-self

align-self属性设置单元格内容的垂直位置 (上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)，和上面的值一样

9.1、start

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    align-self: start;
    background-color: #fff799;
}

在这里插入图片描述

9.2、end

align-self: end;

在这里插入图片描述

9.3、center

align-self: center;

在这里插入图片描述

10、place-self

上面两个的简写

#app{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    &>div{
        width: 50px;
        height: 50px;
    }
}
.d1{
    /*
      相当于
      justify-self: center;
      align-self: center;
    */
    place-self: center;
    background-color: #fff799;
}