当网格容器包含对齐内容属性时，为什么css网格对齐自身不工作？

*{
框大小：边框框；
保证金：0；
填充：0；
}
分区网格容器{
显示：网格；
网格模板列：重复（2,1fr）；
网格间距：1px；
对齐内容：结束；
背景色：#059085；
填充：10px；
颜色：#000；
高度：300px；
宽度：300px；
}
div.grid-container div.grid-item{
最小宽度：100%；
最大高度：25px；
文本对齐：居中；
填充物：5px；
保证金：3倍；
边框：2倍纯白；
颜色：白色；
}
div.grid-container div.grid-item:第一个子项{
对齐自我：开始；
}
#第一个网格项{
对齐自我：开始；
}
div.grid-container>#第一个网格项{
对齐自我：开始；
}

1.
2.
3.
4.

您必须替换

对齐内容：结束与
对齐项目：结束网格容器中的code>可以实现这一点

编辑：

align content
属性用于垂直对齐容器内的整个网格。另一方面，
网格项
只是网格容器内的框，用于控制块轴上的对齐。因此，当使用
align items
时，我们控制网格区域内项目的位置。因此，如果您希望仅将第一个div与顶部对齐，而将其余div与底部对齐，请使用
align items:end而不是
对齐内容：结束是一条路要走。下面是一个例子

这里有更多关于


*{
框大小：边框框；
保证金：0；
填充：0；
}
分区网格容器{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：150px自动；/*已添加*/
网格间距：1px；
对齐项目：结束；/*已添加*/
背景色：#059085；
填充：10px；
颜色：#000；
/*高度：300px；*/*已移除*/
宽度：300px；
}
div.grid-container div.grid-item{
最小宽度：100%；
最大高度：25px；
文本对齐：居中；
填充物：5px；
保证金：3倍；
边框：2倍纯白；
颜色：白色；
}
div.grid-container div：第一个子级{
对齐自我：开始；
}

1.
2.
3.
4.
如何使用对齐内容实现此目的？对齐项目它正在两行之间创建空间。。。但是对齐内容并没有在两行之间创建空间…这就是我使用对齐内容的原因。@Becky有没有办法在显式网格或隐式网格上删除两行网格之间的空间？使用
网格模板行：
和
auto
，而不是为
div.grid-container
指定高度。我刚刚更新了我的答案，将评论放在它们前面，以供您理解。现在这两行之间不会显示空格，因为第二行只有其内容高度。