Html Css网格：居中对齐两行中不同数量的项目

我必须将7个

div

s（图像）放在两行，3个放在第一行，4个放在第二行。顶部3

div

s应该居中，底部4可以占据所有空间

以下是我所做的：

.content{
显示：网格；
栅隙：10px；
网格模板列：1fr重复（3170px）1fr；
网格模板区域：“.item1 item2 item3。”
“第4项第5项第6项第7项”；
网格模板行：1fr 1fr；
}
.content.box{
宽度：170px；
高度：170px；
边框：实心1px#000；
}
.content.box:第n个子项（1）{
网格区域：框1；
}
.content.box:第n个子项（2）{
网格区域：框2；
}
.content.box:第n个子项（3）{
网格区域：框3；
}
.content.box:第n个子项（4）{
网格区域：框4；
}
.content.box:第n个子项（5）{
网格区域：框5；
}
.content.box:第n个子项（6）{
网格区域：方框6；
}
.content.box:第n个子项（7）{
网格区域：框7；
}

1.
2.
3.
4.
5.
6.
7.

CSS更改： 消除所有CSS代码（在您的问题中），并用此代码替换它。使用

网格模板列：1fr重复（3170px）1fr把事情搞砸了，因为它不能同时表示两行框。使用网格模板列：重复（自动拟合，最小值（170px，1fr））允许浏览器/系统确定该特定行的实际位置和它允许每行做自己的事情。使用
放置项目：结束中心表示希望所有内容居中，但希望系统从末尾开始，然后居中。这可以防止事物被卡在最左边。注意：你不需要任何其他的CSS来达到你想要的效果。只有
.content
和
.box
类。没有别的了

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    place-items: end center;
}

.box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

HTML更改：
将您的html替换为（如下）。这将把盒子分成两行。我用
.content
包装了每一行，这样它们就可以包含不同数量的框而不会出现问题

<div class="content">
  <div class="box">1</div>
   <div class="box">2</div>
  <div class="box">3</div>
</div>

<div class="content">
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>


1.
2.
3.
4.
5.
6.
7.

我希望我的解释能帮助您更好地理解CSS网格布局。：）
 您可以使用
网格模板列：重复（12，1fr）
创建12列网格：

将第一行的列跨度调整为4，第二行的列跨度调整为3

使用
justify items:center
将容器与中心对齐，以获得中心对齐

现在，您可以调整跨度或使用所需布局的
justify self

请参见下面的演示：


.content{
显示：网格；
网格模板列：重复（12，1fr）；
栅隙：10px；
证明项目：中心；
}
.content.box{
高度：170px；
宽度：170px；
边框：实心1px#000；
}
.box:n个孩子（1），.box:n个孩子（2），.box:n个孩子（3）{/*前三个盒子*/
格构柱：跨度4；
}
.box:n子项（3）~.box{/*最后4个框*/
格构柱：跨度3；
}
/*如有必要，进行校准调整*/
.box:第n个孩子（1）{
自我证明：柔性端；
}
/*如有必要，进行校准调整*/
.box:第n个孩子（3）{
自我证明：灵活启动；
}

1.
2.
3.
4.
5.
6.
7.
顾名思义，网格的形状必须是网格。这意味着列数必须是所有行的空间

因此，浏览器不接受您的区域样式，因为第一行有5列，第二行有4列

@kukkuz已经发布了一个答案来纠正这个问题。在这里你有另一种可能性，在我的VIE中更适合你的要求

无论如何，这个布局的最佳解决方案可能是使用flex（因为布局不是真正的网格）


.content{
显示：网格；
栅隙：10px；
网格模板列：重复（8100px）；
网格模板区域：“清空box1 box1 box2 box2 box3 box3 emp2”
“第四箱第四箱第五箱第五箱第六箱第六箱第七箱第七箱”；
网格模板行：1fr 1fr；
}
.content.box{
宽度：180px；
高度：170px；
边框：实心1px#000；
}
.content.box:第n个子项（1）{
网格区域：框1；
}
.content.box:第n个子项（2）{
网格区域：框2；
}
.content.box:第n个子项（3）{
网格区域：框3；
}
.content.box:第n个子项（4）{
网格区域：框4；
}
.content.box:第n个子项（5）{
网格区域：框5；
}
.content.box:第n个子项（6）{
网格区域：方框6；
}
.content.box:第n个子项（7）{
网格区域：框7；
}

1.
2.
3.
4.
5.
6.
7.
从选择器中删除空格，并使用在中定义的名称areas@TemaniAfif这是与解决方案有关还是只是对代码进行样式化？这是为了纠正错误的代码（解决方案）。选择器中的空格是有意义的，它不仅仅是用来设计代码的样式（）很好的答案！！谢谢。这是我无法理解的简单数学。谢谢@elbrant。我用两个单独的网格/行提出了类似的解决方案。