html - 具有不同宽度项目的列的 css 响应式网格

Question

我有一个有两列的网格，需要在较小的屏幕上更改为两行容器。我一直在这样做repeat(auto-fit, 1fr)。

但现在我想为第一列宽度为 30% 的网格和第二列宽度为 70% 的网格做同样的响应式网格。

我怎样才能让它对不同宽度的项目做出响应？

我试过这个

grid-template-columns: repeat(auto-fit, auto);

或者

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

但没有运气。为什么这不起作用？

我想用网格做到这一点，没有媒体查询

标签： htmlcssresponsive-designcss-grid