• 目录

grid布局

阅读量: 597 编辑

背景渐变色

网格布局,由行和列组成的一个个方格。

display: grid

一、grid布局属性

grid-auto-flow: row;    // 排列的方向,row:行排列(默认)、column:列排列

grid-template-columns:   // 行排列必须指定对应的列数,不指定就是一列

grid-template-columns: auto auto; // 表示两列,也可以用百分比

grid-template-rows:  // 列排列必须指定对应的行数,不指定就是一行

grid-template-rows: auto auto;  // 表示两行,也可以用百分比

grid-template-columns: repeat(12, 1fr);  // 12网格布局

grid-gap: 15px 15px;   // 行间隙、列间隙

justify-content: center; // 在排列的方向上居中

align-items: center;  // 在垂直的方向上居中

二、代码实战

代码的详细解读,可以参考视频教程。

新建 html 文件 13-grid.html,编写下方程序,运行看看效果吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid布局</title>

        <style type="text/css">
            .out-div{
                width: 600px;
                padding: 15px;
                background-color: silver;
                display: grid;

                grid-auto-flow: row;
                grid-template-columns: 20% 30% 30%;

                /**grid-auto-flow: column;
                grid-template-rows: auto auto auto;**/
                grid-gap: 15px 15px;

                justify-content: center;
                align-items: center;
            }
            .in-div{
                width:100%;
                height:50px;
                line-height: 50px;
                background-color: tomato;
                text-align: center;
            }
        </style>

    </head>
    
    <body>
        <div class="out-div">
            <div class="in-div">1</div>
            <div class="in-div">2</div>
            <div class="in-div">3</div>
            <div class="in-div">4</div>
            <div class="in-div">5</div>
        </div>
    </body>
    
</html>


  • 目录