Chris 向我们展示了不久前，CSS 网格区域及其元素不一定大小相同。这是一个有趣的观点，因为人们可能会假设将内容放入网格区域会使这些内容占据整个空间，但网格区域实际上保留了网格定义的空间，并将元素的justify-content 和 align-items 属性默认设置为 stretch 值。
所以……是的，它们大小相同，但不一定。
Chris 在他的文章结尾处问道“谁在乎？”，同时表示没有特定的人。重点更多地是将此作为需要在网格中对齐内容的人员的起点。
我不确定我是否有更好的答案，但这让我觉得如果我们能够利用这些自动分配的 stretch 值以有趣的方式调整用户界面，将会很有趣。
我并不是说这些都是很好的用例。事实上，它们可能非常愚蠢。也就是说，也许它们可以成为其他想法的起点。
拉伸表单字段
一个想法是为表单字段添加一些交互。如果我们的<form> 是网格容器，那么我们可以设置文本输入，使其从使用start 值的默认宽度开始，然后通过在:focus 状态下切换到stretch 值将其扩展到容器的整个宽度。
.grid__form {
display: grid;
}
.grid__input {
justify-self: start;
}
.grid__input:focus {
justify-self: stretch;
}查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔：CSS 网格：聚焦时网格子元素拉伸。
另一方面，我们已经可以使用 Flexbox 做类似的事情，但好处是flex 是一个可动画属性。
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔：Flexbox：聚焦时子元素拉伸。
老实说，我不确定在聚焦时扩展表单字段会在哪里带来良好的用户体验，但玩起来肯定很有趣。
重新回顾窗帘打开效果
去年，我们发布了一个老式的 CSS 技巧，它使用复选框技巧来创建窗帘打开的效果，以显示其后面的内容。
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔：OXJMmY。
它使用宽度和定位在点击时移动内容，但我们也可以使用网格做类似的事情。同样，这不太健壮，因为它缺乏动画并且不允许窗帘完全打开，但它确实展示了我们如何利用网格元素及其尺寸的stretch、start 和 end 值来实现一些有趣的想法。
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔：CSS 网格窗帘揭示。
还有什么？
网格元素并不总是与网格区域大小相同，这是一个很好的提示，在我们开发布局时可以将其放在脑后。我敢打赌，我们可以想出更多想法，将这个概念提升到另一个层次，并作为一个团队享受其中。如果您有想法，请分享出来！