GRID 网格布局-多种组合排列布局

最新推荐文章于 2024-10-16 11:23:07 发布

lifies

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量156

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/juanzhang91008/article/details/141158719

版权

效果：

代码：

<html>
    <head>
        <style>
         .main {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            background: skyblue;
            gap: 5px;
         }
         .main div{
            background: pink;
         }
         .main div:nth-of-type(1){
            grid-area: 2/2/span 2/span 2;
            background: pink;
         }

        </style>
    </head>
    <body>
        <div class="contanit">
            <div class="main">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
            
        </div>

    </body>
</html>