一.什么是grid布局

image.png

二.基本概念

image.png

2.1 容器属性

image.png

2.2 项目属性

image.png

三 .容器属性

1.grid-template-*

image.png

​

image.png

2.grid-auto-flow

image.png

3.justify-items/align-items

image.png

4.justify-content/align-content

image.png

image.png

5.grid-auto-columns/grid-auto-rows

image.png

四. 项目属性

1.grid-column-start/grid-column-end grid-row-start/grid-row-end

image.png

image.png

image.png

image.png

2.grid-area

image.png

3.justify-self/align-self

image.png