Flex 布局和 Grid 布局都是 CSS3 中新增的布局方式
区别:
- Flex 是一维布局系统,适合做局部布局,比如导航栏组件。
- Grid 是二维布局(网格布局)系统,通常用于整个页面的规划。
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
容器和项目:我们通过在元素上声明 display:grid
来创建一个网格容器,这个元素的所有直系子元素将成为网格项目。
Grid
布局属性可以分为两大类,一类是容器属性,一类是项目属性。
容器属性:
grid-template-columns 属性设置列宽,
grid-template-rows 属性设置行高
例:
<body>
<div class="container">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
</div>
</body>
.container{
display: grid;
border: 3px solid red;
/* 三个值代表设置三列并且值为200px */
/* 声明列的宽度 */
/* grid-template-columns: 200px 200px 200px; */
grid-template-columns: repeat(3, 200px);
/* 声明行的高度 */
grid-template-rows: repeat(4, 100px);
/* 声明行间距和列间距 */
grid-gap: 20px;
}
.one {
background: #19CAAD;
}
.two {
background: #8CC7B5;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
项目属性:
1、grid-column-start
- 项目左边框所在的垂直网格线
grid-column-start: 1; // 1为左边框从第一根开始
2、grid-column-end
- 项目右边框所在的垂直网格线
grid-column-end: 2; // 2为右边框从在二根结束
简写:
grid-column: 1 / 2;
3、grid-row-start
- 项目上边框所在的水平网格线
grid-row-start: 1; // 1为上边框从第一根开始
4、grid-row-end
- 项目下边框所在的水平网格线
grid-row-end: 2; // 2为下边框从在二根结束
简写:
grid-row: 1 / 2;
例:
.one {
background: #19CAAD;
/* grid-column-start: 1;
grid-column-end: 3; */
grid-column: 1/3;
/*
grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1/3;
}
.two {
background: #8CC7B5;
/* grid-column-start: 2;
grid-column-end: 4; */
grid-column: 2/4;
/*
grid-row-start: 1; */
grid-row: 13;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}