grid布局效果初试

grid布局 实现以下图片效果

<!-- 容器 -->
<div class="containter">
   <li class="item" style="background-color: #ef3429;">1</li>
   <li class="item" style="background-color: #f68f25;">2</li>
   <li class="item h_item" style="background-color: #4ba846;">3</li>
   <li class="item" style="background-color: #0476c2;">4</li>
   <li class="item" style="background-color: #c077af;">5</li>
   <li class="item" style="background-color: #f8d29d;">6</li>
   <li class="item" style="background-color: #464131;">7</li>
   <li class="item" style="background-color: #4dc7ec;">8</li>
</div>

.containter{
    display: grid;
    grid-template-columns:  13.73vw 13.73vw 13.73vw;//
    grid-template-rows: 13.73vw 13.73vw 13.73vw; 
    gap:0.66vw;
}
/*设置第三个格子的位置*/
.h_item{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    
}
/*grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高
gap: <grid-row-gap> <grid-column-gap>;
设置行间距 列间距

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
*/