如何制作具有不同列宽、响应式的CSS网格？

Question

我创建了一个CSS网格，每行有2列。第一列占宽度的25％，第二列占宽度的75％。我是通过使用以下方法实现的：

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

现在，我想使其具有响应式设计，这样当屏幕尺寸缩小到一定程度时，列应该排列在彼此上方，每列应占据宽度容器的100%。

我找到的所有解决方案都可以实现响应式设计，但它也会改变我的初始列宽从25％：75％到50％：50％，我想避免这种情况。任何建议或提示将不胜感激。先感谢大家！

- Aftab

Answer 1

您可以使用媒体查询实现此目的：

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

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

- xddz9