Html 12列CSS网格布局和侧边距/外部排水沟

我正在尝试基于此AdobeXD设计创建一个12列布局（使用CSS网格-无引导）：

以下是我的电脑屏幕尺寸（像素）（全屏宽：1920像素）： 列宽：68px（12倍） 排水沟宽度：40px（11倍） 室外排水沟：228-220px（2次）

如何设置侧边距/外侧排水沟

如果我创建14列（下面的代码），我将有两个40px宽的额外水槽，就在侧面的列旁边。 是否可以为这两个排水沟设置自定义排水沟宽度？ 百分比是定义网格样板列和列间距的正确度量单位吗

在这种情况下，最佳做法是什么？ 我几乎找不到关于这个特定主题的任何信息

正文{
保证金：0；
填充：0；
字体系列：“Poppins”，无衬线；
字号：18px；
}
/*内容的包装*/
.包装纸{
高度：100vh；
显示：网格；
网格模板列：
11.666666 7%/*220-228px此处224*/
重复（12，最小值（044791667%）/*86px每个*/
11.666666 7%/*220-228px此处224*/
;
柱间距：208333333%；/*40px*/
网格模板区域：
“导航”
“哲学。”
“.newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork”
“.类别。”
“.证言证言证言证言证言证言证言证言证言证言证言证言。”
“followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista followinista
“页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器页脚浏览器”
“版权所有”
;
网格模板行：
1235px
858px
1307px
230像素
906px
608px
528px
1fr
；/*85px*/
}
.导航{
背景颜色：青绿色；
网格区域：导航；
}
.哲学{
背景色：rgba（230,45,45,0.50）；
网格区域：哲学；
}
.新作品{
背景色：rgba（50115180,0.50）；
网格区域：最新工作；
}
.类别{
背景色：rgba（120230,45,0.50）；
网格区域：类别；
}
.推荐书{
背景颜色：青绿色；
网格区域：推荐；
}
followOnInsta先生{
背景色：rgba（230,45,45,0.50）；
网格区域：followinsta；
}
.页脚浏览器{
背景色：rgba（50115180,0.50）；
网格区域：页脚浏览器；
}
.版权所有{
背景色：rgba（120230,45,0.50）；
网格区域：版权所有；
}

摄影
航行
哲学
新作品
类别
推荐书
followOnInsta
页脚浏览器
版权

在这种情况下，最好的做法是完全去掉左右排水沟。网格系统对单个

网格

元素使用单个尺寸的

网格柱间隙

。对于

网格

的子项使用

填充

和

边距

，将撕裂网格。所以我认为有两种方法

#1.居中

网格
无左右间隙。
完全摆脱左右差距


.wrapper{
高度：90vh；
宽度：300px；/*您可以在此处设置最大12列+11个间隙宽度*/
边距：0自动；/*这将使.wrapper居中*/
显示：网格；
网格模板列：重复（12，1fr）；
网格列间距：4px；/*类似于40px，但片段非常小*/
背景：青色；
}
.wrapper>div{
背景：绿色；
}