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代码

     <!-- S Flex 布局 -->
    <div class="flex-box">
      <div class="title">救护车展区</div>
      <div class="content">
        <ul class="list">
          <li>S1</li>
          <li>S2</li>
          <li>S3</li>
          <li>S4</li>
          <li>S5</li>
          <li>S6</li>
        </ul>
        <div class="center">连廊</div>
        <ul class="list">
          <li>N1</li>
          <li>N2</li>
          <li>N3</li>
          <li>N4</li>
          <li>N5</li>
          <li>N6</li>
        </ul>
      </div>
    </div>
    <!-- E Flex 布局 -->

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;
      }

    <!-- S Grid 布局 -->
    <div class="grid-box">
      <div class="title">救护车展区</div>
      <div class="content">
        <ul class="list">
          <li>S1</li>
          <li>S2</li>
          <li>S3</li>
          <li>S4</li>
          <li>S5</li>
          <li>S6</li>
        </ul>
        <div class="center">连廊</div>
        <ul class="list">
          <li>N1</li>
          <li>N2</li>
          <li>N3</li>
          <li>N4</li>
          <li>N5</li>
          <li>N6</li>
        </ul>
      </div>
    </div>
    <!-- E Grid 布局 -->