删除css网格中的空白

我有下面的代码，我有一个页面的4个部分-一个画廊，一个电子商务部分，一些内容和一些行动呼吁

.wrapper{
显示：网格；
网格模板列：1fr；
}
@介质（最小宽度：750px）{
.包装纸{
网格模板柱：1fr 1fr；
}
}

画廊
电子商务
电子商务
电子商务
内容
CTAs

我认为唯一的解决方案是使用额外的包装器，并依靠

显示：内容

.wrapper{
显示：网格；
网格模板列：1fr；
边框：1px实心；
保证金：5px；
}
.wrapper>div{
显示：内容；
}
.wrapper>div:first child>div:first child{
顺序：1；
}
.wrapper>div:first child>div:last child{
顺序：3；
}
.wrapper>div:last child>div:first child{
顺序：2；
}
.wrapper>div:last child>div:last child{
顺序：4；
}
@介质（最小宽度：750px）{
.包装纸{
网格模板柱：1fr 1fr；
}
.wrapper>div{
显示：块；
}
}

画廊
内容
电子商务
电子商务
电子商务
CTAs
画廊
内容
内容
内容
电子商务
CTAs