概述
1.flex布局是一维布局,grid布局是二维布局.
2.flex考虑的是项目按行或列布局,grid布局需要同时考虑行和列.
flex布局:
grid布局:
基本概念
grid-template-columns可以设置容器的列数以及相应列的宽度
grid-template-rows可以设置容器的行数以及相应行的高度
可以按照像素设置行列的宽高,也可以按照比例来设置(fr)
容器属性
与flex属性相似
1.justify-items
单元格内元素在单元格中的横向排列方式(包括start,center,end等)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: start;
/* align-items: center; */
}
.item{
border: 1px solid red;
}
2.align-items
单元格内元素在单元格中的纵向排列方式(包括start,center,end等)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/*justify-items: start;*/
align-items: center;
}
.item{
border: 1px solid red;
}
3.justify-content
整个单元格在整个容器中的横向排列方式(包括start,center,end等)
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: start; */
/* align-items: center; */
justify-content: center;
}
.item{
border: 1px solid red;
}
4.align-content
整个单元格在整个容器中的纵向排列方式(包括start,center,end等)
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: start; */
/* align-items: center; */
/* justify-content: center; */
align-content: center;
}
.item{
5.grid-auto-columns
设置溢出列的尺寸
6.grid-auto-rows
设置溢出行的尺寸
项目属性
1.grid-column
合并单元格的列
<div class="container">
<div class="big item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: start; */
/* align-items: center; */
/* justify-content: center; */
align-content: center;
}
.big{
grid-column: 1 / 3;
}
.item{
border: 1px solid red;
}
2.grid-row
合并单元格的行
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: start; */
/* align-items: center; */
/* justify-content: center; */
align-content: center;
}
.big{
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item{
border: 1px solid red;
}
3.justify-self
与justify-item类似,区别是justify-items作用在整个容器,justify-self作用在具体的元素
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* justify-items: start; */
/* align-items: center; */
/* justify-content: center; */
align-content: center;
}
.big{
grid-column: 1 / 3;
grid-row: 1 / 3;
justify-self: start;
}
.item{
border: 1px solid red;
}
4.align-self
与align-item类似,区别是align-items作用在整个容器,align-self作用在具体的元素
举例
1.用grid布局画出一个九宫格
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
width: 800px;
height: 500px;
margin: 200px auto;
border: 1px solid red;
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item{
border: 1px solid red;
}
2.实现一个页面布局效果
<div class="container">
<div class="item header">header</div>
<div class="item doc">doc</div>
<div class="item blogs">blogs</div>
<div class="item videos">videos</div>
<div class="item aside">aside</div>
<div class="item footer">footer</div>
</div>
.container{
display: grid;
height: 800px;
width: 800px;
margin: 200px auto;
border: 1px solid red;
grid-template-columns: 400px 150px;
grid-template-rows: 50px 100px 100px 100px 50px;
}
.item{
border: 1px solid red;
}
.header{
grid-column: 1 / 3;
}
.aside{
grid-row: 2 / 4;
grid-column: 2 / 3;
}
.blogs{
}
.footer{
grid-column: 1 / 3
}
.videos{
grid-template-columns: 1 / 2;
}