display:grid 网格布局

一、第一个示例了解网格布局<!DOCTYPE html><html><head><style>.item1 {grid-area: myArea;}.grid-container {display: grid;grid-template-areas: 'myArea myArea myArea . . .';grid-gap: 10px;backgr

拾荒李

10326人浏览 · 2022-04-02 15:07:31

拾荒李 · 2022-04-02 15:07:31 发布

一、第一个示例了解网格布局

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>grid-template-areas 属性</h1>

<p>您可以使用 <em>grid-template-areas</em> 属性来设置网格布局。</p>
<p>名为 "myArea" 的 Item1 会占据（五列中）两列的位置：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

</body>
</html>

在这里插入图片描述

二、第二个示例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	.container {
		display: grid;
		width: calc(5 * 60px);
		height: calc(5 * 60px);
		padding: 60px;
		grid-template-rows: repeat(5, 60px);
		grid-template-columns: repeat(5, 60px);
		grid-template-areas: ".  red  red  red  . "
							 "yellow .  .  .  . "
							 "green  .  black  black  . "
							 "green  .  .  .  blue "
							 ".  pink pink pink . ";
	}

	.red {
		grid-area: red;
		background: red;
	}

	.yellow {
		grid-area: yellow;
		background: yellow;
	}

	.green {
		grid-area: green;
		background: green;
	}

	.pink {
		grid-area: pink;
		background: pink;
	}

	.blue {
		grid-area: blue;
		background: blue;
	}

	.black {
		grid-area: black;
		background: black;
	}
</style>

<body>
	<div class="container">
		<div class="red"></div>
		<div class="yellow"></div>
		<div class="green"></div>
		<div class="pink"></div>
		<div class="blue"></div>
		<div class="black"></div>
	</div>
</body>

</html>

运行结果：

在这里插入图片描述

三、属性

display 设置grid布局
- display: grid // 默认是块级元素
- display: inline-grid // 默认是行内块元素
grid-template-rows 设置网格的行数
- 100px 100px 100px; //从上至下，每行高度为100px，如果有第四行，未设置就是其自身高度
grid-template-columns 设置网格的列数
- (100px 100px 100px; //代表有三列，每列是100px的宽度，也可以用百分比)

多个值可以用 repeat 函数

grid-template-columns:   100px  100px  100px;
// 简写方法 即重复3次 每行高度100px
grid-template-columns：repeat(3,100px);

// 也可以是不固定的重复模式 
grid-template-columns:repeat(2,100px 80px);  //重复两次100px 80px 的模式，就是4列=== grid-template-columns：100px  80px  100px 80px;

1、 auto-fill:
如果容器大小不固定，网格大小固定，可以用关键词自动填充
grid-template-columns:repeat(auto-fill,100px);//自动填充，每列100px宽度
2、fr(fraction):倍数，
如果有两列，1fr 2fr，后者就是前者的两倍

grid-template-columns:1fr 2fr;
grid-template-rows:50px 1fr 2fr;

3、minmax()

grid-template-columns:1fr 5fr minmax(100px,1fr);

解释： 第一列是1fr，第二列是5fr，第三列最小值是100px，最大值是1fr。
当1fr>=100px，比如容器是800px，那1fr就是114左右
第一列是1fr=800/7，第二列是5fr，第三列是1fr
当1fr<100px，比如容器是600px，则第一列是1f=(600-100)/6 ，第二列是5fr，第三列是100px

grid-auto-columns 设定隐藏的网格的高
grid-auto-rows 设定隐藏的网格的宽
grid-auto-flow 在布局的时候，选择网格填充的方法

4、auto

grid-template-columns:100px auto 100px;

grid-template-areas 根据子元素的网格名字来排列
grid-column-gap 用来指定竖网格轨道的大小
grid-row-gap 用来指定行网格轨道的大小
grid-gap grid-column-gap和grid-row-gap这两个属性的缩写方式

5、gap间距
row-gap：行间距
column-gap：列间距
简写：gap:20px 2opx; ,row-gap和column-gap的简写形式，可以省略第二个值，浏览器默认第二个等于第一个值

grid-template-columns:repeat(3,1fr);
  gap:20px;
  grid-template:repeat(3,50px);

justify-items 网格中所有单元格中的内容在X轴的对齐方
align-items 网格中所有单元格中的内容在Y轴的对齐方式
justify-content 来设置整个网格在网格容器中的X轴的排列方式
align-content 来设置整个网格在网格容器中的Y轴的排列方式

6、单元格的水平垂直
justify-items:设置单元格内容的水平位置（左中右）　
align-items：设置单元格内容的垂直位置（上中下）　　　　
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

7、放置顺序
grid-auto-flow：网格默认的顺序是先行后列，默认值是row
grid-auto-flow:column;
grid-template: repeat(3,100px 70px)/repeat(2,1fr); //先行设置，后列设置
在这里插入图片描述