Grid布局

参考：www.ruanyifeng.com/blog/2019/0...

简介

Grid 布局将容器划分成"n行"和"m列"，行和列之间形成单元格。

然后通过指定"项目所在"的单元格，形成布局。

Grid 和Flex相比，flex布局是一维的布局，只能横向或者纵向；而Grid布局则是二维布局。

属性介绍

1、grid-template

在容器上，我们可以通过grid-template对行和列进行设置

1.1、按比例配置

最简单的用法

可以按百分比配置

 .container {
   /* 设置grid有2行，分别占70%和30% */
   grid-template-rows: 70% 30%;  
   /* 设置grid有2列，分别占70%和30% */
   grid-template-columns: 70% 30%;  
 }

也可以按fr来设置

 .container {
   grid-template: 1fr 1fr / 1fr 1fr; // 2行2列
 }

1.2、repeat简写

有时候，网格很多，重复写同样的值很麻烦，可以用repeat()函数简化

repeat()接受两个参数：

• 第一个参数是重复的次数
• 第二个参数是所要重复的值

值可以写n个，用空格隔开

 .container {
   display: grid;
   grid-template-rows: repeat(3, 33.33%);  
   grid-template-columns: repeat(2, 100px 20px 80px); // 值可以写n个，用空格隔开
 }

1.3、auto-fill&auto-fit

有时，我们单元格的大小是固定的，但是容器的大小不确定。 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill或者auto-fit关键字表示自动填充。

auto-fill

 .container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); // 每列宽100px，然后自动填充。
 }

auto-fit

和auo-fill类似，细微区别在于，如果需要在container空间足够大的时候，自动拉伸网格，不留最后的空隙，用auto-fit。

 .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 }

一个动图展示一下差别

2、grid-template-areas

定义区域

网格布局允许指定区域，

一个区域可以是一个或者多个单元格组成，行于行之间用空格或者换行符隔开；

如果某些区域不需要利用，则使用"点"（.）表示。

 .container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr
   grid-template-area: 'a a .'
                       'd e f'
                       'g h i'
 }

eg: 做成一个合并单元格类似的布局

 .container {
   display: grid;
   grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr;
   grid-template-areas:
         "a a b c"
         "a a d e";
 }
 ​
 /* 指定区域 */
 .container .item-1 {
   grid-area: a;
 }

3、grid-auto-flow

可以设置container的子元素排放方向，有点类似于flex布局里的flex-flow

• row 先行后列
• column 先列后行
• dense 先行后列 紧凑
• column dense 先列后行 紧凑

3.1 row 先行后列

 .grid-auto-flow-row {
   display: grid;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   grid-auto-flow: row;
 }

3.2 column 先列后行

 .grid-auto-flow-column {
   display: grid;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   grid-auto-flow: column;
 }

3.3 dense 紧凑排列

有点不好理解，大概的意思是：如果前面有空间，那么就利用起来，将grid插入进去。

比如下面这个例子： item-1从第二列开始放，如果不用dense，1前面会有一个空格。用了dense，就会将2插进去；

 .grid-auto-flow-dense {
   display: grid;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   /* grid-auto-flow: row;  */
   grid-auto-flow: dense;
   margin-top: 10px;
 }
 .grid-auto-flow-dense .item-1 {
   grid-column-start: 2; // 从第二列开始放
 }

4、一些其他属性

grid-gap

和gap属性作用一样

grid-gap属性是grid-row-gap属性和grid-column-gap属性的合并简写形式。

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

place-items

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

• justify-items

justify-items属性设置单元格内容的水平位置（左中右）

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

• align-items

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

justify-content

justify-content属性是整个内容区域在容器里面的水平位置（左中右）

align-content

align-content属性是整个内容区域在容器里面的垂直位置（上中下）

5、和子元素相关的配置

容器内部采用网格定位的子元素，称为"项目"（item）。

item只能是容器的顶层子元素，不包含项目的子元素。

grid-column/grid-row

每一个item的位置是可以单独指定的，具体就是通过指定item的4个边框，分别定为在哪根网格线上。

 grid-column-start 属性，左边框所在的垂直网格线
 grid-column-end 属性， 右边框所在的垂直网格线
 grid-row-start 属性，上边框所在的水平网格线
 grid-row-end 属性 下边框所在的水平网格线
 ​
 grid-column-start: auto: 默认属性、自动放置。

比如下面代码指定，第一个item，左边框从第2根网格线开始，到第4根网格线结束

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

span

表示跨域，即左右或者上下之间跨越了多少个网格。默认跨度为1.

 <fieldset class="fieldset">
       <legend>
         grid-column-span
       </legend>
       <div class="grid grid-column-span">
         <div class="item item-1">1</div>
         <div class="item item-2">2</div>
         <div class="item item-3">3</div>
         <div class="item item-4">4</div>
         <div class="item item-5">5</div>
         <div class="item item-6">6</div>
         <div class="item item-7">7</div>
         <div class="item item-8">8</div>
         <div class="item item-9">9</div>
       </div>
     </fieldset>

 .grid {
   display: grid;
   grid-template: 1fr 1fr / 100px 100px 100px;
 }
 .grid-column-span .item-1 {
   /* 跨越两列 */
   grid-column: span 2;
   /* 跨越两行 */
   grid-row: span 2;
   width: 200px;
   max-width: 200px;
 }

grid-area

grid-area属性可以指定项目放在哪一个区域。

 .container {
   grid-template-areas: 'a b c' 'd e f' 'g h i'
 }
 ​
 .item-1 {
   grid-area: e;
 }

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>;
 }

justify-self / align-self

和container的justify-items、align-items用法相同，只不过这里设置的item里面内容的位置。

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

如下图，白色代表一个item，item-a是里面的内容。 他的水平、垂直位置就是靠justify-self / align-self来设置的。