grid 布局
grid布局含义:
grid布局,也被称之为网格布局,是将页面中的父元素划分成一个个小的格子,然后通过这些小的格子进行合并来制作出各种不同的网站效果.(如下图所示)
如何触发网格呢:
给父元素添加display属性,并且将取值设置成:grid/inline-grid.
grid:
代表的是块状网格,默认独占一行,类似于块级元素.
inline-grid:
代表的是行内块网格,与行内块元素类似
触发网格有哪些特点?
划分行列之后,才能将里面的区域进行划分,才能显示网格,才能进行合并
grid布局与flex布局异同,网格与表格区别?
grid与flex布局:
相同点:
都有容器和项目之分;
不同点:
flex被称之为一维布局,也叫做轴线布局;
grid被称之为二维布局,有行列之分
grid与表格:
相同点:
都有行列之分,都能划分格子;
不同点:
表格嵌套的级别比较深
grid通过容器和项目完成布局
划分行列属性
行属性: grid-template-rows:
列属性: grid-template-columns
重点我们研究的是他们的取值
注意事项:后面跟几组值,就代表了几行几列
取值1:纯数值
{
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
}
代表的是:
1)划分一个3行3列的网格
2)每一行行高:100px;
3)每一列列宽:100px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html>取值2:百分比
{
grid-template-rows:20% 30% 50%;
grid-template-columns:100px 100px 100px;
}
代表的是:
1)划分一个3行3列的网格;
2)每一行行高:分别是总高的:20% 30% 50%;
3)每一列列宽:100px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 20% 30% 50%; grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html>取值3:重复函数
重复函数:使用的是 repeat(num1,num2)函数
两个参数
参数1: 重复次数
参数2: 需要重复的数值
{
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(5,20%);
}
代表的是:
1)划分一个3行5列的网格;
2)每一行行高:100px;
3)每一列列宽:均占总宽度的20%;
4)注意:repeat函数,第一个参数是重复的次数,第二个参数为需要重复的数值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 20%); } </style> </head> <body> <div class="box"></div> </body> </html>取值4:自动填充
自动填充:auto-fill
应用在重复函数中,代表的是根据需要重复的数值,进行自动填充数量;(例如:以列宽为例子)
{
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(auto-fill,30%);
}
备注:在这里auto-fill会将列数宽度按照30%的宽度进行划分;盛放不下的话则不再划分列数
{
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(auto-fill,20%);
}
备注:在这里auto-fill会将列数宽度按照20%的宽度进行划分;盛放不下的话则不再划分列数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(auto-fill, 30%); } </style> </head> <body> <div class="box"></div> </body> </html>取值5:auto自动
auto自动代表的是,占剩余宽度和剩余高度的所有，如下图所示
{
grid-template-rows:100px auto 100px;
grid-template-columns:auto 100px 100px;
}
代码的含义是:
设置一个3行3列的网格第1,3行固定高度100px;
第2行高度自适应第2,3列固定宽度100px; 第1列宽度自适应;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px auto 100px; grid-template-columns: auto 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html>取值6:fr片段划分
片段划分: 为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为“片段")
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
{
grid-template-rows:1fr 2fr 3fr;
grid-template-columns:100px 100px 100px;
}
代码含义:
划分3行3列的网格
其中行高总共划分成6份,
第1行占1/6:
第2行占2/6
第3行占3/6
每一列的宽度为:100px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html>取值7:minmax()
minmax(num1,num2)函数,可以理解成最小最大值函数,
函数中两个参数:
参数1代表的是最小值,
参数2代表的是最大值
如果条件允许,则一直使用最大值,
如果条件不满足则使用中间值,
如果剩下的距离不足以显示距离大小,则使用最小值
{
grid-template-rows:100px 100px minmax(100px,200px);
grid-template-columns:100px 100px 100px;
}
{
grid-template-rows:200px 200px minmax(100px,200px);
grid-template-columns:100px 100px 100px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px 100px minmax(100px, 200px); grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 200px 200px minmax(100px, 200px); grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="box"></div> </body> </html>1