css - 如何使列宽不均匀的 CSS GRID 具有响应性？

Question

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

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

现在，我想让它具有响应性，这样当屏幕尺寸减小到某个点以上时，列应该彼此重叠，并且每列应该占据容器宽度的 100%。

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

标签： cssresponsive-designresponsivecss-gridgrid-layout

Answer 1

您可以为此使用媒体查询：

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

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