我需要使用CSS网格布局创建一个如下图所示的布局,分辨率在900px以上时:-
对于分辨率低于900px的情况,我需要布局看起来像这样:
到目前为止,我已经尝试了这个:-
上面的代码创建了图片1,但我无法将其更改以适应900px以下的布局更改(图片2)。
如何在CSS网格中创建此布局,以便创建上面图像中提到的布局?
你可以在这里找到我的代码: jsfiddle
![enter image description here](https://istack.dev59.com/QaFub.webp)
![enter image description here](https://istack.dev59.com/fGqCC.webp)
到目前为止,我已经尝试了这个:-
.container {
display: grid;
grid-template-columns: 250px auto 250px;
grid-column-gap: 1rem;
}
上面的代码创建了图片1,但我无法将其更改以适应900px以下的布局更改(图片2)。
如何在CSS网格中创建此布局,以便创建上面图像中提到的布局?
你可以在这里找到我的代码: jsfiddle