今天跟大家探索一下grid布局，今天主要给大家讲三种情况：第一种：grid-template-columns不带grid-template-rows,第二种：grid-template-columns里面的auto-fill，auto-fit，第三种：auto跟fr在一起以及不在一起的使用
首先建一个grid.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>
<style>
* {
padding: 0;
margin: 0;
}
#content1,
#content2,
#content3 {
margin-top: 10px;
padding: 0px;
border: 2px solid black;
display: grid;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: orange;
}
</style>
</head>
<body>
<div>
<div id="content1">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
</div>
<div id="content2">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
</div>
<div id="content3">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
</div>
</div>
</body>
</html>
现在开始调试grid代码。
示例一
#content1 {
grid-template-columns: 100px 100px 100px;
}
#content2 {
grid-template-columns: 200px 100px 200px;
}
#content3 {
grid-template-columns: 1fr 2fr 1fr;
}
得出的效果如下：
代码分析：在没有加上grid-template-rows,它是会把多余往下排列。即grid-template-rows为可扩展无限行
示例二
#content1 {
grid-template-columns: repeat(2, 100px) repeat(2, 80px) auto;
}
#content2 {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
#content3 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
屏幕较宽展示：
屏幕较窄展示：
代码分析： 当屏幕宽度较大时，可以看到
auto-fill不填满网格轨道，auto-fit填满网格轨道，且屏幕大放大缩小，网格不会100px，若填充不下，则往下移动，每个网格宽度一致。
示例三
#content1 {
grid-template-columns: repeat(4, auto) 1fr;
}
#content2 {
grid-template-columns: repeat(5,auto);
}
页面展示
代码分析 auto在使用时，若没有fr网格，它是充满填充的，若有fr网格，则按实际内容填充
