css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）

css实现九宫格，但不一定有9个，可能有8个、7个，每两个格子间距是10px,一行放置3个格子，格子宽高比为1：2（最右的面试题）

 <div class="box">
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
</div>

首先我们使用flex实现九宫格
1.父元素使用flex布局，项目自动换行

.box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid yellow;
    background: green;
  }

2.然后设置宽高和边距

.box>div {
    width: calc((100% - 20px) / 3);
    height: calc((100% - 20px) / 3 * 2) ;
    margin-right: 10px;
    border: 1px solid red;
 }

3.使用伪类选择器把最右边元素的margin去掉
:nth-child(n)选择器的作用是匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。

.box :nth-child(3n) { // 第3个第6个第9个的右边距去掉
	margin-bottom: 0
}

然后我们发现，宽高比1：2还没有不对呢，我上边所写的height也用calc去计算，想当然的也是用宽度去计算了，但是height:100%参考的父元素的高度呀，父元素高度是依靠子元素撑起来的，子元素高度又是由父元素计算的，这两个变成了相互依赖的关系，哈哈哈哈，我可真是个🐷脑子呢

那么宽高比1：2怎么实现呢，我们又不能使用js去动态的设置和获取，终极boss是使用padding来实现此功能

我们发现，宽度的自适应是根据viewport的width来调整的，比如我们设置的{width: 100%} {width: 50%}就是占浏览器可视区域的全部或者一半，resize之后也会自动调整

而height也是根据viewport的height来调整的，要想找到一个能跟width扯上关系的，就是padding了

因为Padding就是根据viewport的width来计算调整的（我也是今天刚知道……），哪怕是padding-top或者是padding-bottom都是这样，所以通过设置padding就能设置height

设置height为0，padding-bottom为width的值就是1：1，再* 2不就是1:2了吗

width: calc((100% - 20px) / 3);
padding-bottom: calc((100% - 20px) / 3 * 2);

然后我们想要的效果它就实现咯~

窗口resize也是可以的！