实现九宫格布局

Tomtu.

已于 2023-04-30 20:59:10 修改

阅读量626

点赞数 2

文章标签： css 前端 css3

于 2022-11-22 14:57:29 首次发布

本文链接：https://blog.csdn.net/m0_54866120/article/details/127982205

版权

前言

实现一个九宫格布局，你能想出几种方法？

基本结构

首先，我们定义好通用的HTML结构：

<div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

接着是公共样式：

*{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 div.box {
     width: 400px;
     height: 400px;
     margin: 100px auto;
     padding: 20px;
     border: 5px solid #ffe09c;
 }

 span {
     background: #626277;
 }

实现

1. flex实现

.box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
    align-content: space-between;
}

.box span {
    width: 32%;
    height: 32%;
}

2. grid实现

 .box {
    display: grid;
    gap: 10px 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

提示：grid-template-areas: ‘a a a’ ‘b b b’ ‘c c c’; 可以代替后两行

3. float实现

 .box span {
    float: left;
    width: 32%;
    height: 32%;
    margin: 0 2% 2% 0;
}
.box span:nth-child(3n) {
   margin-right: 0;
}
.box span:nth-child(n+7) {
   margin-bottom: 0;
}

注意：如果父盒子没有固定高度记得清除浮动！不然会影响其他布局

4. inline-block实现

.box {
    font-size: 0;
}
.box span {
    display: inline-block;
    width: 32%;
    height: 32%;
    margin: 0 2% 2% 0;
}
.box span:nth-child(3n) {
    margin-right: 0;
}
 .box span:nth-child(n+7) {
    margin-bottom: 0;
}

注意：span与span会存在间距，可以在父盒子用font-size:0;或者letter-spacing: -10px;等来消除间距

5. table实现
这个方法跟其他方法相比可能有点特殊，所以我直接贴全部代码！

<!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>九宫格实现</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        div.box {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 5px solid #ffe09c;
        }

        span {
            background: #626277;
        }

        /* table实现 */
        .box {
            display: table;
            border-spacing: 10px;
        }

        .row {
            display: table-row;
        }

        .row span {
            display: table-cell;
            width: 30%;
            height: 30%;
        }
    </style>
</head>

<body>
<div class="box">
        <div class="row"><span></span><span></span><span></span></div>
        <div class="row"><span></span><span></span><span></span></div>
        <div class="row"><span></span><span></span><span></span></div>
    </div>
</body>

</html>