grid布局即网格布局(二维),flex布局(一维)
<div class="wrap">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
</div>
.wrap{
display:grid;
}
1.grid-template-columns属性设置列宽, grid-template-rows属性设置行高
①
grid-template-columns:200px ,300px,400px;
/* 声明了三列,宽度分别为 200px 300px 400px */
grid-template-rows:200px ,300px,400px;
/* 声明了三行,高度分别为 200px 300px 400px */
② fr将空间分成多个等分空间
grid-template-rows: 1fr 2fr 3fr;
三行,高度比1:2:3;
③ repeat():简化重复的值。该函数接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。
grid-template-rows: 1fr 1fr 1fr;
等价于grid-template-rows: repeat(3,1fr);
④minmax():函数接受两个参数,分别为最小值和最大值。
grid-template-columns:minmax(200px,500px);
/* 宽度最小200px,最大500px*/
⑤auto:由浏览器决定长度
grid-template-columns:200px,auto,200px;
第一,三列为 200px,中间由浏览器决定长度
2.grid-row-gap :行间隙 grid-column-gap:列间隙 grid-gap :行,列间隙
grid-row-gap :40px; 行间隙40px
grid-gap:40px; 列间隙40px,行间隙40px
grid-column-gap:40px; 列间隙40px
3.网格模板
grid-template-areas: 'header header header'
/* 第一行header独占一行,因为有三列,所以要写3个header */
'artical artical aside'
/* 第二行artical与aside宽为2:1 */
'box-1 box-2 box-3'
'footer footer footer';
.header{
grid-area: header;
border:2px solid red;
}
//.header放置在header模板上
4 . justify-content 项目在容器里面的水平位置
align-ittems 项目在容器里面的竖直位置
start :对齐起始边框
end :对齐结束边框
center : 居中
space-around , space-between , stretch和flex布局一样
5.跨行 跨列
grid-column-start :左边框所在的垂直网格线
grid-column-end :右边框所在的垂直网格线
grid-row-start :上边框所在的水平网格线
grid-row-end :下边框所在的水平网格线