CSS Grid 栅格布局_grid-area: 1-优快云博客

简介

栅格布局能将网页分成简单属性的行和列；
Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个网格容器(grid container)，它的所有直接子元素就成了网格项(grid items)。

举个栗子：
制作一个九宫格的布局展示：
这里写图片描述

第一步：HTML

 <div class="box">
        <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>
 </div>

第二步：介绍grid的使用
.box 是网格栏，.box>div是网格项

.box
    {
        display: grid;
        grid-template-rows: 200px 200px 200px;   
        grid-template-columns: 200px 200px 200px;
    }

grid-template-rows 定义网格中行数和行的高度；
grid-template-columns 定义网格中的列数和列的高度。

fr 单位(等分)

fr 是为网格布局定义的一个新单位。它可以帮助我们摆脱计算百分比，并将可用空间等分。

如果在网格容器中设置这个规则：grid-template-rows: 2fr 3fr，那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起，这里总和为 5，即 5 等分。
也就是说，我们将有 2 行：第一排占据垂直空间的 2/5 。第二排占垂直空间的 3/5 。

所以，我们可以用 fr 单位代替 px

.box 
    {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

为了书写的便利，官方提供 repeat () 函数，第一个是迭代次数，第二个是要重复的值。

//这种写法跟上面的同效
.box
    {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }

grid-template 属性

grid-template 属性是 grid-template-rows 和 grid-template-columns 的简写语法。
//刚刚的九宫格，只需要2行代码就可以实现

 .box
    {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    }

如下展示全部的CSS：

 .box{
       display: grid;
       background-color: #f1f1f1;
       grid-template: repeat(3,1fr) / repeat(3,1fr);
       width: 300px;
       height: 300px;
       margin: auto;
 }
 .box>div{
       text-align: center;
       background-color: #444;
       line-height: 100px;
       font-size: 25px;
 }
 .box>div:nth-of-type(odd){
      background-color: aliceblue;
 }

如果我们想要改变元素的位置，在不更改HTML的前提下，通过 grid 的属性来实现：
如下图：
这里写图片描述

 .box>div:nth-child(6){
         grid-row: 1/2;   //水平网格线
         grid-column: 2/3;    //列网格线的开始和结束
         background-color: red;
     }
或者这样的简写方式也可以：  grid-area: 1 / 2 / 2 / 3;

如果我们想要第六个网格跨越两个网格的宽度，如下图，我们可以这样写：
这里写图片描述

.box>div:nth-child(6){
            grid-area: 1/2/2/4;
            background-color: red;
      }

接下来实现一个网格区域的HTML布局展示，如下：

网格区域命名

grid-area 属性也可以用来命名网格的某一个部分，然后我们可以用 grid-template-areas 属性来定位。
创建一个简单的Html:

<div class="container">
        <header></header>
        <nav></nav>
        <main></main>
        <aside></aside>
        <footer></footer>
</div>

需要使用 grid-area 属性来命名每个区域，然后使用 grid-template-areas 属性来指定每个网格区域所占据的行和列，

 .container{
        display: grid;
        grid-template-rows: 1fr 5fr 1fr;
        grid-template-columns: 2fr 5fr 3fr;
        grid-template-areas:
            "header  header  header"
            "nav     main    aside"
            "footer  footer  footer"; 
                //z注意：header 和 footer 单词重复三次。 这表明，header 和 footer 横跨 3 列的宽度
        grid-gap: .75em;
        background-color: #eee;
        width: 100vw;
        height: 100vh;
    }
      header{
        grid-area: header;
        background-color: #9b59b6;
    }

    nav{
        grid-area: nav;
        background-color: #3498db;
    }

    main{
        grid-area: main;
        background-color: #2ecc71;
    }

    aside{
        grid-area: aside;
        background-color: #f1c40f;
    }

    footer{
        grid-area: footer;
        background-color: #1abc9c;
    }