Css 显示：网格。如何将块拉伸到全宽

我正在研究网格。我想把第三个街区伸展到全宽。如果可能，无需添加其他类

是否可以使用内部CSS执行此操作？

.grid{
保证金：36px自动；
高度：120px；
宽度：100%；
显示：网格；
栅隙：8px；
& > * {
边框：点黑色2件；
}
}
.首先{
背景色：#6CD4FF；
网格行：1；
}
.第二{
背景色：#8B8DF9；
网格行：1；
}
.第三{
背景色：#DDFD77；
网格行：2；
}

---

试试这段代码。希望能帮助你

.grid{
保证金：36px自动；
高度：120px；
宽度：100%；
显示：网格；
栅隙：8px；
& > * {
边框：点黑色2件；
}
}
.首先{
背景色：#6CD4FF；
网格行：1；
}
.第二{
背景色：#8B8DF9；
网格行：1；
}
.第三{
背景色：#DDFD77；
网格行：1；
}

您可以使用，它不需要您使用媒体查询，只需要使用CSS网格属性

.second + .third {
  grid-column: 1 / span 2;
}

或：

.grid{
保证金：36px自动；
高度：120px；
宽度：100%；
显示：网格；
栅隙：8px；
& > * {
边框：点黑色2件；
}
}
.首先{
背景色：#6CD4FF；
网格行：1；
}
.第二{
背景色：#8B8DF9；
网格行：1；
}
.第三{
背景色：#DDFD77；
网格行：2；
}
.第二+第三{
格构柱：1/2跨；
}

---

这里有一个更通用的解决方案，您可以使用

nth-child（）

选择器：

.grid{
保证金：36px自动；
高度：120px；
宽度：100%；
显示：网格；
栅隙：8px；
}
.grid>*{
边框：点黑色2件；
}
.首先{
背景色：#6CD4FF；
}
.第二{
背景色：#8B8DF9；
}
.第三{
背景色：#DDFD77；
}
.grid:n个孩子（3）：最后一个孩子{
格构柱：跨度2；
}

但是这会改变HTML结构，为什么说“没有其他类”？。有很多方法可以解决一个问题，所以在这里，你可以在CSS或HTML中进行更改，以实现你的外观。因为不可能只使用CSS，你必须更改HTML结构或添加其他一个附加类。哈！（由于某种原因，我没有考虑）

// A bit more generic
div + .third {
  grid-column: 1 / span 2;
}