CSS：将网格标题与网格元素对齐

我正在尝试用CSS创建一个网格布局。我想在网格上方放置一个标题。我希望标题的左边缘与网格中第一个项目的左边缘对齐。我已经创建了一个网格片段。查看当拖动栅格的容器以调整其大小时，栅格元素与容器边缘之间的宽度如何不同

如何使标题与网格元素的最左边对齐

编辑：当有额外的水平空间时，我希望网格项居中。设置

对正内容：左不是解决方案


.page{
最小宽度：300px；
背景：浅灰色；
填充：12px；
调整大小：水平；
溢出：自动；
}
.电网{
显示：网格；
网格模板列：重复（自动填充，140px）；
栅柱间隙：12px；
网格行间距：12px；
宽度：100%；
证明内容：中心；
}
.网格元素{
颜色：#fff；
溢出：隐藏；
高度：82px；
背景：白色；
}

网格头

您可以给它一个类，然后使用边距对齐它。
添加了
调整内容：flex start到
.grid
类希望这对您有所帮助。谢谢


.page{
最小宽度：300px；
背景：浅灰色；
填充：12px；
调整大小：水平；
溢出：自动；
}
.电网{
显示：网格；
网格模板列：重复（自动填充，140px）；
栅柱间隙：12px；
网格行间距：12px；
宽度：100%；
调整内容：灵活启动；
}
.网格元素{
颜色：#fff；
溢出：隐藏；
高度：82px；
背景：白色；
}

网格头

我只需将标题作为元素添加到跨越所有第一行的网格中即可


.page{
最小宽度：300px；
背景：浅灰色；
填充：12px；
调整大小：水平；
溢出：自动；
}
.电网{
显示：网格；
网格模板列：重复（自动填充，140px）；
栅柱间隙：12px；
网格行间距：12px；
宽度：100%；
证明内容：中心；
}
.网格元素{
颜色：#fff；
溢出：隐藏；
高度：82px；
背景：白色；
}
.grid p{
网格行：1；
网格柱：1/-1；
}

网格头

apply
justify content:左代替
调整内容：中心到
.grid
类但我希望网格项目在剩余空间时在中心对齐。为什么不使用引导网格布局？设置每个网格元素是最好的，而且非常容易。不再使用css您可以使用col-sm-4 col-xs-12等，因为它在根据可用空间更改列数方面不太灵活宽度。对不起，我应该指定的。当有额外空间时，我希望网格项在中心对齐。