Grid布局

落魄码农在线炒粉 lv.1

发布时间：2022-10-21 16:11:55 263

Grid布局

grid布局看作二维布局，flex看作一维布局

gird网格布局将容器拆分成行和列，产生单元格，看作二维布局

grid-template-columns 属性， grid-template-rows 属性

九宫格

<!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>
        .container {
            display: grid;
            width: 300px;
            /* 列宽 */
            grid-template-columns: 100px 100px 100px;
            /* 行高 */
            grid-template-rows: 100px 100px 100px;
            border: 1px solid black;
        }
        
        .container div:nth-child(odd) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <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>

repeat()

repeat()的作用是简化行高列宽的属性值，他接受两个值，第一个值是重复的次数，第二个值是重复的值(大概意思就是设置每个单元格的宽高一样)，单个值表示所有元素都是一样宽高，但是也可以多个值，每个值之间用空格隔开

<!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> .container { display: grid; width: 300px; /* 列宽 */ grid-template-columns: repeat(3, 100px); /* 行高 */ grid-template-rows: repeat(3, 100px); border: 1px solid black; } .container div:nth-child(odd) { background-color: skyblue; } </style> </head> <body> <div class="container"> <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>

auto-fill 关键字

作用：有时候单元格大小固定，容器不固定，此时希望单元格在每一行或每一列尽量占满，可以使用auto-fill关键字

<!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>
        .container {
            display: grid;
            width: 500px;
            /* 列宽 */
            grid-template-columns: repeat(auto-fill, 100px);
            border: 1px solid black;
        }
        
        .container div:nth-child(odd) {
            background-color: skyblue;
        }
        
        .container div {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <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>

文章来源： https://blog.51cto.com/u_15011997/5768615

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。