CSS基础(九) --- 网格布局
网格布局(Grid)
-
含义: 将网页划分成一个个网格,可以任意组合不同的网格,从而实现各种组合布局
-
与flex布局异同
-
相同点: 都可以指定容器内多个项目的位置
-
不同点:
-
flex布局是轴线布局,只能指定项目针对轴线的位置(一维布局)
-
Grid布局则是将容器划分成'行'和'列',产生单元格,然后把单元格分配给项目(二维布局)
-
-
-
CSS属性
-
容器属性
-
项目属性
-
display:grid /*容器从上而下排列(经常使用)*/
display:inline-grid /*容器从左向右排列(很少用到)*/
......
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
display: grid; /*用调试工具可以看出效果*/
}
</style>
......
<body>
<div></div>
</body>
-
注意事项:
-
若元素使用 grid 布局,则该元素自动变成块级元素(可以对其设置宽高)
-
若元素使用 inline-grid 布局,则该元素自动变成行内元素(但可以对其设置宽高)
-
......
<style type="text/css">
.box { /*对span设置宽高*/
width: 200px;
height: 200px;
background: red;
display: grid;
}
</style>
......
<body>
<span>1</span>
<span class="box">2</span> <!--独占一行-->
<span>3</span>
</body>
......
<style type="text/css">
.box { /*对行内元素span设置宽高*/
width: 200px;
height: 200px;
background: red;
display: inline-grid;
}
</style>
......
<body>
<span>1</span>
<span class="box">2</span> <!--三个元素在同一行-->
<span>3</span>
</body>
- 行和列的划分
- 规定行属性: grid-template-row
- 规定列属性: grid-template-column
- 三行三列示例:
grid-template-row: 200px 200px 200px
grid-template-column: 200px 200px 200px
......
div {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:200px 200px 200px; /*调试工具可以看出3行3列的效果*/
grid-template-columns: 200px 200px 200px;
}
......
<div></div>
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:200px 200px 200px;
grid-template-columns: 200px 200px 200px;
}
......
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
- 调用 repeat函数,实现'简写'
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/* grid-template-rows:200px 200px 200px;
grid-template-columns: 200px 200px 200px; */
grid-template-rows:repeat(3,200px); /*简写*/
grid-template-columns:repeat(3,200px);
}
- auto-fill(常用),指定行/列像素,让表格自己计算
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-columns:repeat(3,200px); */
grid-template-rows:repeat(auto-fill,200px);
grid-template-columns:repeat(auto-fill,200px);
}
- fr片段(单位),类似于"flex:1",占满剩余的空间
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:100px 1fr 300px; /*中间部分占满剩余的空间*/
grid-template-columns: 100px 1fr 300px;
/*grid-template-rows:100px 1fr 1fr;第一行100px,剩下的空间其他两行均分*/
}
- minmax(),最小和最大像素
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/*第一行最小占100px,最大占200px(根据其他行自动选择哪个值)*/
grid-template-rows:minmax(100px,200px) 200px 300px;
grid-template-columns: repeat(3,200px);
/*如果是下面这种情况,第三行会超出容器,溢出(因为空间不够分)*/
grid-template-rows:minmax(100px,200px) 200px 400px;
}
- auto,类似"1fr",占满剩余的空间
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/*auto占满剩余的空间*/
grid-template-rows:100px auto 200px;
grid-template-columns: 100px auto 200px;
}
列间距与行间距
- 引入demo,行列之间挤在一起
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:repeat(3,200px);
grid-template-columns:repeat(3,200px);
}
.box div {
border: 1px solid red; /*单元格之间添加边框*/
}
......
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
- 设置行/列之间的"间距"
......
div.box {
......
grid-template-rows:repeat(3,200px);
grid-template-columns:repeat(3,200px);
grid-row-gap:20px; /*设置间距,第三行被挤出容器*/
grid-column-gap:20px;
}
.box div {
border: 1px solid red;
}
- 如何解决被挤出的问题? 行/列像素减少20px即可
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/*第二/三行由之前的200px修改为180px,刚好占满容器*/
grid-template-rows:200px 180px 180px;
grid-template-columns: 200px 180px 180px;
grid-row-gap:20px;
grid-column-gap:20px;
/*grid-template-rows:200px 200px auto; 也可以使用auto,让系统自己占满剩余空间
grid-template-columns: 200px 200px auto;*/
}
- 行/列 间距简写
/* grid-row-gap:20px;
grid-column-gap:20px; */
grid-gap: 20px 20px;
- 或者
row-gap:20px;
column-gap:20px;
- 或者(推荐写法)
gap:20px 20px;
网格之间的合并: grid-template-areas
- 骨架:三行三列均分
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:repeat(3,200px);
grid-template-columns:repeat(3,200px);
}
......
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
- 单元格合并demo演示
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows:repeat(3,200px);
grid-template-columns:repeat(3,200px);
grid-template-areas: 'a b c'
'e e g' /*4,5网格合并在一起*/
'h i j';
}
.box div:nth-child(5) {
grid-area:e; /*占位,注意字母 e 不是字符串形式,格式易错*/
}
- 案例演示: 3行6列,图片占据不同的网格(合并),骨架如下
......
div.box {
width: 600px;
height: 600px;
border: 5px solid gray;
margin: 0 auto;
display: grid;
grid-template-rows:repeat(3,100px); /*3行6列*/
grid-template-columns:repeat(6,100px);
}
......
<div class="box">
</div>
......
<style type="text/css">
div.box {
width: 600px;
height: 300px;
border: 5px solid gray;
margin: 0 auto;
display: grid;
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(6,100px);
grid-template-areas: 'a a a a b b'
'a a a a c c'
'd d e f c c';
}
.box img { /*子图片的宽高,自适应父容器*/
width: 100%;
height: 100%;
}
.box img:nth-child(1) {
grid-area:a;
}
.box img:nth-child(2) {
grid-area:b;
}
.box img:nth-child(3) {
grid-area:c;
}
.box img:nth-child(4) {
grid-area:d;
}
.box img:nth-child(5) {
grid-area:e;
}
.box img:nth-child(6) {
grid-area:f;
}
</style>
......
<body>
<div class="box">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/6.jpg" alt="">
<img src="./img/7.jpg" alt="">
</div>
</body>
浙公网安备 33010602011771号