CSS-网格化布局

网格化布局

display:grid;

 

基本概念：

1.容器、项目、

2.行、列 

3.单元格

4.网格线

5.4*4 会有5根水平网格线、5根垂直网格线

容器属性：容器属性、项目属性

容器属性

1.display:grid; display:inline-grid;

2.grid-template-columns\grid-template-rows 比如 grid-template-column:33.33% 33.33% 33.33%; grid-template-columns:repeat(4,25%);

涉及相关关键字：repeat auto-fill fr(比例) minmax(100px,1fr) auto

3.row-gap column-gap grid-gap

4 grid-temlate-area

5.grid-auto-flow:column 默认row

6.justify-items,align-items,place-items合并写法： place-items:start end;

7.justify-content,align-content,place-content

8.grid-auto-columns和 grid-auto-rows 

项目属性

1.grid-column是grid-column-start和grid-column-end的间歇

2.grid-area

3.justify-self、align-self

学习网站：阮一峰的网格化布局

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html