九宫格

一、grid+calc()自适应

.grid-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
  grid-template-rows: repeat(3, 1fr); /* fr单位可以将容器分为几等份 */
  grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
  grid-auto-flow: row;
}

grid+calc()自适应

二、flex+calc()自适应

    width: calc(98% / 3);  /* calc里面的运算符两边要空格 */
    height: calc(98% / 3);

.flex{
  display: flex;
  flex-wrap: wrap;
}
.flex>li{
  flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
  background-color: #4d839c;
  text-align: center;
  color: #fff;
  font-size: 50px;
  line-height: 2;
}

flex+calc()自适应

三、display：table 宽度自适应

display：table 宽度自适应

四、cloumn多栏布局 宽度自适应

cloumn多栏布局 宽度自适应

五、absolute方位值+float，宽度自适应

absolute方位值+float，自适应的网格

六、float + nth-of-type / nth-child 自适应

float + nth-of-type / nth-child