css布局方式，实现四宫格，九宫格，16宫格等切换

最新推荐文章于 2025-04-07 21:56:56 发布

原创最新推荐文章于 2025-04-07 21:56:56 发布 · 6.1k 阅读

14 ·

CC 4.0 BY-SA版权

HTML+CSS学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍两种实现自适应网格布局的方法：一是通过CSS绝对定位结合浮动布局；二是利用现代的CSS Grid布局特性。前者适用于需要兼容老旧浏览器的情况，后者则提供更简洁强大的网格布局解决方案。

1.借助absolute方位值，实现自适应的网格布局，用伪元素间隔

absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。
最外层的父元素使用absolute负责占位，给子元素们把空间拉开，或者固定宽高也行
效果图
在这里插入图片描述

ul{
      height: 100%;
      padding: 0;
      position:absolute;
      left:0;
      top:0px;
      right:0;
      bottom:0;
      li{
        float:left;
        height:33.3%;
        width:33.3%;
        position:relative;
        /*background-color: #FE6278;*/
        &::before{
          content:'';
          position:absolute;
          left:6px;
          right:6px;
          top:6px;
          bottom:6px;
          border-radius:6px;
          background-color: #666666;
        }
      }
    }

2.直接用grid网格布局

效果图

<ul :class="['box', 'box_9']" ref="container">
        <li :class="['item', i==selectedGridIndex?'item_active':'']"
          v-for="(item, i) in grids" >
        </li>
</ul>

.box{
      display: grid;
      box-sizing: border-box;
      height: 100%;
      padding: 0;
      .item{
        box-sizing: border-box;
        background-color: #666666;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.21);
        cursor: pointer;
        position: relative;
        &_active{
          border: 1px solid #FE6278;
        }
      }
    }
    .box_1{
      grid-template-columns: repeat(1, 100%); //1列，占100%
      grid-template-rows: repeat(1, 100%); //1行，占100%
    }
    .box_4{
    //四宫格
      grid-template-columns: repeat(2, 50%); //2列，各占50%
      grid-template-rows: repeat(2, 50%);//2行，各占50%
    }
    .box_9{
    //9宫格
      grid-template-columns: repeat(3, 33.33%);//3列，各占33.33%
      grid-template-rows: repeat(3, 33.33%);//3行，各占33.33%
    }
    .box_16{
      grid-template-columns: repeat(4, 25%);//4列，各占25%
      grid-template-rows: repeat(4, 25%);//4行，各占25%
    }