web前端学习

概述

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。是目前最强大的的 CSS 布局方案，也是唯一一种 CSS二维布局。利用 Grid 布局，我们可以轻松实现很多复杂的页面布局。 父元素定义属性

属性	释义
grid-template-columns	列的宽度分布
grid-template-rows	行的宽度分布
grid-column-gap	列之间的间隙
grid-row-gap	行之间的间隙
grid-template-areas	区域划分

子元素定义属性

属性	释义
grid-area	该元素属于哪个区域（注意区域名没有引号）
order	单独给每个格子定义顺序

1.n×n宫格（3×2为例）

普通的n×n的格子

1

2

3

4

5

6

	
<div id="grid_father">
	<div class="grid_items">1</div>
	<div class="grid_items">2</div>
	<div class="grid_items">3</div>
	<div class="grid_items">4</div>
	<div class="grid_items">5</div>
	<div class="grid_items">6</div>
</div>

	
#grid_father{
	height: 200px;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 20px;
}
.grid_items{
	background-color: aqua;
	text-align: center;
	line-height: 90px;
}

2.跨格的网格

通用的布局格子

1

2

3

4

5

6

	
<div id="grid_father2">
	<div id="grid_box1" class="grid_items2">1</div>
	<div id="grid_box2" class="grid_items2">2</div>
	<div id="grid_box3" class="grid_items2">3</div>
	<div id="grid_box4" class="grid_items2">4</div>
	<div id="grid_box5" class="grid_items2">5</div>
	<div id="grid_box6" class="grid_items2">6</div>
</div>

	
#grid_father2{
	display: grid;
	height: 200px;
	width: 100%;
	grid-template-columns: 1fr 2fr 2fr;
	grid-template-rows: 1fr 2fr 2fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-areas: 
	"myheader myheader myheader"
	"myside content1 content2"
	"myside content3 content4";
}
.grid_items2{
	background-color: aqua;
	text-align: center;
	/*文字居中*/
	display: flex;
	align-items: center;
	justify-content: center;
}
#grid_box1{grid-area: myheader;}
#grid_box2{grid-area: myside;}
#grid_box3{grid-area: content1;}
#grid_box4{grid-area: content2;}
#grid_box5{grid-area: content3;}
#grid_box6{grid-area: content4;}