CSS-网格布局-grid
1.CSS网格布局的概念
CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）
2.如何使用
2.1.直接上例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
border: blue solid 5px;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
border: blue solid 5px;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
border: blue solid 5px;
}
.four {
grid-column: 3;
grid-row: 3;
border: blue solid 5px;
}
.five {
grid-column: 2;
grid-row: 4;
border: blue solid 5px;
}
.six {
grid-column: 3;
grid-row: 4;
border: blue solid 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<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 class="six">Six</div>
</div>
</body>
</html>
结果如图：
2.2.关键问题
- 问题1：怎么创建一个网格？
答：在父级元素创建网格，这个例子中在class="wrapper"的div中创建的网格，具体代码和解释如下：
.wrapper {
display: grid; /* 定义该dom元素为网格布局 */
grid-template-columns: repeat(3, 1fr); /* 创建3列网格[1] */
grid-gap: 10px; /* 每个网格的间隙为10px */
grid-auto-rows: minmax(100px, auto); /* 这里行数是根据后面子级div的需要自动生成的，每行的行高为至少为100px,最高位auto */
}
总的来说，这个父级div就是一个3个同等大小的列和行数不确定的网格；那么行数怎么确定呢？
- 问题2：行数怎么确定呢？
答：grid-auto-rows[2] 这个属性不能确定多少行，只能确定每行的行高；需要用到grid-template-rows，可以确定行高和多少行 - 问题3：还有哪些参数？
答：参数有很多，上面的例子还有很多参数我都没讲，建议参考MDN文档
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
