- 一维布局flex:选择横向或者纵向
- 二维布局grid:两个方向同时布局
1.容器 container
- 成为container:在父元素上加 grid
.container{
display:grid;/*or inline-grid*/
}
- 设置父元素的行和列(称为新时代的表格)
方法一:宽度划分
.container{
display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows:60px 300px 100px;
/*划分格子,行与列的宽度,三行五列*/
/*具体宽度根据格子划分的内容来定*/
}
方法二:份数划分(主要用来做平均布局)
.container{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows:1fr 1fr;
/*划分格子,行与列的份数,两行三列*/
/*份数可以自己随便调整*/
border:1px solid red;
}
可以在任意连续格子中放div
项目 item
- 设置范围(两种方法均按照线条命名来)
.a{
grid-row-start: 1;/*数字代表格子线,1表示第1根线*/
grid-row-end: 2;/*表示横向第1根到第2根线*/
grid-column-start: 1;
grid-column-end: 6;/*竖线是第1根到第6根*/
}/*a来表示导航栏*/
平均布局
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
{margin:0;padding:0;box-sizing: border-box;}
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
width: 800px;
border:1px solid red;
grid-gap: 12px;/*直接给出中间的宽度就会平均分布,包括上下左右*/
}
.image{
width: 191px;
height: 191px;
background: grey;
}
高级技巧:grid-template-areas
直接用来快速搭建框架
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">ad</div>
<footer>footer</footer>
</div>
</body>
{margin:0;padding:0;box-sizing: border-box;}
.container{
min-height: 100vh;/*最小高度占满整个屏幕*/
display: grid;
grid-template-rows: 60px auto 60px;/*设置每一行的高度*/
grid-template-columns: 100px auto 100px;/*设置每一列的宽度*/
grid-template-areas:
"header header header"
"aside main ad"
"footer . footer"
/*直接通过文字进行分区,非常方便,一一对一个*/
/*不想占居的空间直接用 . 来占位*/
}
.container>*{
border: 1px solid red;
}/*星号表示container里面的所有内容*/
.container> header{
grid-area: header;/*占据所有命名为header的区域*/
}
.container> aside{
grid-area: aside;/*占据所有命名为header的区域*/
}
.container> .ad{
grid-area: ad;/*占据所有命名为header的区域*/
}
.container> footer{
grid-area: footer;/*占据所有命名为header的区域*/
}
间隙 gap
.container{
grid-column-gap: 10px;/*竖直方向间隙*/
grid-row-gap: 10px;
}
案例
不规则布局
<div class="demo">
<div class="image bigImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
</div>
</body>
*{margin:0;padding: 0; box-sizing:border-box;}
.demo{
display: inline-grid;/*内联元素,可以包裹住小范围内容,不会扩展全行*/
border: 1px solid red;
grid-template-rows: 240px repeat(4,120px);
/*4个120px重复*/
grid-template-columns:250px 250px;
grid-template-areas:
"big mid1"
"big mid2"
"sm1 mid2"
"sm2 mid3"
"sm3 mid3";
}
.demo > .image:first-child{
grid-area: big;
border: 1px solid red;
}
.demo > .image:nth-child(2){
grid-area: sm1;
border: 1px solid red;
}
.demo > .image:nth-child(3){
grid-area: sm2;
border: 1px solid red;
}
.demo > .image:nth-child(4){
grid-area: sm3;
border: 1px solid red;
}
.demo > .image:nth-child(5){
grid-area: mid1;
border: 1px solid red;
}
.demo > .image:nth-child(6){
grid-area: mid2;
border: 1px solid red;
}
.demo > .image:nth-child(7){
grid-area: mid3;
border: 1px solid red;
}