轻轻松松学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

posted on 2020-10-11 16:00 沙漠中的绿洲2019 阅读(0) 评论(0) 编辑收藏

秒客网

轻轻松松学CSS:Grid布局

相关文章