CSS3使用 Flex 和 Grid 分别实现布局

有小伙伴问如何实现如下效果图，于是用Flex 和 Grid 分别实现了代码，当然table和float 都可以实现，本文只是用flex和grid实现效果。

关于Flex和Grid兼容性，可以前往 Caniuse 进行查询。
Demo源码地址
Demo演示地址

效果图

image.png

部分公用CSS代码(颜色和宽高)

      /* 通用样式 */
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .center {
        background-color: #99c3ff;
      }
      .title {
        height: 50px;
        background-color: #e7bdf3;
      }
      .list li:nth-child(1) {
        background-color: #fb7293;
      }
      .list li:nth-child(2) {
        background-color: #ff9f7e;
      }
      .list li:nth-child(3) {
        background-color: #ffdb5c;
      }
      .list li:nth-child(4) {
        background-color: #9fe7b9;
      }
      .list li:nth-child(5) {
        background-color: #32c5e9;
      }
      .list li:nth-child(6) {
        background-color: #36a3db;
      } 

Flex 实现

• CSS 代码

      /* Flex 布局 */
      .flex-box {
        width: 300px;
        color: #fff;
        text-align: center;
      }
      .flex-box .title {
        height: 50px;
      }
      .flex-box .content {
        padding-top: 8px;
        display: flex;
      }
      .flex-box .center {
        flex-basis: 50px;
        margin: 0 5px 8px;
      }
      .flex-box .list {
        flex: 1;
      }
      .flex-box .list li {
        height: 50px;
        margin-bottom: 8px;
      }

• HTML代码

     
    

      
救护车展区
      

        

          
S1
          
S2
          
S3
          
S4
          
S5
          
S6
        
        
连廊
        

          
N1
          
N2
          
N3
          
N4
          
N5
          
N6
        
      
    
    

Grid 实现

      /* Grid 布局 */
      .grid-box {
        display: grid;
        grid-template-columns: 300px;
        text-align: center;
        color: #fff;
        grid-row-gap: 8px;
      }
      .grid-box .content {
        display: grid;
        grid-template-columns: 120px 50px 120px;
        grid-column-gap: 5px;
      }
      .grid-box .list {
        display: grid;
        grid-auto-rows: 50px;
        grid-row-gap: 8px;
      }

    
    

      
救护车展区
      

        

          
S1
          
S2
          
S3
          
S4
          
S5
          
S6
        
        
连廊
        

          
N1
          
N2
          
N3
          
N4
          
N5
          
N6