如何使列宽不均匀的 CSS GRID 响应迅速？

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;
  }
}