4.16网格布局

/*隐藏滚动条：

元素: : -webkit-scrollbar [display :none]
chrome和 safari
.element: : -webkit-scrollbar f width: ø ! important ]
IE 10+
.element f -ms -overflow-style: none; ]
Firefox
 .element f overflow: - moz - scrollbars -none; ]

grid布同针对的足子元素布局。
1.形成一个网格结构(父元元素添加):

display grid;

2:划分行和列

grid-template-columns:

grid- template- rows:

如果是3个值代表3行或3列，能接受具体的px也能是H分比划分行和列的时候的关键字、和方法:

a:repeat(重复的次数，重复的值)

b:auto-fill关键字(”自动填充)
c:fr关键字(列宽片段)

d:minmax(最小值,最大值)

3:grid-gap:20px 30px;简写形式

4:指定某个项目所在的区域:

grid- template-areas:"a a a " ". . b " "c c  . "

 

注:grid-template-areas必须和 grid- area共同使用

grid-area放在具体某个项目里面的,指定项目名称。

5:指定顺序:

grid-auto- flow : row/ column

6:内容在项目里面的对齐方式:

place-items :

注:网格内部的内容固定的大小古分比的时候左右的对齐方式会产生BUG