轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段：
1、古老的table表格布局，现在基本已被淘汰。
2、float浮动布局（或者position定位布局），借助float、position 等属性等进行布局，这种方法很成熟，兼容性非常好，现在使用的比较多，但比较繁琐。
3、flex弹性布局，革命性的突破，解决传统布局的痛点。这种方法兼容性不错（除个别浏览器外），很成熟，使用起来很简单，使用的比较多。
4、grid布局，相比flex布局功能有了非常大的提升，是真正的用于网页布局中新方案。如果说flex布局革命性的突破，那么grid布局就是彻底的革命性突破。这种方法，兼容性基本没有大问题，现在使用的越来越多了，不久的将来必是grid布局的兴起的时候。
实际应用中，我们往往在网页整个布局中应用grid布局，局部网页（主要是一维方向上）应用flex布局，一些细枝末节中用position。（float呢？float将来可能就退出历史舞台了，回到它的老本行-图文环绕）
与flex分为伸缩容器和伸缩项目类似，grid也分为网格容器和网格项目
采用网格布局的区域，称为”网格容器”（container）。容器内部采用网格定位的直接子元素，称为”网格项目”（item）。
我的博客-轻轻松松学CSS：Flex布局 介绍过传统经典布局-圣杯布局或双飞翼布局， 页面分为头部（HEADER）、导航（NAV）、主栏（MAIN)、侧栏(ASIDE)、尾部(FOOTER)等五个部分，其中头部、尾部定高，躯干（包含导航、主栏、侧栏）高度自适应，导航和侧栏定宽，主栏的宽度自适应。
以前的传统代码用到了浮动，代码稍显繁琐，在那篇博客中我采用了flex布局，代码简洁不少。flex布局相比较传统布局有了革命性突破，颠覆了传统认知，其实也可以采用grid布局，这样会有更大的突破，可以说grid布局就是页面整体布局而生的。
为了便于flex布局，还增加了<div class=”body”>….</div>(里面包含NAV、MAIN、ASIDE），grid布局完全可以不要这层多余的代码，它能使得表现与结构的彻底分离，不需要任何多余的代码作为辅助手段，是比较彻底的页面布局属性。
回忆一下flex布局的DOM结构
<body> <header>HEADER</header> <div class="container"> <nav>NAV</nav> <main>MAIN</main> <aside>ASIDE</aside> </div> <footer>FOOTER</footer> </body>
现在看看grid布局的DOM结构，注意和上一段代码比较，缺少了container那层div（为突出重点，代码都是分段给出的，本文的最后会给出完整的代码）
<body> <header>HEADER</header> <nav>NAV</nav> <main>MAIN</main> <aside>ASIDE</aside> <footer>FOOTER</footer> </body>
效果图是一样的，如下：
以下的CSS代码跟grid布局无关，它能影响背景色、固定高度值、固定宽度值等，读者了解即可，这不是本文的重点。
1 html{ 2 height: 100%; 3 text-align:center; 4 } 5 body{ 6 margin:0; 7 height:100%; 8 color:red; 9 } 10 header{ 11 height: 120px; 12 background-color: cornflowerblue; 13 } 14 15 16 footer{ 17 height: 50px; 18 background-color: #000; 19 line-height:50px; 20 text-align:center; 21 } 22 nav{ 23 background-color: lightgreen; 24 } 25 main{ 26 background-color:#ccc; 27 } 28 aside{ 29 background-color: orange; 30 }
View Code
以下的CSS代码跟grid布局有关
body{ display:grid; grid-template-columns:200px auto 150px; grid-template-rows:120px auto 50px; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; } header{ grid-area:header; } nav{ grid-area:nav; } main{ grid-area:main; } aside{ grid-area:aside; } footer{ grid-area:footer; }
其中body（display：grid）是父容器，，就是本文所指的“网格容器(Grid container)”，header、nav、main、aside、footer是子元素，就是本文所指的“网格项目（Grid item)”，或者叫”项目“
在Flex布局那篇博客中，提到“Flex布局和多媒体查询结合，使响应式布局更加简便”，现在应该这么说“Grid布局和多媒体结合无缝对接，使响应式布局异常简便”
/*中等屏幕*/ @media (max-width:992px){ body{ grid-template-columns:1fr 1fr; grid-template-rows:120px 200px auto 50px; grid-template-areas:"header header" "nav aside" "main main" "footer footer"; } } /*小屏幕*/ @media (max-width:768px){ body{ grid-template-columns:auto; grid-template-rows:120px 100px 100px auto; grid-template-areas:"header" "nav" "aside" "main" "footer"; }
中等屏幕效果图如下：
小屏幕效果图如下：
怎么样？grid布局够强大的吧？！够简便的吧？！下面是完整的代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>test</title> 8 <style> 9 html{ 10 height: 100%; 11 text-align:center; 12 } 13 body{ 14 margin:0; 15 height:100%; 16 color:red; 17 18 display:grid; 19 grid-template-columns:200px auto 150px; 20 grid-template-rows:120px auto 50px; 21 grid-template-areas: 22 "header header header" 23 "nav main aside" 24 "footer footer footer"; 25 } 26 header{ 27 grid-area:header; 28 background-color:cornflowerblue; 29 } 30 nav{ 31 grid-area:nav; 32 background-color:lightgreen; 33 } 34 main{ 35 grid-area:main; 36 background-color:#ccc; 37 } 38 aside{ 39 grid-area:aside; 40 background-color:orange; 41 } 42 footer{ 43 grid-area:footer; 44 background-color:#000; 45 line-height:50px; 46 } 47 48 /*中等屏幕*/ 49 @media (max-width:992px){ 50 body{ 51 grid-template-columns:1fr 1fr; 52 grid-template-rows:120px 200px auto 50px; 53 grid-template-areas:"header header" 54 "nav aside" 55 "main main" 56 "footer footer"; 57 } 58 } 59 /*小屏幕*/ 60 @media (max-width:768px){ 61 body{ 62 grid-template-columns:auto; 63 grid-template-rows:120px 100px 100px auto; 64 grid-template-areas:"header" 65 "nav" 66 "aside" 67 "main" 68 "footer"; 69 } 70 </style> 71 </head> 72 <body> 73 <header>HEADER</header> 74 <nav>NAV</nav> 75 <main>MAIN</main> 76 <aside>ASIDE</aside> 77 <footer>FOOTER</footer> 78 </body> 79 </html>
View Code