九宫格css的几种简单例子

前言

前两天看了一篇文章千万别小瞧九宫格 一道题就能让候选人原形毕露！ ，想起了前几年做公众号h5开发的时候，有一个场景也是做这种九宫格，于是昨天便参考文章中的一些实现方式和想到的几种方式简单的列一列，也方便自己日后回顾。第一次写，多多包涵，有任何问题可以留言，Thanks♪(･ω･)ﾉ。

效果

dom结构

父元素f下面9个子元素item，项目中一般是循环或者写固定元素得到9个子元素，table布局的时候多写了一层li作为item的父元素。custom主要是用来放业务展示内容的容器，比如图标，模块名称，导航目录之类。

<div class="f1">
      <-- <div class="li"> -->
          <div class="item">
              <div class="custom"></div>
          </div>
      <-- </div> -->
  ...
</div>

随手记

需求场景来说，一些需要正方形或者一些需要某个比例，一些需要间隙一些不需要间隙的，加上长宽是否固定px尺寸还是按比例来分，大概就涵盖了这几种情况。 布局主要有几个小点需要注意一下：

1.利用padding做正方形

从w3cschool对padding的描述可知道的细节是百分比是基于父元素宽度的，那就可以做正方形或者其他想要的比例的形状。

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

2.padding后遗症

用padding画图形之后，盒子模型的content的高度是不会受影响的，所以在正方形元素极其子元素通过position来使子元素脱离文档流，然后充满父元素的图形。再利用flex的 justify-content 和 align-items 进行居中或其他位置设置。

3.其他

grid的兼容性自行考虑一下,特别是有做政府项目的。

部分代码

//f1 :table布局 父元素定宽高
 .f1{
    width:300px;
    height: 300px;
    display: table;
    border-spacing: 3px;
    .li{
      display: table-row;
      .item{
        display: table-cell;
        border: 1px solid blue;
        text-align: center;
        vertical-align: middle;
        .custom{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
      .item:hover {
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //table布局 container自适应
  .f2{
    width: 24%;
    height: 24%;
    display: table;
    border-spacing: 3px;
    .li{
      display: table-row;
      .item{
        display: table-cell;
        border: 1px solid blue;
        text-align: center;
        vertical-align: middle;
        padding-top: calc( (100% - 6px) / 3);
        position: relative;
        min-width: 50px;
        min-height: 50px;
        .custom{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
      .item:hover {
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f3 :flex布局 无缝隙 具体宽高
  .f3 {
    width: 300px;
    display: flex;
    flex-flow: wrap;
    .item {
      color: blue;
      width: 98px;
      height: 98px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid;
      box-sizing: border-box;
      margin-top: -1px;
      margin-left: -1px;
      &:nth-child(3n + 1) {
        margin-left: 0px;
      }
      &:nth-child(-n + 3) {
        margin-top: 0px;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f4 :flex布局 无缝隙 自适应宽高
  .f4{
    width: 24%;
    display: flex;
    flex-flow: wrap;
    .item {
      color: blue;
      width: calc(100% / 3);
      border: 1px solid;
      box-sizing: border-box;
      margin-top: -1px;
      margin-left: -1px;
      padding-top: calc(100% / 3);
      position: relative;
      .custom{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:nth-child(3n + 1) {
        margin-left: 0px;
      }
      &:nth-child(-n + 3) {
        margin-top: 0px;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f5 :flex布局 有缝隙 自适应
  .f5{
    width: 24%;
    display: flex;
    flex-flow: wrap;
    .item {
      color: blue;
      width: calc((100% - 20px) / 3);
      border: 1px solid;
      box-sizing: border-box;
      margin:5px;
      padding-top: calc((100% - 20px) / 3 - 2px);//减去border
      position: relative;
      &:nth-child(3n+2){
        margin: 5px 0px;
      }
      .custom{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f6 :grid布局 定宽有缝隙
  .f6{
    display: grid;
    width:300px;
    grid-template-columns: repeat(3,98px);
    grid-template-rows: repeat(3,98px);
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    .item{
      color: blue;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  f7 :grid布局 定宽无缝隙 px
  .f7{
    display: grid;
    width:300px;
    grid-template-columns: repeat(3,100px);
    grid-template-rows: repeat(3,100px);
    .item{
      color: blue;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -1px;
      margin-left: -1px;
      &:nth-child(3n + 1) {
        margin-left: 0px;
      }
      &:nth-child(-n + 3) {
        margin-top: 0px;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f8 :grid布局 定宽有缝隙 fr
  .f8{
    width:300px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    .item{
      color: blue;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -1px;
      margin-left: -1px;
      &:nth-child(3n + 1) {
        margin-left: 0px;
      }
      &:nth-child(-n + 3) {
        margin-top: 0px;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f9 :grid布局 自适应 有缝隙
  .f9{
    width:24%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    .item{
      color: blue;
      border: 1px solid;
      padding-top: calc( 100% - 2px );//border高度2px
      position: relative;
      .custom{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }
  //f10 :grid布局 自适应 无缝隙
  .f10{
    width:24%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    .item{
      color: blue;
      border: 1px solid;
      padding-top: calc( 100% - 2px );//border高度2px
      position: relative;
      margin-top: -1px;
      margin-left: -1px;
      &:nth-child(3n + 1) {
        margin-left: 0px;
      }
      &:nth-child(-n + 3) {
        margin-top: 0px;
      }
      .custom{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:hover{
        color: red;
        border: 1px solid red;
        z-index: 1;
      }
    }
  }

结语

关于gird的基础了解可以参见张鑫旭大佬的写给自己看的display: grid布局教程 ，阮一峰大佬的CSS Grid 网格布局教程 。写的比较粗糙，希望给自己留下一些印象。