flex-grow、flex-shrink、flex-basis和九宫格布局理解

HTML代码：

<div class="squ-5">
<div class="squ-inner">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>

CSS代码：

.squ-5 {
position: relative;
top: 0;
left: 0;
height: 0;
padding-bottom: 100%;
}
.squ-5 .squ-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: row;
}
.squ-5 .item {
background-color: pink;
border: 1px solid #fff;
}