<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>GRID栅格系统</title>
<style>
/*栅格容器 -> 栅格 -> 栅格元素*/
/*定义栅格元素的长宽时栅格的长宽不会发生改变，不定义栅格元素的长宽时默认栅格元素自动撑满整个栅格*/
/*根据栅格容器的栅格线编号将栅格元素放置到栅格中*/
/*可以整体控制栅格的对齐方式，可以整体控制栅格元素的对齐方式，可以单独控制栅格元素的对齐方式*/
/*1.声明栅格系统的容器*/
/*display: grid;表示块级，display: inline-grid;表示行块级，和弹性盒模型类似*/
/*article是栅格容器*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* !*定义栅格，rows高，columns宽*!*/
/* !*使用固定宽度划分*!*/
/* grid-template-rows: 100px 100px 100px;*/
/* grid-template-columns: 100px 100px 100px;*/
/* !*使用百分比自动适就容器*!*/
/* !*grid-template-rows: 33.3% 33.3% 33.3%;*!*/
/* !*grid-template-columns: 33.3% 33.3% 33.3%;*!*/
/* !*repeat定义栅格1: 第一个参数为重复数量，第二个参数是重复值*!*/
/* !*grid-template-rows: repeat(3,100px);*!*/
/* !*grid-template-columns: repeat(3,100px);*!*/
/* !*repeat定义栅格2: 第一个参数为重复数量，第二个参数是重复值*!*/
/* !*grid-template-rows: repeat(3,33.3%);*!*/
/* !*grid-template-columns: repeat(3,33.3%);*!*/
/* !*repeat定义栅格3: 第一个参数为自动计算重复数量，第二个参数是重复值*!*/
/* !*grid-template-rows: repeat(auto-fill,100px);*!*/
/* !*grid-template-columns: repeat(auto-fill,100px);*!*/
/* !*repeat定义栅格4: 使用 fr 单位设置元素在空间中所占的比例*!*/
/* !*grid-template-rows: repeat(3,1fr);*!*/
/* !*grid-template-columns: repeat(3,1fr);*!*/
/* !*栅格容器高分成4份，第一个栅格高占1份，第二个栅格高占2份，第三个栅格高占1份*!*/
/* !*grid-template-rows: 1fr 2fr 1fr;*!*/
/* !*栅格容器宽分成4份，第一个栅格宽占1份，第二个栅格宽占2份，第三个栅格宽占1份*!*/
/* !*grid-template-columns: 1fr 2fr 1fr;*!*/
/* !*MINMAX控制尺寸波动范围*!*/
/* !*grid-template-rows: repeat(2,minmax(50px,120px));*!*/
/* !*grid-template-columns: repeat(5,1fr);*!*/
/*}*/
/*!*article div是栅格容器内的元素*!*/
/*article div {*/
/*!*定义栅格元素的长宽时栅格的长宽不会发生改变，不定义栅格元素的长宽时默认栅格元素自动撑满整个栅格*!*/
/* !*width: 50px;*!*/
/* !*height: 50px;*!*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*2.栅格间距控制留白*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(3,1fr);*/
/* grid-template-columns: repeat(3,1fr);*/
/* !*栅格间距*!*/
/* !*row-gap: 10px;*!*/
/* !*column-gap: 10px;*!*/
/* !*栅格间距简写*!*/
/* gap: 10px 10px;*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* box-sizing: border-box;*/
/* !*栅格元素之间的间距可以通过栅格元素的padding、margin来控制*!*/
/* !*margin: 10px;*!*/
/*}*/
/*3.根据栅格线编号放置元素*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(3,1fr);*/
/* grid-template-columns: repeat(3,1fr);*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*!*把栅格元素放在栅格容器的中间栅格处*!*/
/*article div {*/
/* !*矩形的上边框所在行*!*/
/* grid-row-start: 2;*/
/* !*矩形的左边框所在列*!*/
/* grid-column-start: 2;*/
/* !*矩形的下边框所在行*!*/
/* grid-row-end: 3;*/
/* !*矩形的右边框所在列*!*/
/* grid-column-end: 3;*/
/*}*/
/*4.小米界面不规则元素布局*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(2, 1fr);*/
/* grid-template-columns: repeat(2, 1fr);*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*article div:nth-of-type(1) {*/
/* grid-row-start: 1;*/
/* grid-column-start: 1;*/
/* grid-row-end: 3;*/
/* grid-column-end: 2;*/
/*}*/
/*5.栅格命名放置元素*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* !*固定*!*/
/* !*grid-template-rows: [r1-start]100px[r1-end r2-start] 100px[r2-end r3-start] 100px[r3-end];*!*/
/* !*grid-template-columns: [c1-start]100px[c1-end c2-start] 100px[c2-end c3-start] 100px[c3-end];*!*/
/* !*重复*!*/
/* grid-template-rows: repeat(3,[r-start] 1fr [r-end]);*/
/* grid-template-columns: repeat(3,[c-start] 1fr [c-end]);*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*!*固定*!*/
/*!*article div {*!*/
/*!* grid-row-start: r2-start;*!*/
/*!* grid-column-start: c2-start;*!*/
/*!* grid-row-end: r3-start;*!*/
/*!* grid-column-end: c3-start;*!*/
/*!*}*!*/
/*!*重复*!*/
/*article div {*/
/* grid-row-start: r-start 2;*/
/* grid-column-start: c-start 2;*/
/* grid-row-end: r-start 3;*/
/* grid-column-end: c-start 3;*/
/*}*/
/*6.span根据偏移量定位元素*/
/*偏移的栅格数量*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(3,1fr);*/
/* grid-template-columns: repeat(3,1fr);*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*article div {*/
/* grid-row-start: 2;*/
/* grid-column-start: 2;*/
/* grid-row-end: span 1;*/
/* grid-column-end: span 1;*/
/*}*/
/*7.元素定位简写操作*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(3,1fr);*/
/* grid-template-columns: repeat(3,1fr);*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*article div:nth-of-type(1) {*/
/* grid-row: 1/4;*/
/* grid-column: 1/2;*/
/*}*/
/*article div:nth-of-type(2) {*/
/* grid-row: 1/3;*/
/* grid-column: 2/4;*/
/*}*/
/*article div:nth-of-type(3) {*/
/* grid-row: 3/span 1;*/
/* grid-column: 2/span 2;*/
/*}*/
/*8.开发BOOTSTRAP栅格系统*/
/*主要使用栅格的span特性*/
/*article {*/
/* width: 1200px;*/
/* height: 80px;*/
/* margin: 0 auto;*/
/*}*/
/*.col {*/
/* display: grid;*/
/* grid-template-columns: repeat(12,1fr);*/
/*}*/
/*.col-1 {*/
/* grid-column-end: span 1;*/
/*}*/
/*.col-2 {*/
/* grid-column-end: span 2;*/
/*}*/
/*.col-3 {*/
/* grid-column-end: span 3;*/
/*}*/
/*.col-4 {*/
/* grid-column: span 4;*/
/*}*/
/*.col-5 {*/
/* grid-column-end: span 5;*/
/*}*/
/*.col-6 {*/
/* grid-column-end: span 6;*/
/*}*/
/*.col-7 {*/
/* grid-column-end: span 7;*/
/*}*/
/*.col-8 {*/
/* grid-column-end: span 8;*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*9.使用栅格区域定位栅格元素*/
/** {*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
/*article {*/
/* width: 100vw;*/
/* height: 100vh;*/
/* display: grid;*/
/* grid-template-rows: 60px 1fr 60px;*/
/* grid-template-columns: 60px 1fr;*/
/* !*定义栅格区域*!*/
/* grid-template-areas: "header header"*/
/* "nav main"*/
/* "footer footer";*/
/* !*区域占位符"."，表示占位一个栅格*!*/
/* !*栅格区域栅格线的默认命名，以main为例: main-start main-start main-end main-end*!*/
/*}*/
/*article header,nav,main,footer {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*!*定义栅格区域*!*/
/*article header {*/
/* !*grid-area: 1/1/2/4;*!*/
/* grid-area: header;*/
/*}*/
/*!*定义栅格区域*!*/
/*article nav {*/
/* grid-area: nav;*/
/*}*/
/*!*定义栅格区域*!*/
/*article main {*/
/* grid-area: main;*/
/*}*/
/*!*定义栅格区域*!*/
/*article footer {*/
/* grid-area: footer;*/
/* display: grid;*/
/* grid-template-columns: repeat(4,1fr);*/
/*}*/
/*article footer div {*/
/* background-color: #ddd;*/
/* background-clip: content-box;*/
/* padding: 5px;*/
/* box-sizing: border-box;*/
/* border: solid 1px #ddd;*/
/*}*/
/*10.栅格流动处理机制*/
/*栅格默认的流动方向为从左往右，从上往下(row)*/
/*article {*/
/* display: grid;*/
/* width: 300px;*/
/* height: 300px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(3,1fr);*/
/* grid-template-columns: repeat(3,1fr);*/
/* !*改变栅格的流动方向，默认是行排(row)*!*/
/* !*grid-auto-flow: row;*!*/
/* !*grid-auto-flow: column;*!*/
/* !*自动填满栅格的空余空间*!*/
/* grid-auto-flow: row dense;*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*!*自动填满栅格的空余空间*!*/
/*article div:nth-of-type(1) {*/
/* grid-column: 1/span 2;*/
/*}*/
/*article div:nth-of-type(2) {*/
/* grid-column: 2/span 1;*/
/*}*/
/*11.栅格整体对齐方式处理*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1,100px);*/
/* grid-template-columns: repeat(4,100px);*/
/* !*栅格水平对齐到开始*!*/
/* !*justify-content: start;*!*/
/* !*栅格水平对齐到结尾*!*/
/* !*justify-content: end;*!*/
/* !*栅格水平对齐到中间*!*/
/* justify-content: center;*/
/* !*栅格水平两边对齐，中间平均分配*!*/
/* !*justify-content: space-between;*!*/
/* !*栅格水平完全平均分配*!*/
/* !*justify-content: space-evenly;*!*/
/* !*栅格垂直对齐到中间*!*/
/* align-content: center;*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*12.栅格内元素的整体控制*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1,100px);*/
/* grid-template-columns: repeat(4,100px);*/
/* !*栅格元素水平对齐到栅格的开始*!*/
/* !*justify-items: start;*!*/
/* !*栅格元素水平对齐到栅格的结尾*!*/
/* !*justify-items: end;*!*/
/* !*栅格元素水平对齐到栅格的中间*!*/
/* justify-items: center;*/
/* !*栅格元素在栅格内水平拉伸(默认)，优先级小于栅格元素定义的宽*!*/
/* !*justify-items: stretch;*!*/
/* !*栅格元素垂直对齐到栅格的中间*!*/
/* align-items: center;*/
/* !*栅格元素在栅格内垂直拉伸(默认)，优先级小于栅格元素定义的长*!*/
/* !*align-items: stretch;*!*/
/*}*/
/*article div {*/
/* width: 50px;*/
/* height: 50px;*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*13.栅格元素独立控制对齐方式*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1, 100px);*/
/* grid-template-columns: repeat(4, 100px);*/
/*}*/
/*article div {*/
/* width: 50px;*/
/* height: 50px;*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*article div:nth-of-type(1) {*/
/* !*控制第一个栅格元素水平对齐到栅格的开始*!*/
/* !*justify-self: start;*!*/
/* !*控制第一个栅格元素水平对齐到栅格的结尾*!*/
/* !*justify-self: end;*!*/
/* !*控制第一个栅格元素水平对齐到栅格的中间*!*/
/* justify-self: center;*/
/* !*控制第一个栅格元素垂直对齐到栅格的中间*!*/
/* align-self: center;*/
/*}*/
/*14.组合简写栅格整体对齐方式*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1,100px);*/
/* grid-template-columns: repeat(4,100px);*/
/* !*栅格垂直对齐到中间*!*/
/* !*align-content: center;*!*/
/* !*栅格水平完全平均分配*!*/
/* !*justify-content: space-evenly;*!*/
/* !*上面两行栅格的对齐方式可以简写为如下形式*!*/
/* place-content: center space-evenly;*/
/*}*/
/*article div {*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*15.组合简写栅格元素整体对齐方式*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1, 100px);*/
/* grid-template-columns: repeat(4, 100px);*/
/* !*栅格元素垂直对齐到栅格的末尾*!*/
/* !*align-items: end;*!*/
/* !*栅格元素水平对齐到栅格的中间*!*/
/* !*justify-items: center;*!*/
/* !*上面两行栅格元素的对齐方式可以简写为如下形式*!*/
/* place-items: end center;*/
/*}*/
/*article div {*/
/* width: 50px;*/
/* height: 50px;*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*16.组合简写栅格元素独立控制对齐方式*/
/*article {*/
/* display: grid;*/
/* width: 600px;*/
/* height: 200px;*/
/* border: 5px solid silver;*/
/* grid-template-rows: repeat(1, 100px);*/
/* grid-template-columns: repeat(4, 100px);*/
/*}*/
/*article div {*/
/* width: 50px;*/
/* height: 50px;*/
/* background-color: blueviolet;*/
/* background-clip: content-box;*/
/* padding: 10px;*/
/* box-sizing: border-box;*/
/* border: solid 1px blueviolet;*/
/*}*/
/*article div:nth-of-type(1) {*/
/* !*控制第一个栅格元素垂直对齐到栅格的结尾*!*/
/* !*align-self: end;*!*/
/* !*控制第一个栅格元素水平对齐到栅格的中间*!*/
/* !*justify-self: center;*!*/
/* !*上面两行栅格元素独立的对齐方式可以简写为如下形式*!*/
/* place-self: end center;*/
/*}*/
</style>
</head>
<body>
<!--1.声明栅格系统的容器-->
<!--<article>-->
<!-- <!–div{$}*9–>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!-- <div>5</div>-->
<!-- <div>6</div>-->
<!-- <div>7</div>-->
<!-- <div>8</div>-->
<!-- <div>9</div>-->
<!--</article>-->
<!--2.用栅格间距控制留白-->
<!--<article>-->
<!-- <!–div{$}*9–>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!-- <div>5</div>-->
<!-- <div>6</div>-->
<!-- <div>7</div>-->
<!-- <div>8</div>-->
<!-- <div>9</div>-->
<!--</article>-->
<!--3.根据栅格线编号放置元素-->
<!--<article>-->
<!-- <div>1</div>-->
<!--</article>-->
<!--4.小米界面不规则元素布局-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!--</article>-->
<!--5.栅格命名放置元素-->
<!--<article>-->
<!-- <div>1</div>-->
<!--</article>-->
<!--6.span根据偏移量定位元素-->
<!--<article>-->
<!-- <div>1</div>-->
<!--</article>-->
<!--7.元素定位简写操作-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!--</article>-->
<!--8.开发BOOTSTRAP栅格系统-->
<!--<article class="col" >-->
<!-- <div class="col-2">1</div>-->
<!-- <div class="col-4">2</div>-->
<!-- <div class="col-6">3</div>-->
<!--</article>-->
<!--9.使用栅格区域定位栅格元素-->
<!--<article>-->
<!-- <header>header</header>-->
<!-- <nav>nav</nav>-->
<!-- <main>main</main>-->
<!-- <footer>-->
<!-- <div>div1</div>-->
<!-- <div>div2</div>-->
<!-- <div>div3</div>-->
<!-- <div>div4</div>-->
<!-- </footer>-->
<!--</article>-->
<!--10.栅格流动处理机制-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--11.栅格整体对齐方式处理-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--12.栅格内元素的整体控制-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--13.栅格元素独立控制对齐方式-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--14.组合简写栅格整体对齐方式-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--15.组合简写栅格元素整体对齐方式-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
<!--16.组合简写栅格元素独立控制对齐方式-->
<!--<article>-->
<!-- <div>1</div>-->
<!-- <div>2</div>-->
<!-- <div>3</div>-->
<!-- <div>4</div>-->
<!--</article>-->
</body>
</html>
