<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的GRID布局</title>
<!-- Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。
目前主流浏览器都支持了网格布局,今天我们学习一下简单的网格布局的基础知识
1.网格布局由两个核心部分组成,分别是wrapper(父元素)和items(子元素);wrapper是实际的grid(网格),items是网格里面的内容
-->
<style type="text/css">
.wrapper1 {
display: grid;
/* 要将wrapper元素变成一个grid,只要设置display为grid */
}
.item1 {
background-color: #0000FF;
text-align: center;
}
.item2 {
background-color: #008000;
text-align: center;
}
.item3 {
background-color: #00FFFF;
text-align: center;
}
.item4 {
background-color: #FF00FF;
text-align: center;
}
.item5 {
background-color: #FFFF00;
text-align: center;
}
.item6 {
background-color: #E6A43F;
text-align: center;
}
.wrapper2 {
display: grid;
/* 要将wrapper元素变成一个grid,只要设置display为grid */
grid-template-columns: 100px 100px 100px;
/* 三列 */
grid-template-rows: 50px 50px;
/* 两行 */
}
.wrapper3 {
display: grid;
/* 要将wrapper元素变成一个grid,只要设置display为grid */
grid-template-columns: 100px 50px 300px;
/* 三列 */
grid-template-rows: 50px 30px;
/* 两行 */
}
.wrapper4 {
display: grid;
/* 要将wrapper元素变成一个grid,只要设置display为grid */
grid-template-columns: 100px 100px 100px;
/* 三列 */
grid-template-rows: 50px 50px 50px;
/* 两行 */
}
.item7 {
background-color: red;
text-align: center;
grid-column-start: 1;
grid-column-end: 4;
}
.item8 {
background-color: red;
text-align: center;
/* 上面列从第一个网格线到第四个网格线的简写 */
grid-column: 1 / 4;
}
.wrapper5 {
display: grid;
/* 要将wrapper元素变成一个grid,只要设置display为grid */
grid-template-columns: 100px 100px 100px;
/* 三列 */
grid-template-rows: 50px 50px;
/* 两行 */
}
/* -- 1.第一个item占据两列
2.第二个item占据一列
3.第三个item占据两行
4.第四个item占据两列
5.第五、第六个item分别都是一列
*/
.item9 {
background-color: #0000FF;
text-align: center;
grid-column-start: 1;
grid-column-end: 3;
}
.item10 {
background-color: #008000;
text-align: center;
}
.item11 {
background-color: #00FFFF;
text-align: center;
grid-row-start: 2;
grid-row-end: 4;
}
.item12 {
background-color: #FF00FF;
text-align: center;
grid-column-start: 2;
grid-column-end: 4;
}
.item13 {
background-color: #FFFF00;
text-align: center;
}
.item14 {
background-color: #E6A43F;
text-align: center;
}
</style>
</head>
<body>
<!-- 我们先来看一个简单的例子,下面是一个wrapper元素包含6个item -->
<div class="wrapper1">
<div class="item1">
one
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<!-- 上面我们还没有定义grid的样子,所以只是简单的将6个div堆叠在一起 -->
<br>
<!-- columns列,rows行
为了得到一个二维的网格布局,我们需要定义行和列;
grid-template-columns 列 (这里是写列的宽度,有几列就写几个宽度,宽度可以不是相同大小;空格区分)
grid-template-rows 行 (这里是写行的高度,有几列就写几个宽度,宽度可以不是相同大小;空格区分)
-->
<div class="wrapper2">
<div class="item1">
one
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<br>
<!-- 举例,这里我们不再写相同的宽度和高度;可以看到第三个grid,宽度和高度都发生了变化; -->
<div class="wrapper3">
<div class="item1">
one
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<br>
<!-- 下面我们来看如何放置items,这里才是体现网格布局的强大之处;因为网格布局使得创建布局极其简单 -->
<!-- 这里行和列我们都设置成 3*3
...,我们明明设置的是三行三列,这里怎么只有两行三列呢;因为这里我们只有6个item,如果有9个那么第三行会被铺满
-->
<div class="wrapper4">
<div class="item1">
one
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<br>
<!-- 接下来看,如何定位和调整item的大小 -->
<!-- 本例,我们希望第一个item占据从第一条网格线开始到第四条网格线结束;也就是第一个item占据一整行
grid-column-start: 1;
grid-column-end: 4;
PS:一列是由两个网格线组成的; 另外就是当第一个item占据一行的时候,会把下面的item往下推一行
-->
<div class="wrapper4">
<div class="item7">
seven
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<br>
<!-- 上面的item7的可以换一个更简单的写法 -->
<div class="wrapper4">
<div class="item8">
eight
</div>
<div class="item2">
two
</div>
<div class="item3">
three
</div>
<div class="item4">
four
</div>
<div class="item5">
five
</div>
<div class="item6">
six
</div>
</div>
<br>
<!-- 下面是小例子巩固一下 -->
<!-- 1.第一个item占据两列
2.第二个item占据一列
3.第三个item占据两行
4.第四个item占据两列
5.第五、第六个item分别都是一列
-->
<div class="wrapper4">
<div class="item9">
nine
</div>
<div class="item10">
ten
</div>
<div class="item11">
eleven
</div>
<div class="item12">
twelve
</div>
<div class="item13">
thirteen
</div>
<div class="item14">
forteen
</div>
</div>
</body>
<!-- 这里只是最简单的grid布局概念; PS:非原创,学习别人的;后面会继续学习网格布局 -->
</html>