CSS之布局系列--九宫格布局(自适应)--方法/教程/实例

我就是我 2023-10-01 07:27 13阅读 0赞

原文网址：[CSS之布局系列--九宫格布局(自适应)--方法/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN]

## 简介 ##

本文用示例介绍CSS进行九宫格布局的方法。

朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。

本文只展示自适应布局的方案。不展示手动指定宽度的那种方案。

## 方案1：grid ##

grid是专门用来处理二维的，最适合用来二维布局。

代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 100px 100px 100px;
                grid-gap: 10px;
                padding: 10px;
            }
    
            .item {
                border: 1px solid black;
            }
    
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
    
    </body>
    </html>

结果

![ce62fe70dd3e4a2cae358c5d8156e01c.png][]

## 方案2：flex+calc() ##

因为flex是面向一维的，所以我们需要加上calc这个函数控制其垂直方向。

代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            .container {
                width: 100%;
                display: flex;
                /*换行*/
                flex-wrap: wrap;
            }
    
            .item {
                width: calc(calc(100% / 3) - 10px);
                height: 100px;
                margin: 5px;
                box-sizing: border-box;
                border: 1px solid black;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
    
    </body>
    </html>

结果

![f888e3d7191243508106c3c78dbd13aa.png][]

## 方案3：absolute ##

代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            html,body{
                height:100%;
                margin:0;
            }
            .container{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
            }
            .item{
                float:left;
                height:100px;
                width: calc(calc(100% / 3) - 10px);
                position:relative;
                border: 1px solid black;
            }
            .item:before{
                content:'';
                position:absolute;
                left:10px;
                right:10px;
                top:10px;
                bottom:10px;
                border-radius:10px;
            }
            .item:after{
                content:attr(data-index);
                position:absolute;
                height:30px;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
                text-align:center;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="item" data-index="1">
        </div>
        <div class="item" data-index="2">
        </div>
        <div class="item" data-index="3">
        </div>
        <div class="item" data-index="4">
        </div>
        <div class="item" data-index="5">
        </div>
        <div class="item" data-index="6">
        </div>
        <div class="item" data-index="7">
        </div>
        <div class="item" data-index="8">
        </div>
        <div class="item" data-index="9">
        </div>
    </div>
    
    </body>
    </html>

结果

![296b102fd00d467fad3106c9828123a9.png][]

[CSS_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122094707
[ce62fe70dd3e4a2cae358c5d8156e01c.png]: https://img-blog.csdnimg.cn/ce62fe70dd3e4a2cae358c5d8156e01c.png
[f888e3d7191243508106c3c78dbd13aa.png]: https://img-blog.csdnimg.cn/f888e3d7191243508106c3c78dbd13aa.png
[296b102fd00d467fad3106c9828123a9.png]: https://img-blog.csdnimg.cn/296b102fd00d467fad3106c9828123a9.png