响应css网格-如何使第一个项目2 x宽度和响应

我用CSS网格做了如下工作：

（显示当前行为的动画gif）

这是我想要的行为，除了我希望第一个图像是宽度的2倍（即3列，第一个项目跨越2列，如下面的模拟）：

这是我目前掌握的代码

.news容器{
显示：网格；
网格模板列：重复（自动填充，最小值（441px，1fr））；
边缘顶端：2rem；
柱间距：2.33em；
行间距：2.33em；
}
.新闻：第一个孩子{
网格柱：1-2；
}
.新闻项目{
位置：相对位置；
边界半径：10px；
边框：5px实心#fff；
颜色：#fff；
-网络工具包盒阴影：0px 0px 16px-1px rgba（0,0,0,0.11）；
-moz盒阴影：0px 0px 16px-1px rgba（0,0,0,0.112）；
盒子阴影：0px 0px 16px-1px rgba（0,0,0,0.11）；

}

可能吗

---

谢谢

网格区域

可以做到这一点。例如：

.grid容器{
显示：网格；
网格模板列：自动；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
高度：50px；
}
.项目1{
网格面积：1/1/span 2/span 3；
}

1.
2.

如果您只有两张照片，并且在缩小屏幕时希望将第二张照片换行，则使用弹性框更容易：

.container{
显示器：flex；
柔性包装：包装；
间隙：5px；
}
.货柜组{
框大小：边框框；
填充：20px；
背景颜色：绿色；
颜色：白色；
字体：24px无衬线；
}
.一{
弹性基准：441px；
柔性生长：2；
}
.二{
弹性基础：220px；
柔性生长：1；
}

一个
两个

当屏幕尺寸减小时，您的解决方案不会将第二个元素放到下一行。正确，有办法解决。我的目标是帮助OP学习网格区域课程。除了在媒体查询中重新指定网格区域外，有什么方法可以使用网格来处理这个问题？可能有一些，但我不知道。谢谢你的回复-最后还是用这个方法。@Burns非常欢迎你。如果你发现这是你问题的解决方案，请接受它（并投票表决），这样其他有同样问题的人将能够更容易地找到它。