grid特性布局特性总结

1、什么是网格布局？

网格是由一系列水平及垂直的线构成的一种布局模式。

一个网格通常具有许多列与行，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽(gutter)

2、fr是什么单位

fr代表了可用空间的一个比例。

3、网格间隙

可以grid-coulum-gap与grid-row-gap或是gird-gap来定义格子之间的间隙。

4、重复构建行和列

一般使用 gird-template-columns: x x x来定义三列 这里可以使用一个函数repeat(3,xfr)来定义相等的三列。

5、显示网格和隐式网格

简单来说，隐式网格就是为了放显示网格放不下的元素，浏览器根据已经定义的显式网格自动生成网格部分。

隐式网格中生成的行/列大小默认是auto，大小会根据放入的内容自动调整。当然也可以使用grid-auto-row和grid-auto-columns属性手动设定隐式网格的大小

6、minmax函数

minmax函数为一个行/列的尺寸设置了取值范围。

100像素高的行/列有时可能会不够用，因为时常会有比100像素高的内容加进去。所以，我们希望可以将其设定为至少100像素，而且可以跟随内容来自动扩展尺寸保证能容纳所有内容。

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

如果所有网格内的内容均小于100像素，那么看起来不会有变化，但如果在某一项中放入很长的内容或者图片，你可以看到这个格子所在的哪一行的高度变成能刚好容纳内容的高度了。

7、自动使用多列填充 auto-fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

能看到形成了一个包含许多至少200像素宽地列的网格，将容器填满。随着容器宽度的改变，网格会自动根据容器宽度进行调整，每一列的宽度总是大于200像素，并且容器总会被填满。

8、基于线的元素放置

在定义完网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线(即网格边缘线)在网格的最左边而第一条行分隔线在网格的最上面。

grid-column-start
grid-column-end
grid-row-start
grid-row-end 

也可以使用-1来定位到最后一条列分割线或是航分隔先，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显示玩个，对于隐式网格-1不一定能定位到最后一条分隔线。

9、使用gird-template-areas属性放置元素

另一种往网格放元素的方式是用grid-template-areas属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。

.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

10 、grid和flex的区别是什么？

+ flex是一维布局系统，适合做局部布局，如导航栏组件。
+ Grid是二维布局系统，通常用于整个页面的规划。
+ 二者的应用场景并不冲突，虽然flex布局可以用于大的页面布局，按时没有grid强大和灵活。二者结合使用更加轻松。
+ flex与grid布局有实质的区别，那就是flex布局是一维布局，grid布局是二维布局。flex布局一次只能处理一个维度上的元素布局，一行或者是一列。Grid布局试讲容器划分成了"行"和"列"，产生了一个个的网格，我们可以将网格元素放在与这些行列相关的位置上。