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

IT利刃出鞘

已于 2022-12-29 23:10:52 修改

阅读量6.2k

点赞数 51

分类专栏： CSS 文章标签： css html css3

于 2021-12-22 23:53:13 首次发布

本文链接：https://blog.csdn.net/feiying0canglang/article/details/122094707

版权

CSS 专栏收录该内容

43 篇文章

订阅专栏

原文网址：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>

结果

方案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>

结果

方案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>

结果