响应式布局之grid网格布局

目录

 声明网格布局格式

1.加在容器上的属性

1、grid-template-columns,grid-template-rows

grid-template-*相关

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

2.auto-fill 当单元格大小固定时，容器大小不固定时这个属性就会自动填充

3.fr 为了方便表示比例关系，网格布局提供了fr关键字(fraction片段)

4.minmax(最大值,最小值)函数产生一个长度范围，表示长度就在这个范围之中

5.auto 表示宽度自动

6.网格线 可以用方括号定义网格线名称，方便后期定位引用

2.网格间距grid-gap

3、容器属性grid-template-areas

4、grid-auto-flow(了解)

​

5:对齐方式 justify-items和align-items

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

place-items是以上两个属性的合并简写形式

6：对齐方式justify-content/align-content

7：grid-auto-columns/grid-auto-rows

2.加在项目上的属性

指定项目具体位置

 属性简写:

grid-column:1/3;

grid-row:1/3

2.grid-area

3:justify-self/align-self/palce-self

---

内置布局 更加灵活好用 更加适合于 多行多列的布局 相对于弹性盒兼容性差(ie11以及以上)

 声明网格布局格式

display:grid;//默认网格块类型

 display:inline-grid;

1.加在容器上的属性

---

1、grid-template-columns,grid-template-rows

   需要3列3行  每列宽度为100px

grid-template-columns:100px 100px 100px;规定项目在容器排三列，每列100px宽度
grid-template-rows:100px 100px 100px 100px;规定项目在容器排四行，每行100px宽度

grid-template-*相关

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

grid-template-columns:repeat(个数,数值);
grid-template-columns:repeat(3,100px);
grid-template-columns:repeat(2,100px 80px 200px);
                                      100px 80px 200px 100px 80px 200px; 6列  以3份为一组一样

2.auto-fill 当单元格大小固定时，容器大小不固定时这个属性就会自动填充

grid-template-columns:repeat(auto-fill,100px);
自动填充个数 一般是用在列宽确定 列数不确定的情况

3.fr 为了方便表示比例关系，网格布局提供了fr关键字(fraction片段)

grid-template-columns:repeat(4,1fr);宽度均分为4份
grid-template-columns:1fr 2fr 3fr;

4.minmax(最大值,最小值)函数产生一个长度范围，表示长度就在这个范围之中

grid-template-columns:minmax(90px,2fr) 8fr;minmax(90px,2fr) 如果第一列取值>90px那么取容器的2份 如果2份取值<90px那么第一列的宽度就为90px
grid-template-columns:1fr minmax(150px,1fr);最小不会小于150px

5.auto 表示宽度自动

grid-template-columns:100px auto 100px; 中间列宽度自动取剩余的宽度或者高度(auto将取容器的宽度-100px-100px)

6.网格线 可以用方括号定义网格线名称，方便后期定位引用

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

2.网格间距grid-gap

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

新的网格布局把该属性的grid-取消

3、容器属性grid-template-areas

一个区域由单个或多个单元格组成，由你决定(具体使用，需要