Css 如何在网格项和容器之间获得网格间隙？

我怎样才能得到左侧间隙？如您所见，Box1位于左侧，我使用了

网格间距：1em但它只适用于顶部底部和右侧


/*定义字体和像素，以便以后使用em*/
身体{
字体系列：“Poppins”，无衬线；
字体大小：25px；
}
/*BG梯度层+BG元素*/
.BG_梯度{
背景图像：线性梯度（-135度，#FEE140 0%，#FA709A 100%）；
/*填充=10vh顶部+10vh底部=20vh*/
填充：10vh 5vh 10vh 5vh；
/*顶部和底部的衬垫已经是20vh的组合，所以左侧的高度是70vh*/
高度：80vh；
}
/*内容的包装*/
.包装纸{
/*这里我们定义了网格的起点*/
显示：网格；
/*这意味着左冒号是1fr，中冒号是2fr，右冒号是1fr，所以总数是4fr*/
网格模板列：1fr 2fr 1fr；
/*行=垂直，因此最小值应至少为95px，最大值为自动*/
网格自动行：最小最大值（95px，自动）；
网格间距：1米；
/*背景图像：*/
背景：EEF3F4；
盒影：0.90px 0 rgba（0,0,0,0.10）；
边界半径：15px；
高度：500px；
}
.标题{
网格柱：4/4；
}
.左{
背景色：rgba（230,45,45,0.50）；
}
.中{
背景色：rgba（50115180,0.50）；
}
.对{
背景色：rgba（120230,45,0.50）；
}

方框1
方框2
方框3
该属性仅适用于网格项之间。它从不在网格项和网格容器之间应用

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;
    padding: 1em; /* NEW */
}

如果要在项目和容器之间留出间隙，请在容器上使用
padding

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;
    padding: 1em; /* NEW */
}

这里有一种替代方法，允许您使用折叠轨迹将栅格（或柔性）间隙应用于对象的“外部”

此方法非常适合显式页面布局网格，提供了一个强大的单一属性来设置整个站点的边距/檐槽


.parent{
显示：网格；
网格：0重复（3，自动）0/0重复（3，自动）0；
网格模板区域：“…”
“.a b c。”
“.def。”
“.g h i。”
" . . . . . ";   
间隙：0.5em；
宽度：100%；
高度：100vh；
背景：ddd；
}
.孩子{
网格区域：var（--位置）；
宽度：100%；
身高：100%；
背景：#fff；
}
身体{
保证金：0；
}