Grid网格布局的基本使用

文章目录

- 什么是网格布局
- 属性
- display 属性
- grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
- grid-template-areas 属性
- grid-auto-flow 属性
- justify-items 属性， align-items 属性， place-items 属性
- justify-content 属性， align-ntent 属性， place-content 属性
- grid-column-start 属性、grid-column-end 属性、grid-row-start属性以及grid-row-end 属性
- grid-area 属性
- justify-self 属性、align-self 属性以及 place-self 属性
应用场景
- 有需要的请私信博主，还请麻烦给个关注，博主不定期更新，或许能够有所帮助！！请关注公众号

什么是网格布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构 , 能够同时处理行与列

设置 display:grid/inline-grid 的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格
布局算法

<div class="container"><div class="item item-1"><p class="sub-item"></p >                       </div>	<div class="item item-2"></div><div class="item item-3"></div>	
</div>

.container 元素就是网格布局容器 .item 元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以 p 元素并不是网格元素
在这里插入图片描述

属性

Grid 布局属性可以分为两大类 :
容器属性
项目属性

display 属性

• dsplay： grid 则该容器是一个块级元素
• display： inline-grid 则容器元素为行内元素
grid-template-columns 属性设置列宽， grid-template-rows 属性设置行高

1   .wrapper {
2     display: grid;
3     /*  声明了列 ，宽度分别为   200px 200px 200px */
4     grid-template-columns: 200px 200px 200px;
5     grid-gap: 5px;
6     /*  声明了两行 ，行高分别为   50px 50px  */
7     grid-template-rows: 50px 50px;
8   }

以上表示固定列宽为 200px 200px
通过使用 repeat() 函数可以简写重复的值
• 第一个参数是重复的次数
• 第二个参数是重复的值
简写代码

	 复制代码
1		
2	wrapper {
3	display: grid;grid-template-columns: repeat(3,200px)；
4	grid-gap: 5px;
5	grid-template-rows:repeat(2,50px);
6	}

auto-fill ：示自动填充，让 — 行 (或者-列) 中尽可能的容纳更多的单元格

grid-template-columns: repeat(auto-fill, 200px)表示列宽是 2 px 但列的数量，

fr：片段，为了方便表示比例关系

grid-template-columns: 200px 1fr 2fr 表示第-个列宽设置为 2。px
后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3

minmax：产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就
是最小值，第二个参数就是最大值
auto ：由浏览器自己决定长度

grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度

grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap 属性、grid-column-gap属性分别设置行间距和列间距，grid-gap属性是两者的简写
两者的简写形式

grid-row-gap: 10px 表示行间距是 10px
grid-column-gap： 10px,表示列间距是 10px
grid-gap: 10px 20px 等同上述两个属性

grid-template-areas 属性

  .container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';}

grid-auto-flow 属性

在这里插入图片描述

justify-items 属性， align-items 属性， place-items 属性

justify-items 属性设置单元格内容的水平位置 (左中右) ， align-items 属性设置单元格的
垂直位置 (上中下)

在这里插入图片描述

属性对应如下：
• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
center：单元格内部居中
· stretch：拉伸，占满单元格的整个宽度 (默认值)
place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式

justify-content 属性， align-ntent 属性， place-content 属性

 .container {
2     justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
3     align-content: start | end | center | stretch | space-around | space-between | space-evenly;
4   }

start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch - 项目大小没有指定时，拉伸占据整个网格容器
在这里插入图片描述

grid-column-start 属性、grid-column-end 属性、grid-row-start属性以及grid-row-end 属性

指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

1  <style>		
2	#container{
3	display: grid;
4	grid-template-columns: 100px 100px 100px;
5	grid-template-rows: 100px 100px 100px;
6	}
7	.item-1 {
8	grid-column-start: 2;
9	grid-column-end: 4;
10	}
11	</style>
12	
13	<div id="container">
14	<div class="item item-1">1</div>
15	<div class="item item-2">2</div>                   
16	<div class="item item-3">3</div>
17	</div>

在这里插入图片描述

grid-area 属性

grid-area  属性指定项目放在哪一个区域


1 	.item-1 {		
grid-area: e;	
}

justify-self 属性、align-self 属性以及 place-self 属性

justify-self 属性设置单元格内容的水平位置 (左中右) ，跟 justify-items 属性的用法完全
-致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置 (上中下) , 跟 align-items 属性的用法完全 — 致也是只作用于单个项目

1  .item {                                                
2     justify-self: start | end | center | stretch;
3     align-self: start | end | center | stretch;
4   }