Grid学习总结

Grid布局是css布局方案之一，Grid将容器划分成“行”和”列“，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid布局比Flex布局强大，Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。

一、基本概念

1，容器（container）: 有容器属性

2，项目（items）：有项目属性，项目只能是容器的顶层子元素，不包含项目的子元素

3，行（row）：水平区域

4，列（column）：垂直区域

5，间距（gap）：单元格之间的间距

6，区域（area）：单元格所占据的区域

7，网格线（grid line）：划分网格的线，水平网格线划分出行，垂直网格线划分出列。n行就有n+1根水平网格线，m列就有m+1跟垂直网格线

二、API

Grid布局的属性分为两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

三、实例代码

基础代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid练习</title>
  <style>
    .containerBase{
      width: 300px;
      border: 2px solid #ddd;
    }
    .itemBase{
      font-size: 60px;
      color: #111111;
      text-align: center;
    }
    .container{}
    .item{}
  </style>
</head>
<body>
  <div class="containerBase container">
    <div class="itemBase item1">1</div>
    <div class="itemBase item2">2</div>
    <div class="itemBase item3">3</div>
    <div class="itemBase item4">4</div>
    <div class="itemBase item5">5</div>
    <div class="itemBase item6">6</div>
    <div class="itemBase item7">7</div>
    <div class="itemBase item8">8</div>
    <div class="itemBase item9">9</div>
  </div>
  <script>
    const colors = ['#EF3429','#F68F25','#4BA846','#0576C2','#C077AF','#F8D29D','#B4A87F', '#D0E4A8','#4DC7EC'];
    let items = document.getElementsByClassName('itemBase');
    for(let k in items){
      if (items[k].style) {
        items[k].style.backgroundColor = colors[k];
      }
    }
  </script>
</body>
</html>

3.1 容器属性

1，设置网格的列宽和行高。

.container{
   display: grid;
   grid-template-columns: 33.33% 33.33% 33.33%;
   grid-template-rows: 100px 100px 100px;
}

用于设置网格列宽和行高的函数及关键字，如下列表：

注意：仅适用于设置grid-template-rows、grid-template-columns、grid-auto-rows和grid-auto-columns。

2，指定网格区域和定义网格线名称。

（1）指定网格区域: grid-template-areas

将9宫格各个区域定义如下：

.container{
      display: grid;
      grid-template-areas: "a b c" 
                           "d e f"
                           "g h i";
}

若某些区域不需要利用，可以使用”点“（.）表示：

.container{
      display: grid;
      grid-template-areas: "a . c"
                           "d . f" 
                           "g . i";
}

多个单元格合并成一个区域的写法：

.container{
      display: grid;
      grid-template-areas: "a a a"
                           "b b b"
                           "c c c";
}

（2）定义网格线名称

划分网格的线，称为网格线。正常情况下，n行就有n+1根水平网格线，m列就有m+1根垂直网格线。在grid-template-rows和grid-template-columns的属性中，使用方括号来指定每一根网格线的名字，方便以后的引用。

.container{
    grid-template-rows: [r1] 1fr [r2] 1fr [r3] 1fr [r4];
    grid-template-columns: [c1] 100px [c2] 50px [c3] 1fr [c4];
 }

3，设置网格间距；

grid-row-gap(row-gap)：设置行与行之间的间距；

grid-column-gap(column-gap)：设置列与列之间的间距；

grid-gap(gap)：行间距和列间距的合并简写形式；

最新标准统一使用row-gap，column-gap，gap。【grid-】前缀已经删除。

.container{
    display:grid;
    gap:20px 10px; // 行间距20px, 列间距10px
}

4，设置容器中单元格的放置顺序

grid-auto-flow的默认值是row，先行后列，column是先列后行。

.container{
    display: grid;
    grid-auto-flow: column;  // 先列后行
}

grid-auto-flow属性除了设置成row和column，还可以设置成row dense和column dense。这两这个值主要用于某些项目指定位置后，剩下的项目怎么自动放置。

.container{
   display: grid;
   grid-template-rows: repeat(3,1fr);
   grid-template-columns: [c1] 120px [c2] 120px [c3] 1fr [c4];
   gap: 3px;
   grid-auto-flow: row dense;
}
.item1{
   grid-column-start: c1;
   grid-column-end: c3;
}
.item2{
   grid-column-start: c1;
   grid-column-end: c3;
}

5，设置内容位置

（1）设置整个内容区域在容器里的位置

place-content：

（2）设置单元格内容在单元格中的位置

justify-items：单元格内容在单元中的水平位置（start | center | end | stretch）

align-items：单元格内容在单元格中的垂直位置（start | center | end | stretch）

place-items:

6，grid-auto-columns和grid-auto-rows的使用
如果网格只要三行三列，但是某一个项目指定在第4列，这时，浏览器会自动生成多余的网格，以便放置项目。

.container{
   display: grid;
   grid-template-rows: repeat(3,80px);
   grid-template-columns: [c1] 50px [c2] 50px [c3] 100px [c4];
   grid-auto-rows:minmax(20px, 1fr);
}
.item8{
   grid-row:4 / 5;
   grid-column: c2 / c3;
}
.item9{
   grid-row:5 / 6;
   grid-column: 5 / 6;
}

3.2 项目属性

1，通过网格线指定项目的位置

grid-column-start：左边框所在的垂直网格线；
grid-column-end：右边框所在的垂直网格线；
grid-row-start：上边框所在的垂直网格线；
grid-row-end：下边框所在的垂直网格线；

合并简写形式：

grid-column: / ;
grid-row: / ;

.container{
   display: grid;
   grid-template-rows: repeat(3,50px);
   grid-template-columns: [c1] 50px [c2] 50px [c3] 100px [c4];
   grid-auto-rows:minmax(20px, 1fr);
}
.item1{
   grid-row: 1 / span 2;
   grid-column: c1 / span 2 ;
}

span关键字，表示跨越多少个网格。

我们发现项目之间若发生了重叠，可以使用z-index属性指定项目的重叠顺序。

.container{
   display: grid;
   grid-template-rows: repeat(3,50px);
   grid-template-columns: [c1] 50px [c2] 50px [c3] 100px [c4];
   grid-auto-rows:minmax(20px, 1fr);
}
.item1{
  grid-row: 1 / span 2;
  grid-column: c1 / span 2 ;
}
.item4{
  z-index: 10;
}
.item7{
  z-index: 8;
}

2，通过grid-area属性指定项目放在哪一个区域。

.container{
   display: grid;
   grid-template-rows: repeat(3,70px);
   grid-template-columns: [c1] 50px [c2] 50px [c3] 100px [c4];
   grid-auto-rows: minmax(20px, 1fr);
   grid-template-areas: 'a b c'
                        'd e f'
                        'g h i';
}
.item4{
    grid-area: a;
}

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

.item4{
    grid-area: 1 / 1 / 3 / 3;
}

3，设置单个项目下的单元格内容的位置

justify-self：设置单元格内容的水平位置（start | center | end | stretch）；
align-self：设置单元格内容的垂直位置（start | center | end | stretch）；
place-self：；

justify-item和align-items是设置容器中所有项目单元格内容的位置，而justify-self和align-self仅设置指定项目的单元格内容的位置。