Grid 真的很好用
先上图=>
Grid的基本概念
- 采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)
- 容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
- 行和列的交叉区域,称为"单元格"(cell)。
- 划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
用图片来解释一下(通俗易懂)
容器属性(图中黄色部分)
属性名 | 属性值 | 描述 |
---|---|---|
dispaly | grid | 指定一个容器采用网格布局。 |
grid-template-columns | 绝对单位,百分比 | 定义每一列的列宽。 |
grid-template-rows | 绝对单位,百分比 | 定义每一行的行高。 |
grid-column-gap 属性 | 绝对单位 | 列间隔 |
grid-row-gap 属性 | 绝对单位 | 行间隔 |
grid-gap | <行间隔><列间隔>(默认列等于行) | grid-column-gap和grid-row-gap的合并简写形式 |
justify-items 属性 | start(对齐单元格的起始边缘)end(对齐单元格的结束边缘) ,center(单元格内部居中) stretch(拉伸,占满单元格的整个宽度(默认值)) | 设置单元格水平位置 |
align-items 属性 | start,end ,center , stretch | 设置单元格垂直位置 |
place-items属性 | <水平位置><垂直位置> (默认垂直属性等于水平属性) | align-items属性和justify-items属性的合并简写形式。 |
grid-auto-flow 属性 | row,column,row dense,column dense | 排序方式 默认row |
==》详讲grid-template-columns设置列宽,grid-template-rows同理
1.repeat()当布局要重复写,很麻烦可以采用此方法
其接受2个参数repeat(参数1,参数2)
参数一:重复几次
参数二:重复的布局是什么
举例:grid-template-columns:repeat(3,33.3%)//一共3列,每列各占33.33%
grid-template-columns:repeat(2,10px 20px)//一共4列,分别占10px 20px 10px 20px
2.auto-fill关键字
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。
举例:grid-template-columns:repeat(auto-fill,100p x)//自动填充每列100px
3.fr关键字
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
举例:grid-template-columns:1fr 1fr 1fr //3列 每列大小一样
可以结合绝对单位单位使用
举例:grid-template-columns:200px 1fr 2fr
4.auto 关键字
auto关键字表示由浏览器自己决定长度。
举例:grid-template-columns:200px auto 100px (俩侧宽度固定,中间自适应)
项目属性
1.grid-column 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式。
举例:grid-column :1/3 /*item列上从第一根网格线到第三根*/
2.grid-row 属性
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
举例:grid-row :1/3 /*item行上从第一根网格线到第三根*/
实现第一张截图的代码块
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div class="g">
<div class="n">
<img src="01.jpeg" alt="图片">
</div>
<div class="n">
<img src="02.jpg" alt="图片">
</div>
<div class="n">
<img src="03.jpg" alt="图片">
</div>
<div class="n">
<img src="04.jpeg" alt="图片">
</div>
<div class="n">
<img src="05.jpeg" alt="图片">
</div>
</div>
</body>
</html>
.n:nth-child(1){
background:linear-gradient(#aaa,#986);
grid-row: 1/3;
}
.n:nth-child(2){
background:linear-gradient(#d77,#ad9);
}
.n:nth-child(3){
background:linear-gradient(rgb(99, 61, 61),rgb(82, 56, 6));
}
.n:nth-child(4){
background:linear-gradient(rgb(238, 7, 7),rgb(26, 27, 25));
grid-row: 1/3;
grid-column: 4/5;
}
.n:nth-child(5){
background:linear-gradient(rgb(37, 45, 158),rgb(136, 10, 240));
grid-column: 2/4;
}
.n{
border:20px solid black;
/*实现图片填充item的
display: grid;
align-self: center;
justify-self: center;
*/
}
.g{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 100px;
}