Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
首先要分清楚容器和项目
- 采用网格布局的区域,称为"容器"(container)
- 容器内部采用网格定位的子元素,称为"项目"(item)
一、 Grid 布局的容器属性:
div { display: grid; }
默认情况下,容器元素都是块级元素,但也可以设成行内元素。 div { display: inline-grid; }
注意,设为网格布局以后, 容器子元素(项目)的 float、display: inline-block、display: table-cell、vertical-align和column-* 等设置都将失效。
二、划分行和列。
grid-template-columns 属性定义每一列的列宽,
grid-template-rows 属性定义每一行的行高。
.container {
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
/*或者*/
.container {
display: grid;
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
(一)repeat()接受两个参数,第一个参数是重复的次数, 第二个参数是所要重复的值。 重复某种模式也是可以的。
.container{
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
.container{
display: grid;
grid-template-columns: repeat(2, 100px 20px 80px);
/*上面代码定义了6列,第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px*/
grid-template-rows: repeat(3, 33.33%);
}
(二)auto-fill 关键字:自动填充
.container{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
/*每列宽度100px,然后自动填充,直到容器不能放置更多的列 */
(三)grid-gap属性,grid-row-gap 属性,grid-column-gap 属性
grid-row-gap属性设置行与行的间隔(行间距)
grid-column-gap属性设置列与列的间隔(列间距)
(四)grid-column-start 属性:左边框所在的垂直网格线
grid-column-end 属性:右边框所在的垂直网格线
grid-row-start 属性:上边框所在的水平网格线
grid-row-end 属性:下边框所在的水平网格线
(五)span关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格
.item-1 { grid-column-start: span 2; }
/*或者*/
.item-1 { grid-column-end: span 2; }
例子:
<div class="box_1">
<div class="g1">AAA</div>
<div class="g2">BBB</div>
<div class="g3">CCC</div>
<div class="g4">DDD</div>
<div class="g5">EEE</div>
<div class="g6">FFF</div>
<div class="g7">GGG</div>
<div class="g8">HHH</div>
<div class="g9">III</div>
</div>
@charset "utf-8";
/* CSS Document */
*{
font-size:24px;
}
.g1{
background:#F99;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.g2{
background: #FC0;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.g3{
background: #6CF;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.g4{
background: #090;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.g5{
background: #F9C;
}
.g6{
background: #F30;
}
.g7{
background: #FF3;
}
.g8{
background: #F63;
}
.g9{
background: #F60;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.box_1{
font-family:"微软雅黑";
font-size:24px;
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 20% 25% 25% 10% 10%;
gap: 5px;
}