CSS实现9宫格布局的4种方法：flex、float、grid、table布局

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、实现效果及html代码

1、实现效果

在这里插入图片描述

2、html代码

<body>
    <div class="container">
      <div style="background-color: red">1</div>
      <div style="background-color: blue">2</div>
      <div style="background-color: green">3</div>
      <div style="background-color: pink">4</div>
      <div style="background-color: orange">5</div>
      <div style="background-color: orchid">6</div>
      <div style="background-color: burlywood">7</div>
      <div style="background-color: royalblue">8</div>
      <div style="background-color: coral">9</div>
    </div>
  </body>

二、flex布局实现

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .container div {
    width: 33%;
    text-align: center;
    height: 150px;
  }
</style>

三、float布局实现

<style>
  .container div {
    float: left;
    width: 33%;
    height: 150px;
  }
</style>

四、grid布局实现

<style>
  .container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .container div {
    height: 150px;
    text-align: center;
  }
</style>

五、table布局实现
html结构

 <body>
   <div class="container">
     <div class="item">
       <div style="background-color: red">1</div>
       <div style="background-color: blue">2</div>
       <div style="background-color: green">3</div>
     </div>
     <div class="item">
       <div style="background-color: pink">4</div>
       <div style="background-color: orange">5</div>
       <div style="background-color: orchid">6</div>
     </div>
     <div class="item">
       <div style="background-color: burlywood">7</div>
       <div style="background-color: royalblue">8</div>
       <div style="background-color: coral">9</div>
     </div>
   </div>
 </body>

<style>
      .container {
        display: table;
        width: 100%;
        height: 100%;
      }
      .item {
        display: table-row;
      }
      .item div {
        display: table-cell;
        height: 150px;
      }
    </style>