Grid网格布局笔记

Grid网格布局笔记

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

容器属性

1.grid-template-columns

2.grid-template-rows

a. 想要多少行或者列，就填写相应属性值的个数
如
grid-template-columns: 100px 100px 100px;

b. repeat()，第一个参数是重复的次数，第二个参数是所要重复的值
如
grid-template-columns: repeat(3, 100px);

c. auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性可以自动填充
如
grid-template-columns: repeat(auto-fill, 100px);

d. fr关键字（fraction 的缩写，意为"片段"）
如
grid-template-columns: repeat(4, 1fr); //宽度平均分成4份
e.  minmax()，长度范围，最小值和最大值
如
grid-template-columns: 1fr minmax(150px, 1fr);

f.  auto，由浏览器自己决定长度
如
grid-template-columns: 100px auto 100px;

 g. 网格线，可以用方括号定义网格线名称，方便以后的引用
 如
 grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

3.grid-row-gap

4.grid-column-gap

5.grid-gap (3和4的简写)

item（项目）相互之间的距离
如：
grid-column-gap: 20px;
grid-row-gap: 20px;
简写成grid-gap: 20px;
根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

6.grid-template-areas

一个区域由单个或多个单元格组成，自己决定 (具体使用，需要在项目属性里面设置)
如：grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
 区域不需要利用，则使用"点"（.）表示
 如：grid-template-areas: 'a . c'
                          'd . f'
                          'g . i';          
 区域的命名会影响到网格线。每个区域的起始网格线，

会自动命名为区域名-start，终止网格线自动命名为区
域名-end

7.grid-auto-flow

子元素的排放顺序（默认行）
如：grid-auto-flow: column;
dense 自动尽量利用空间排放
如：grid-auto-flow: row dense;

8.justify-items
9.align-items
10.place-items(8和9的简写)

单元格内容的水平和垂直的对齐方式
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items:  ;

11.justify-content
12.align-content
13.place-content(11和12的简写)

整个内容区域的水平和垂直的对齐方式
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:  ;

14.grid-auto-columns
15.grid-auto-rows

设置多出来的项目宽和高
如：grid-auto-rows: 50px;

项目属性

1.grid-column-start
2.grid-column-end
3.grid-row-start
4.grid-row-end
5.grid-column (1和2的简写形式)
6.grid-row (3和4的简写形式)

指定item的具体位置, 根据在哪根网格线
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
简写
grid-column: 1 / 3;
span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
如：grid-column-start: span 2;等同于grid-column-start: span 2;
表示，该项目的左边框距离右边框跨越2个网格。
使用这些属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

7.grid-area

指定项目放在哪一个区域
grid-area: b; //之前grid-template-areas命名的
还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
如：
grid-area: 1 / 1 / 3 / 3;
等同于
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

8.justify-self

设置单元格内容的水平位置，与justify-items属性的用法完全一致，但只作用于单个项目 (水平方向)
justify-self: start | end | center | stretch;

9.align-self

设置单元格内容的垂直位置，跟align-items属性的用法完全一致，也是只作用于单个项目 (垂直方向)
align-self: start | end | center | stretch;

10.place-self (8和9的简写形式)

align-self属性和justify-self属性的合并简写形式
如：
place-self: center center;