grid布局 :针对的是子元素布局。
1:形成一个网格结构(父元素添加):
display:grid;
2: 划分行和列
grid-template-columns:
grid-template-rows:
补:如果是3个值 代表3行或3列 能接受具体的px 也能是百分比
3:划分行和列的时候的关键字 和 方法:
a: repeat(重复的次数,重复的值)
b: auto-fill关键字( 自动填充 )
c: fr关键字(列宽片段)
d: minmax(最小值,最大值)
4: grid-row-gap:20px 行间距
grid-column-gap:20px 列间距
grid-gap:20px 30px; 简写形式
5: 指定某个项目所在的区域:
grid-template-areas:
'a a a'
'. . b'
'. c c';
注: grid-template-areas 必须和 grid-area共同使用
grid-area放在具体某个项目里面的,指定项目名称.
6:指定顺序:
grid-auto-flow:row/column
7: 内容在项目里面的对齐方式:
①justify-items: start | end | center | stretch;
②align-items: start | end | center | stretch;
③place-items:
注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG
8:
①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:; 控制整个网格在父元素里面的对齐方式.
9:指定项目的四个边框,分别定位在哪根网格线。
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。