九宫格

Posted 2021-10-05 bounsail

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了九宫格相关的知识，希望对你有一定的参考价值。

一、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()自适应