Html 如何在一行中显示3列，其余列将使用显示网格显示在中心？

我的页面上有图像（将来会增加），我正在使用

display:grid

。现在我的问题是，我必须在一行中显示3列，其余的将显示网格的中心

我说的是

display:grid

而不是

display:flex

我得到的输出像

我的期望输出是这样的

.gridWrap{
宽度：1024px；
保证金：自动；
}
.gridWrap-ul{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：25px；
证明内容：中心；
列表样式：无；
左侧填充：0；
}
.gridWrap ul img{
宽度：100%；
}

我建议使用bootstraps

，然后将这两个a标记放在一个div中，放在同一块中，就像

，然后在上面使用一些随机类，比如

class=“bottom pictures”

，然后在那个类上使用align..我对css非常不在行，但我试图帮助：D

---

我建议使用bootstraps

，然后将这两个a标记放在一个div中，放在同一块中，就像

，然后在上面使用一些随机类，比如

class=“bottom pictures”

，然后在那个类上使用align..我在css方面非常糟糕，但我试图帮助你：D..

我建议你使用引导，这样你就可以使用引导容器轻松地完成这些工作。但是我有一个解决方案，使用

网格列开始

和

网格列结束

.gridWrap{
宽度：1024px；
保证金：自动；
}
.gridWrap-ul{
显示：网格；
网格模板列：自动；
栅隙：25px；
列表样式：无；
左侧填充：0；
}
.box1{
网格列开始：1；
网格柱端：3；
}
.box2{
网格列开始：3；
网格柱端：5；
}
.box3{
网格列开始：5；
网格柱端：7；
}
.box4{
网格列开始：2；
网格柱端：4；
}
.box5{
网格列开始：4；
网格柱端：6；
}
.gridWrap ul img{
宽度：100%；
}

我建议您使用引导，这样您就可以使用引导容器轻松完成这些工作。但是我有一个解决方案，使用

网格列开始

和

网格列结束

.gridWrap{
宽度：1024px；
保证金：自动；
}
.gridWrap-ul{
显示：网格；
网格模板列：自动；
栅隙：25px；
列表样式：无；
左侧填充：0；
}
.box1{
网格列开始：1；
网格柱端：3；
}
.box2{
网格列开始：3；
网格柱端：5；
}
.box3{
网格列开始：5；
网格柱端：7；
}
.box4{
网格列开始：2；
网格柱端：4；
}
.box5{
网格列开始：4；
网格柱端：6；
}
.gridWrap ul img{
宽度：100%；
}

这就是您要找的吗@EliteCardboard，预期输出正确，但他们使用了display:flex。我使用的是display:grid。你不能切换到display flex吗？不，我不能更改它。除非你添加一些javascript，否则这将是不可能的，就像他们在那里解释的那样，你不能用纯css和display grid实现这一点。这就是你想要的吗@EliteCardboard，预期输出正确，但他们使用了display:flex。我正在使用display:grid。你不能切换到display flex吗？不，我不能更改它。除非你添加一些javascript，否则就不可能了，就像他们在那里解释的那样，纯css和display grid无法实现这一点。我不能使用引导。我需要纯css。我不能使用引导。我需要纯css。为什么使用网格模板列：auto；？“栅格模板列”属性指定栅格布局中的列数（和宽度）。value

auto

表示列的大小由容器的大小和列中项目的内容大小决定。我将网格划分为7个部分，并将特定的列分配给特定的框。ref：为什么使用网格模板列：自动；？“栅格模板列”属性指定栅格布局中的列数（和宽度）。value

auto

表示列的大小由容器的大小和列中项目的内容大小决定。我将网格划分为7个部分，并将特定的列分配给特定的框。裁判：