grid 布局

grid

一、什么是grid布局？

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

二、布局方式 — 常用三种

传统布局方式
flex布局
grid布局（二维布局）利用position属性 + display属性 + float属性布局，兼容性最好，但是效率低，麻烦！有自己的一套属性，效率高，学习成本低，兼容性强！网格布局（Grid）是最强大的 CSS 布局方案。但是知识点较多，学习成本相对困难些，目前的兼容性不如flex好

三、container/item属性汇总

container	item
1. grid-template-columns:定义列和每列的宽度(重点) repeat(minmax(),auto-fill/fit,fr)	1. [grid-column-start](####2.1、grid-column-start / grid-column-end , grid-row-start / grid-row-end)：指定合并网格列的起始位置
2. grid-template-rows:	2. [grid-column-end](####2.1、grid-column-start / grid-column-end , grid-row-start / grid-row-end)：指定合并网格的列结束位置
3. [grid-row-gap](####1.2、grid-row-gap / grid-column-gap(缝隙))：行的间距 gap(差距，间隙的意思)	3. [grid-row-start](####2.1、grid-column / grid-row(`grid-column-end:..` , `grid-row-start..` ) 的简写)：同理
4. grid-column-gap：列的间距	4. [grid-row-end](####2.1、grid-column / grid-row(`grid-column-end:..` , `grid-row-start..` ) 的简写)：同理
5. [grid-gap](####1.2、grid-row-gap / grid-column-gap(缝隙)) (3和4的简写)	5. [grid-column](####2.2、grid-column / grid-row(`grid-column-end:..` , `grid-row-start..` ) 的简写) (1和2的简写形式)
6. grid-template-areas：区域的划分，配合项目属性的`grid-area`来定位合并`item`	6. [grid-row](####2.2、grid-column / grid-row(`grid-column-end:..` , `grid-row-start..` ) 的简写) (3和4的简写形式)
7. grid-auto-flow:	7. [grid-area](####2.3、grid-area/结合grid Container的 grid-template-areas)：和grid-template-area搭配使用定位整合item
8. [justify-items](####1.5、justify-items(水平方向) / align-items (垂直方向))	8. [justify-self](####2.4、justify-self / align-self / place-self)
9. [align-items](####1.5、justify-items(水平方向) / align-items (垂直方向))	9. [align-self](####2.4、justify-self / align-self / place-self)
10. place-items(8和9的简写)	10. [place-self](####2.4justify-self / align-self / place-self) (8和9的简写形式)
11. [justify-content](####1.7、justify-content (水平方向) / align-content (垂直方向))
12. [align-content](####1.7、justify-content (水平方向) / align-content (垂直方向))
13. place-content(11和12的简写)
14. [grid-auto-columns：设置在没有row行高的时候值为auto的item的列宽](####1.8、grid-auto-columns / grid-auto-rows)
15. [grid-auto-rows](####1.8、grid-auto-columns / grid-auto-rows)：同理

1、容器属性

1.1、grid-template-columns/rows

你想要多少行或者列，就填写相应属性值的个数，不填写，自动分配

grid-template-columns: 100px 100px 100px;
grid-template-rows:

1. repeat()函数

repeat()，第一个参数是重复的次数，第二个参数是所要重复的值

grid-template-columns: 100px 100px 100px;
/*第二个参数也可以设置百分比*/
grid-template-columns: repeat(3, 100px);

auto-fill/fit(自动填充)

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

grid-template-columns: repeat(auto-fill, 100px);
- 根据container的宽度auto或者max/min-width的自适应情况，自动决定要分配几列
- rows和columns同时设置的话没有反应
auto-fill

width:auto 的使用repeat(auto-fill, minmax(100px, 1fr));的情况，一行如果没有占满，剩下的会用同等份大小的空白网格填充

auto-fit

会折叠空白的网格

2. fr(均等分属性)

fr，为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为”片段”）

理解：当设置固定列的时候，1fr就是平均分配剩余的空间，均等分大小

比较像flex-grow

grid-template-columns: repeat(4, 1fr); //宽度平均分成4份

3. minmax()(最大最小值函数)

minmax()，函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值

grid-template-columns: 1fr minmax(150px, 1fr);

4. auto

auto，表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px

5. 网格线

网格线，可以用方括号定义网格线名称，方便以后的引用

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

1.2、grid-row-gap / grid-column-gap(缝隙)

一句话解释就是，item（项目）相互之间的距离

现在已经去掉了grid前缀了

column-gap: 20px;
row-gap: 20px;
gap: 20px;

注意：根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap 写成column-gap和row-gap，grid-gap写成gap

1.3、grid-template-areas

一个区域由单个或多个单元格组成，由你决定 (具体使用，需要在项目属性里面设置)

进行区域的划分

grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';

grid-template-areas: 'a a a'
           'b b b'
           'c c c';

grid-template-areas: 'a . c'
           'd . f'
           'g . i';

区域不需要利用，则使用”点”（.）表示
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

1.4、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行（就是子元素的排放顺序）

grid-auto-flow: row [dense]/column [dense];
dense（密集的）

充分利用空间

当元素无法在同一行放置的时候会换行，会存在剩余的空间

使用dense，按照放置顺序找到后面 与空白大小相等的元素 来填充空白的空间

1.5、justify-items(水平方向) / align-items (垂直方向)

设置单元格内容的水平和垂直的对齐方式

justify-items: start | end | center | stretch;

1.6、place-items

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

place-items: <align-items> <justify-items>

1.7、justify-content (水平方向) / align-content (垂直方向)

设置整个内容区域的水平和垂直的对齐方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

1.8、grid-auto-columns / grid-auto-rows

当item项目宽高是auto的时候会由这个两个属性设置

2、项目属性

2.1、grid-column-start / grid-column-end , grid-row-start / grid-row-end

一句话解释，用来指定item的具体位置, 根据在哪根网格线

列方向4根网格线，第一个项目占用了从第一根到第三根

grid-column-start: 1;
- span ：是指你要跨越几个网格
- 例：跨越两个 grid-column-start: span 2;
grid-column-end: 3;
- span：和上面效果一样
grid-row-start: 1;
grid-row-end: 3;

理解：就相当于合并单元格，值是需要在那个网格线 内合并区域，使用grid-column-start和grid-column-end来指定开始和结束位置 grid-row-start和grid-row-end同理

2.2、grid-column / grid-row(`grid-column-end:..` , `grid-row-start..` ) 的简写

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式

中间使用 / 来区分开始位置和结束位置

grid-column: 1 / 3;
grid-column-start: 1;
grid-column-end: 3;

2.3、grid-area/结合grid Container的 grid-template-areas

指定项目放在哪一个区域

grid-template-areas:'a a a’
          'b b b’
          'c c c';
grid-area: b;

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

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
grid-area: 1 / 1 / 3 / 3;

2.4、justify-self / align-self / place-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，

但只作用于单个项目 (水平方向)
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，

也是只作用于单个项目 (垂直方向)

justify-self: center; justify-self: start | end | center | stretch;

再次提醒：place-self属性是align-self属性和justify-self属性的合并简写形式 place-self: center center;