grid布局

最新推荐文章于 2024-04-22 17:46:42 发布
m0_56168677
最新推荐文章于 2024-04-22 17:46:42 发布
阅读量95
点赞数
文章标签：前端 css css3
本文链接：https://blog.csdn.net/m0_56168677/article/details/132641361
版权
<!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>

    <!-- CSS Grid 网格布局教程: https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html -->

    <style>
        body {
            padding-bottom: 1000px;
        }

        .grid-box {
            /* 
            
            grid-template-columns属性定义每一列的列宽，
            grid-template-rows属性定义每一行的行高 

            repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
            
            */
            grid-template-columns: repeat(auto-fill, 300px);
            grid-gap: 50px;
        }

        .grid {
            display: grid;
        }

        .box {
            width: 300px;
            height: 300px;
            border: 1px #000 solid;
        }

        .item {
            background-color: var(--color);
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }

        .grid-box1 {
            /* 列 */
            grid-template-columns: repeat(auto-fill, 100px);
            /* 行 */
            grid-template-rows: repeat(auto-fill, 100px);
        }

        .grid-box2 {
            /* 第一列的宽度为150像素，第二列的宽度是第三列的一半。 */
            grid-template-columns: 150px 1fr 2fr;
        }

        .grid-box3 {
            /* grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。 */
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            /* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式 */
            /* grid-gap: 10px; */
        }

        .grid-box4 {
            /* 
            grid的项目 顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"
            grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
             */
            grid-auto-flow: column;
        }





        /* 
            grid-template-areas 是定义在容器上

            grid-area、grid-row-start、grid-column-start、grid-row-end、grid-column-end 属性 都是定义在项目上面
            grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 
            grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
        */
        .grid-box5 {
            grid-template-columns: repeat(15, 1fr);
            grid-template-areas: "a a a a a b b b b b c c c c c"
                "e e e f f f g g g h h h j j j";
            grid-gap: 10px;
        }

        .grid-box5-item-1 {
            grid-area: a;
        }

        .grid-box5-item-2 {
            grid-area: b;
        }

        .grid-box5-item-3 {
            grid-area: c;
        }

        .grid-box5-item-4 {
            grid-area: e;
        }

        .grid-box5-item-5 {
            grid-area: f;
        }

        .grid-box5-item-6 {
            grid-area: g;
        }

        .grid-box5-item-7 {
            grid-area: h;
        }

        .grid-box5-item-8 {
            grid-area: j;
        }
    </style>
</head>

<body>
    <h1>grid布局</h1>
    <div class="grid grid-box">
        <div class="grid box grid-box1">
            <div class="item" style="--color:#000">1</div>
            <div class="item" style="--color:#ccc">2</div>
            <div class="item" style="--color:#bbb">3</div>
            <div class="item" style="--color:#aaa">4</div>
            <div class="item" style="--color:red">5</div>
            <div class="item" style="--color:#4dc7ec">6</div>
            <div class="item" style="--color:#b4a87f">7</div>
            <div class="item" style="--color:#f68f25">8</div>
            <div class="item" style="--color:#4ba846">9</div>
        </div>


        <div class="grid box grid-box2">
            <div class="item" style="--color:#000">1</div>
            <div class="item" style="--color:#ccc">2</div>
            <div class="item" style="--color:#bbb">3</div>
            <div class="item" style="--color:#aaa">4</div>
            <div class="item" style="--color:red">5</div>
            <div class="item" style="--color:#4dc7ec">6</div>
            <div class="item" style="--color:#b4a87f">7</div>
            <div class="item" style="--color:#f68f25">8</div>
            <div class="item" style="--color:#4ba846">9</div>
        </div>


        <div class="grid box grid-box1  grid-box3">
            <div class="item" style="--color:#000">1</div>
            <div class="item" style="--color:#ccc">2</div>
            <div class="item" style="--color:#bbb">3</div>
            <div class="item" style="--color:#aaa">4</div>
            <div class="item" style="--color:red">5</div>
            <div class="item" style="--color:#4dc7ec">6</div>
            <div class="item" style="--color:#b4a87f">7</div>
            <div class="item" style="--color:#f68f25">8</div>
            <div class="item" style="--color:#4ba846">9</div>
        </div>

        <div class="grid box grid-box1 grid-box4">
            <div class="item" style="--color:#000">1</div>
            <div class="item" style="--color:#ccc">2</div>
            <div class="item" style="--color:#bbb">3</div>
            <div class="item" style="--color:#aaa">4</div>
            <div class="item" style="--color:red">5</div>
            <div class="item" style="--color:#4dc7ec">6</div>
            <div class="item" style="--color:#b4a87f">7</div>
            <div class="item" style="--color:#f68f25">8</div>
            <div class="item" style="--color:#4ba846">9</div>
        </div>

        <div class="grid box grid-box5">
            <div class="item grid-box5-item-1" style="--color:#000">1</div>
            <div class="item  grid-box5-item-2" style="--color:#ccc">2</div>
            <div class="item  grid-box5-item-3" style="--color:#bbb">3</div>
            <div class="item  grid-box5-item-4" style="--color:#aaa">4</div>
            <div class="item  grid-box5-item-5" style="--color:red">5</div>
            <div class="item  grid-box5-item-6" style="--color:#4dc7ec">6</div>
            <div class="item  grid-box5-item-7" style="--color:#b4a87f">7</div>
            <div class="item  grid-box5-item-8" style="--color:#f68f25">8</div>
        </div>


    </div>

</body>

</html>