css grid 那些事flex 布局我们经常会用，我们知道它是针对于x轴和y 轴的线性布局，但是css布局确针对于我

大家一提到响应式布局就会想到 bootstarp 和媒体查询，在不考虑兼容性的前提下，浏览器又给我们提供了一种新的解决方案css grid，那么我们所说的css grid 又是什么哪

什么是 css grid

它将网页划分成一个个网格并且自由组合，做出各种各样的布局，从而实现以前的复杂的布局效果

和flex的区别

flex 布局我们经常会用，我们知道它是针对于x轴和y 轴的线性布局，但是css布局确针对于我们的行和列，形成单元格，然后确定我们的子元素占据多少单元格，属于更强大的布局方式。 举个栗子 操场上排队，把我们的1班，2班，3班，4班，5班，6班，进行排队，flex布局只能把我们的班级按照按照轴线排列，既定的班级顺序flex并不能打乱，但是我们css grid 把我们的排队区域拆分成单元格，通过我们的css 自由放置我们班级的位置，显而易见css Grid 是强大的

看一下 css grid

采用grid布局的容器我们称为container，里面的内容我们成为item， css grid 并不会对item 里面的元素产生影响，水平区域我们称之为行，垂直区域我们称之为列，交叉区域就是单元格，正常情况下，n行和m列会产生n x m个单元格。比如，4行3列会产生12个单元格。

css grid 属性

display grid 网格布局参见grid1.html
display inline-grid 网格布局行元素 （设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效）
grid-template-columns 属性定义每一行的列宽
grid-template-rows 属性定义每一行的行高

<!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>grid-test</title>
  <style>
    .grid-container{
      display: grid;
      grid-template-columns: 150px 50px 50px;
      grid-template-rows: 50px 50px 50px;
    }
  .item {
    text-align: center;
    border: 1px solid #eee;
    color: gray;
}
.item-1{
  background:rgba(255, 0, 0);
}
.item-2{
  background:rgba(255, 165, 0);
}
.item-3{
  background:rgba(255, 255, 0);
}
.item-4{
  background:rgba(0, 255, 0);
}
.item-5{
  background:rgba(0, 127, 255);
}
.item-6{
  background:rgba(0, 0, 255 );
}
.item-7{
  background:rgba(139, 0, 255);
}
.item-8{
  background:rgba(255, 255, 135);
}
.item-9{
  background:rgba(0, 0, 0);
}
  </style>
    
</head>
<body>
  <div class="grid-container">
   <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>
</body>
</html>

repeat() 函数一种是重复某个值得次数，如果是多个值会批量的重复这一些值参见grid2.html 参见grid3.html

重复一个值
  .grid-container{
      display: grid;
      width: 100%;
      grid-template-columns:repeat(3,33.33%);
      grid-template-rows:repeat(3,50px) ;
    }

  .grid-container{
      display: grid;
      width: 100%;
      height: 400px;
      grid-template-columns:repeat(3,100px 20px );
      grid-template-rows: repeat(2, 100px);
    }

效果见下图

第二种效果

fr 关键字表示倍数关系参见grid4.html

 .grid-container{
      display: grid;
      width:100%;
      grid-template-columns: 150px 1fr 2fr;
      grid-template-rows: 50px 50px 50px;
    }
第一列是150px， 第二列是第一列的2倍关系

minmax() 和auto 参见grid5.html

minmax()函数它接受两个参数，分别为最小值和最大值。表示长度就在这个范围之中。
auto 表示自适应的长度
 .grid-container{
      display: grid;
      width:100%;
      height: 400px;
      grid-template-columns: 100px 1fr minmax(50px, 1fr);
      grid-template-rows: 100px auto 100px;
    }

效果

column-gap row-gap gap 参见grid6.html

column-gap 列间距
row-gap 行间距
gap：行间距 列间距
如果只有一个值 表示行列间距相同
 .grid-container{
      display: grid;
      grid-template-columns: 150px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      column-gap: 20px; 
      row-gap: 30px;
    }

grid-template-areas 定义区域参见grid7 /* grid-template-areas属性用于定义区域。一个区域由单个或多个单元格组成。 */

  .grid-container{
      display: grid;
      grid-template-columns: 150px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      grid-template-areas:'hea hea hea'
                           'main main aside'
                           'ft ft ft';
    }
另外一个属性
grid-auto-flow 指定元素先行后列 还是先列 后行 参数 column 和 row

当然还有一些子元素的属性和flex 布局差不多用法也差不多参见 grid8

 justify-items: start | end | center | stretch; 设置单元格内容的水平位置（
  align-items: start | end | center | stretch;  设置单元格内容的垂直位置*/
  place-items: <align-items> <justify-items>; 设置单元格的水平垂直距离*/
   
   设置整体内容的 */
  水平距离 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
   垂直距离
  align-content: start | end | center | stretch | space-around | space-between | space-evenly; */
 水平垂直距离 */
  place-content: <align-content> <justify-content> */
  space-between - 单元格与单元格的间隔相等，单元格与容器边框之间没有间隔。 */
  space-evenly - 单元格与单元格的间隔相等，单元格与容器边框之间也是同样长度的间隔。 */

   
    .grid-container{
      display: grid;
      grid-template-columns: 150px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      place-content: space-around space-evenly;
      place-items: end stretch;
    stretch 表示拉伸整个容器
    }
  .item {
    /* text-align: center; */
    border: 1px solid #eee;
    color: gray;
}

最后一种情况参见grid9.html

指定单元格的四个边框
 grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线 

    .grid-container{
      display: grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      place-content: center;
      /* place-items: end stretch; */

    }
  .item {
    /* text-align: center; */
    border: 1px solid #eee;
    color: gray;
}
  .item .cla{
    width: 100px;
    height:20px;
    }
.item-1{
  grid-column-start: 2;
  grid-column-end: 4;
  background:rgba(255, 0, 0);
指定元素 在列的2行开始 列的第四行结束
}

github 地址 github.com/hegegetells…