grid布局

[su-Pro]

No description provided.

[su-Pro]

场景和特点

• 整体的布局
  

• 九宫格布局

特点

• 为布局而生的二维网格布局系统
• 响应式布局、二维列表等都是它的菜。
• 对比 flexbox 来说：flexbox 为单维、内容优先；而 grid 为二维，布局优先。

PS：虽然 flexbox 也可以折行，视觉上看起来形成的也是二维的，但是它并不能进行跨行跨列的操作，所以 flexbox 并不是二维的布局。

缺点

兼容性堪忧，和flex比起来简直是不可用，但也算是个未来的趋势。

grid的兼容性

chrome 57版本发布的时间是2017年3月

flex的兼容性

safari 10版本发布的时间是2016年10月左右

术语

和flex的基本属于大体相当，外层grid container，内层grid item

轴线

分布对齐属性是根据轴线进行判断

flexbox轴会根据排列方向的改变而改变，而 gird的轴线是不会改变的。

Grid lines & Grid cell

对于每一条能够将container 分割成一个个小格子（cell）的网格线我们称之为 grid lines，被分隔出来的小格子称之为
grid cell

Grid track & Grid area & grid items

每行/列 所有的cell 称之为一个 grid track

任意轴组成的区域都是grid area，可以对他进行命名，可能是多个grid cell 组成。

一个grid items 可能是多个cell合并的结果

grid area 和 gird items 的区别是 前者只能是由轴交叉组成，而后者可以随意组合，不受轴的限制

属性

划分网格

grid-template-rows/columns 可设置的计算值（按照使用频率）
* none | length | percentage | auto
* flex - 单位fr 表示 container中剩余的x份

.grid {
  /* 定义三列
  * 第一列宽度为剩余宽度的三分之一 = 1fr/(1fr + 2fr)
  * 第二列宽度为剩余宽度的三分之二 = 2fr/(1fr + 2fr)
  * 第三列宽度为 100px
  * 总的剩余宽度为 = 100%(container 宽度) - 100px(已设置的宽度)
  */
  grid-template-columns: 1fr 2fr 100px;
}

* repeat 连续有规律的重复行或列

.grid {
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 60px);
}
===========================================================================
.grid {
  /* 两列（100px 和 200px）一起重复 2 次 */
  grid-template-rows: repeat(2, 100px 200px);
}

* min-content | max 
* minmax( )
* fit-content 

自动分配

grid-auto-flow: 默认值row | column | row dense

自左向右，自上至下 自上至下，自左向右 顺序填充，检查遗漏

grid-auto-columns | grid-auto-rows: 实现响应式自动扩展

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-auto-rows: 100px; /* 自动扩展行 */
  grid-gap: 5px;
}

间距

用于 设置行/列之间的间距

gird-gap: grid-column + grid-rows 的简写

.grid {
  grid-gap: 15px 30px;
}

/* 等同于 */
.grid {
  grid-column-gap: 15px;
  grid-row-gap: 30px;
}

定位

通过四条边界进行定位item

通过直接设置grid-row \ grid-column，可使用命名、auto、span跨行进行设置

分布对齐

在块轴 可以通过设置align-items align-self来控制 grid items 的对齐方式

在行轴上，可以通过设置justify-items justify-self对grid items 进行控制

取值范围：auto | normal | start | end | center | stretch |baseline | first baseline | last baseline

和 flex 类似，但是注意轴的问题

…略一部分

items 的 order ： 越小越靠前，用来改变items 的渲染出现顺序，可以改变SEO。

items的 margin ： 基于grid area 来计算的值

item2: margin10px item3：auto