（1）网格布局
<!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>网格布局</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} .grid-container{ background-color: #2196F3;padding: 10px;height: 400px;/*搭配7做测试用*/ display: grid; /*3(搭配1用)、设置display的属性值为grid，使得这个div成为网格布局容器grid-container。 1>display 属性设置为 inline-grid，以生成行内的网格容器。 2>网格容器的所有直接子元素将自动成为网格项目grid-item。 3>网格项的垂直线(和边框重合)被称为列: 网格列grid-column。 4>网格项的水平线(和边框重合)被称为行: 网隔行grid-row。 5>每列/行之间的间隔称为间隙: 网格间隙的简写grid-gap（grid-row-gap grid-column-gap）。 6>列之间的线(和边框不重合)称为列线（column lines） 7>行之间的线(和边框不重合)称为行线（row lines）。 */ grid-template-columns: auto auto auto auto; /*4、定义网格布局中的列数，并可定义每列的宽度。 1>网格布局包含 4 列，请指定这 4 列的宽度； 2>所有列都应当有相同的宽度，则设置为 "auto"; */ /*grid-template-rows: 80px 200px; /*5、定义每行的高度。值是以空格分隔的列表，其中每个值定义相应行的高度。*/ /*justify-content: end; /*6、用于在容器内对齐整个网格。(网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效) 1>space-evenly : 在列之间以及列周围,留出相等的空间; 2>space-around : 在列周围,留出相等的空间; 3>space-between : 在列之间,留出相等的空间; 4>center : 在容器中间,对齐网格; 5>start : 在容器开头,对齐网格; 6>end : 在容器末端,对齐网格; */ /*align-content: end; /*7、用于垂直对齐容器内的整个网格。(网格的总高度必须小于容器的高度，这样 align-content 属性才能生效) 1>space-evenly :使行之间以及行周围,具有相等的空间; 2>space-around :使行周围,具有相等的空间; 3>space-between :使行之间,具有相等的空间; 4>center : 对齐容器,中间的行; 5>start :对齐容器,开头的行; 6>end :对齐容器,末端的行; */ /*grid-gap: 10px 20px; /*8、调整（每列/行之间的）间隙大小。是 grid-row-gap 和 grid-column-gap 属性的简写属性*/ } .grid-item{ background-color: #D3EAFD;border: 1px solid black; text-align: center;padding: 5px 10px; } .item1{ /*10(搭配9用)、个性化设置单个网格项目的位置。把网格项目放在列线 1，并在列线 3 结束它。（注意，会覆盖前面网格容器的grid-template-columns属性 =>4）*/ /*grid-column-start: 1; 代码1 grid-column-end: 3; 代码2 */ grid-column: 1 / 3; /*（代码1和2的简写）使 "item1" 从第 1 列开始并在第 3 列之前结束*/ grid-column: 1 / span 2; /*（代码1和2的简写）使 "item1" 从第 1 列开始，并跨越 2 列*/ } .item1 { /*11(搭配9用)、个性化设置单个网格项目的位置。把网格项目放在行线 1，并在行线 3 结束它。（注意，会覆盖前面网格容器的grid-template-rows属性 =>5）*/ /*grid-row-start: 1; 代码3 grid-row-end: 3; 代码4 */ grid-row: 1 / 3; /*（代码3和4的简写）在 row-line 1 开始，在 row-line 3 结束*/ grid-row: 1 / span 2; /*（代码3和4的简写）使 "item1" 从第 1 行开始并跨越 2 行*/ } .item4{ /*12(搭配9用)、个性化设置单个网格项目的位置。(注意：可以通过使用媒体查询来重新排列某些屏幕尺寸的顺序)*/ /* grid-row-start: 2; 代码5 grid-column-start: 3; 代码6 grid-row-end: 4; 代码7 grid-column-end: 5; 代码8 */ grid-area: 2 / 3 / 4 / 5; /*（代码5和6和7和8的简写）*/ grid-area: 2 / 3 / span 2 / span 2; /*（代码5和6和7和8的简写）*/ } </style> </head> <body> <div class="grid-container"><!--1、设置网格布局容器的div，class=grid-container--> <!--2、设置网格项目的div, class=grid-item--> <div class="grid-item item1">1</div><!--9、给单个网格项目取类名itemX--> <div class="grid-item item2">2</div> <div class="grid-item item3">3</div> <div class="grid-item item4">4</div> <div class="grid-item item5">5</div> <div class="grid-item item6">6</div> <div class="grid-item item7">7</div> <div class="grid-item item8">8</div> <div class="grid-item item9">9</div> </div> </body>
（2）网格布局_命名网格项目
<!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>网格布局(命名网格项目)</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} .grid-container1 > div{ background-color: #D3EAFD;color: black;padding: 5px;border: 1px solid white; text-align: center; } .item1{ /*1、grid-area也可以用于为网格项目分配名称。表示item1 的名称是 "myArea"*/ grid-area: myArea; } .grid-container1{ background-color: #2196F3;padding: 5px;margin: 20px 0 20px 0; display: grid; /*2(搭配1用)、设置grid-template-areas属性，属性值必须加''单引号。 1>'myArea myArea myArea myArea myArea' : 名称是 "myArea"的网格项目，跨越五列网格布局中的所有五列; 2>'myArea myArea . . .' : 名称是 "myArea"的网格项目，跨越五列网格布局中的两列（句号代表没有名称的项目）; 3>'myArea myArea . . .' 'myArea myArea . . .' : 名称是 "myArea"的网格项目，跨越两列和两行; */ grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; } /*3、命名所有项目，并制作一张随时可用的网页模板。*/ .grid-container > div{ background-color: #D3EAFD;color: black;padding: 5px;border: 1px solid white; text-align: center; } .grid-container{ background-color: #2196F3;padding: 5px;margin: 20px 0 20px 0; display: grid; /*grid-template-columns: auto auto auto auto auto;*/ /*5(搭配4用)、其实就是一个三行六列的矩阵*/ grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer' ; } /*4、命名所有网格项目*/ .item7{ grid-area: header;} .item8{ grid-area: menu;} .item9{ grid-area: main;} .item10{ grid-area: right;} .item11{ grid-area: footer;} </style> </head> <body> <div class="grid-container1"> <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> <!--3、命名所有项目，并制作一张随时可用的网页模板。--> <div class="grid-container"> <div class="item7">Header</div> <div class="item8">Menu</div> <div class="item9">Main</div> <div class="item10">Right</div> <div class="item11">Footer</div> </div> </body>
（3）网格布局+媒体查询
<!-- 适用：IE16以上包括16 优点：无需使用浮动或定位。 例如：网格布局允许我们将项目放置在我们喜欢的任意位置。只需设置网格项目的grid-area属性即可。 应用在可以通过使用媒体查询来重新排列网格项目的顺序。 --> <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>媒体查询+网格视图</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} .item1{ grid-area: asideLeft;height: 300px;} .item2{ grid-area: main;height: 500px;} .item3{ grid-area: asideRight; height: 400px;} .grid-container{ background-color: #2196F3; padding: 5px; display: grid; /*grid-template-columns: auto auto auto;*/ grid-template-areas: 'asideLeft' 'main' 'asideRight'; } .grid-container > div{ background-color: #D3EAFD;color: black;border: 1px solid white; text-align: center; } /*针对平板*/ @media only screen and (min-600px) { .grid-container{ grid-template-areas: 'asideLeft asideRight' 'main main'; } } /*针对桌面*/ @media only screen and (min-769px) { .grid-container{ grid-template-areas: 'asideLeft main asideRight'; } } </style> </head> <body> <div class="grid-container"> <div class="item1">asideLeft</div> <div class="item2">main</div> <div class="item3">asideRight</div> </div> </body>