投稿
  1. 高性能架构探索首页
  2. C/C++

Web前端笔记（10）Grid布局

admin • • C/C++ • 阅读 134

Grid网格布局：

Grid布局是一个二维布局方法，横纵两个方向总是同时存在。与flex布局的语法类似，Grid布局涉及到的语法也分为两类，一类是作用在Grid容器上的，另一类是作用在grid子项上的：

a. 作用在Grid容器上的语法：

1. grid-template-column:

2. grid-template-row:

1.2主要是对网格进行划分，形成二维布局，单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位），网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: grid;
            /*grid-template-rows: 50% 50%;*/
            /*grid-template-columns: 25% 25% 25% auto;    !*某一列自适应*!*/
            /*也可以用fr作为单位*/
            grid-template-rows: 1fr 1fr;
            grid-template-columns: repeat(4, 1fr);  /*也可以使用repeat简写*/
        }
        #box div{
            background: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="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>
</body>
</html>

效果如下所示：
Web前端笔记（10）Grid布局

3. grid-template-area: 给网格划分区域，此时grid子项只要使用grid-area属性指定其隶属于那个区

4. grid-template: 是rid-template-row，grid-template-column，grid-template-area属性的缩写：

例如要对上面的九宫格区域进行划分，使得某几个子项成为一个区域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/
            grid-template-areas:                    /*分区*/
                    "A1 A1 A1"
                    "A2 A2 A3"
                    "A2 A2 A3";
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(1){
            grid-area: A1;
        }
        #box div:nth-child(2){
            grid-area: A2;
        }
        #box div:nth-child(3){
            grid-area: A3;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

划分效果如下所示：
Web前端笔记（10）Grid布局

5. grid-column-gap:

6. grid-row-gap:

7. grid-gap:

grid-column-gap， grid-row-gap用来定义网格中网格间隙的尺寸，grid-gap:是他们的缩写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/
            grid-template-areas:                    /*分区*/
                    "A1 A1 A1"
                    "A2 A2 A3"
                    "A2 A2 A3";
            grid-column-gap: 10px;
            grid-row-gap: 5px;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(1){
            grid-area: A1;
        }
        #box div:nth-child(2){
            grid-area: A2;
        }
        #box div:nth-child(3){
            grid-area: A3;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局

8. justify-items:  指定网格元素的水平呈现方式，是水平拉升显示还是左中右对齐显示：  （stretch, start,end center）

9. align-items:   指定网格元素的垂直呈现方式，是垂直拉升显示还是上中下对齐显示：

10. place-items：可以让justify-items，align-items属性写在单个声明中，上述两个的简写（纵横方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/
            justify-items: center;
            align-items: center;
        }
        #box div{
            background: red;
            border: 1px solid black;
            width: 50%;
            height: 50%;
        }

    </style>
</head>
<body>
    <div id="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>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局

11. justify-content： 指定网格元素的水平分布方式

12. align-content： 指定网格元素的垂直分布方式

13. place-content： 上述两个元素的简写

这个是只有在容器偏大的时候才会有作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/
            justify-content: space-around;
            align-content: space-evenly;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="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>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局

items与content中的区别是：

items是针对300x300的九宫格，每个大小是100x100, 在每个100x100的格子里，控制里面元素的呈现位置：

content针对的500x500的九宫格，每个大小是100x100, 控制9个100x100的格子在500x500的大容器中的表现方式：

b. 作用在Grid子项上的语法：

1. grid-column-start: 水平方向上所占据的起始位置

2. grid-column-end:  水平方向上所占据的结束位置

3. grid-row-start： 垂直方向上所占据的起始位置

4. grid-row-end： 垂直方向上所占据的结束位置

5. grid-column：grid-column-start，grid-column-end的复合写法

6. grid-row:  grid-row-start， grid-row-end的复合写法

7. grid-area：表示当前网格所占用的区域， 名字和位置两种表示方法，相当于上述的复合写法：  （值用/隔开）

表示子项所占的区域的大小，行列的起始位置，例如，行的第一条线依次向下编号，列的第一条线从左到右依次编号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/
            border: 1px black solid;
        }
        #box div{
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
            background: red;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
    </div>
</body>
</html>

效果如下所示：
Web前端笔记（10）Grid布局

8. justify-self：单个网格元素水平对齐方式

9. align-self：单个网格元素垂直对齐方式

10. place-self：justify-self， align-self的缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/
            border: 1px black solid;
        }
        #box div{
            background: red;
            border: 1px solid black;
        }

        #box div:nth-child(5){
            justify-self: left;
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div id="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>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局

Grid布局案例：

利用grid布局实现骰子效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 800px;
            display: grid;
            grid-template-rows: repeat(1, 1fr);
            grid-template-columns: repeat(6, 1fr);
            border: 1px solid gray;
            justify-items: center;
        }

        #box1{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(1, 1fr);
            justify-items: center;
            align-items: center;
        }
        #box1 div{
            width: 40%;
            height: 40%;
            border-radius: 50%;
            background: black;
        }

        #box2{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box2 div{
            width: 60%;
            height: 60%;
            background: black;
            border-radius: 50%;
        }

        #box2 div:last-child{
            width: 60%;
            height: 60%;
            background: black;
            border-radius: 50%;
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box3{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box3 div{
            width: 80%;
            height: 80%;
            background: black;
            border-radius: 50%;
        }

        #box3 div:nth-child(2)
        {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box3 div:nth-child(3)
        {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        #box4{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box4 div{
            width: 55%;
            height: 55%;
            background: black;
            border-radius: 50%;
        }

        #box5{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box5 div{
            width: 75%;
            height: 75%;
            background: black;
            border-radius: 50%;
        }

        /*注： 在方格中，如果中间的点被移到其它地方去，空出来的位置后面的点会自动填补上来*/
        #box5 div:nth-child(5)     
        {
            /*background: red;*/
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        #box5 div:nth-child(4)
        {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        #box5 div:nth-child(3)
        {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box5 div:nth-child(2)
        {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
        }

        #box6{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
            align-items: center;
        }

        #box6 div{
            width: 75%;
            height: 55%;
            background: black;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div id="box1">
            <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>

    </div>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局

 

原文链接: https://www.cnblogs.com/ncepubye/p/12723985.html

欢迎关注

微信关注下方公众号，第一时间获取干货硬货；公众号内回复【pdf】免费获取数百本计算机经典书籍;

也有高质量的技术群，里面有嵌入式、搜广推等BAT大佬

    Web前端笔记（10）Grid布局

原创文章受到原创版权保护。转载请注明出处：https://www.ccppcoding.com/archives/396431

非原创文章文中已经注明原地址，如有侵权，联系删除

关注公众号【高性能架构探索】，第一时间获取最新文章

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
adminadmin
0 0
上一篇 2023年4月6日 上午11:19
下一篇 2023年4月6日 上午11:19

相关推荐