如何使列宽不均匀的 CSS 网格具有响应性？

Question

我创建了一个 CSS 网格，每行有 2 列。第一列占宽度的 25%，第二列占宽度的 75%。我已经实现了这个使用

    .grid-container{
             display:inline-grid;
             grid-template-columns: 1fr 3fr;
    }

现在，我想让它具有响应能力，以便当屏幕尺寸减小到超过某一点时，该列应该彼此重叠，并且每一列应该占据宽度容器的 100%。

我在网上遇到的每个解决方案都使其具有响应性，但它​​也会将我的初始列宽从 25%:75% 更改为 50%:50%，我想避免这种情况。任何建议或提示将不胜感激。谢谢大家！

Answer 1

您可以使用媒体查询来实现：

.grid-container {
  display:inline-grid;
  grid-template-columns: 1fr 3fr;
}

@media (max-width: 800px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}