CSS Grid 网格布局

wangjie

2020-03-01

关注关注

CSS Grid 网格布局

网格布局在二维画面里我认为还是非常好用的，所以我打算分享一下我对网格布局的粗浅认知，

所以我打算以一个简单地案例加以分析说明情况，

想了想，就用骰子吧，它的六个面很适合做一通详解

首先，当然是创建总体

然后稍稍分析写好结构，第一个因为只有一个点所以一个div,第二个有两个点所以两个div，第三个有三个点所以三个div。以此类推。

CSS Grid 网格布局

再接着写用到的用到的选择器，很容易知道我要用到六个盒子每个面有对应的点数自然也就写几个div

CSS Grid 网格布局

准备工作做好，然后开始书写再BOX中给长和宽以及边框，当然弄个圆角可以美化一下，

留出一点空间，然后转grid，接着经过分析:

父元素的设置-通过display:grid将盒子转成网格布局，在通过grid-template-columns和grid-template-rows将盒子设计成三行三列，

用grid-template-areas给每个区域赋予名号；

子元素的设置：因一点在中间，故而grid-area:a5,将div放到中间a5区域，

又因要居中所以在父容器加上justify-items：center以及align-items:center

CSS Grid 网格布局

第二面，当然就好书写了，首先面一样大，所以直接写，注意div

思考得知二点位置a1+a9

CSS Grid 网格布局

然后是三点位置a1+a5+a9

CSS Grid 网格布局

以此类推，书写好每个面得点数。ok这样我们就书写完成了

接下来给大家看一下全部布局、结构以及效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
    display: grid;
    grid-template-rows: repeat(3 , 1fr);
    grid-template-columns: repeat(3 , 1fr);
    grid-template-areas: 
    "a1 a2 a3"
    "a4 a5 a6"
    "a7 a8 a9";
    justify-items: center;
    align-items: center;}
    #box div{ width:20px; height:20px; border-radius: 50%; background:black;
        grid-area: a5;}

    #box2{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
        display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
        justify-items: center;
        align-items: center;}
    #box2 div{ width:20px; height:20px; border-radius: 50%; background:black;}
    #box2 div:nth-of-type(2){ grid-area: a9; }

    #box3{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
        display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
        justify-items: center;
        align-items: center;}
    #box3 div{ width:20px; height:20px; border-radius: 50%; background: black;}
    #box3 div:nth-of-type(2){ grid-area: a5; }
    #box3 div:nth-of-type(3){ grid-area: a9; }

    #box4{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
        display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
        justify-items: center;
        align-items: center;}
    #box4 div{ width:20px; height:20px; border-radius: 50%; background:black;}
    #box4 div:nth-of-type(2){ grid-area: a3; }
    #box4 div:nth-of-type(3){ grid-area: a7; }
    #box4 div:nth-of-type(4){ grid-area: a9; }
    #box5{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
        display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
        justify-items: center;
        align-items: center;}
    #box5 div{ width:20px; height:20px; border-radius: 50%; background:black;}
    #box5 div:nth-of-type(2){ grid-area: a3; }
    #box5 div:nth-of-type(3){ grid-area: a5; }
    #box5 div:nth-of-type(4){ grid-area: a7; }
    #box5 div:nth-of-type(5){ grid-area: a9; }
    #box6{ width:100px; height:100px; border:1px black solid; border-radius: 15px; margin:10px; 
        display: grid;
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
        justify-items: center;
        align-items: center;}
    #box6 div{ width:20px; height:20px; border-radius: 50%; background:black;}
    #box6 div:nth-of-type(2){ grid-area: a3; }
    #box6 div:nth-of-type(3){ grid-area: a4; }
    #box6 div:nth-of-type(4){ grid-area: a6; }
    #box6 div:nth-of-type(5){ grid-area: a7; }
    #box6 div:nth-of-type(6){ grid-area: a9; }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
</body>
</html>

CSS Grid 网格布局