CSS网格如何对设置的列数使用自动调整

Question

我将网格设置为2列，一列的设置宽度为350px，另一列占据了其余空间：

<div class="container">
  <div class="item1">
  <div class="item2"> 
</div>

这两个元素的容器样式如下：

container: {
    padding: 25,
    display: 'grid',
    gridColumnGap: '80px',
    gridTemplateColumns: 'auto 350px',
    margin: '64px auto',
    alignItems: 'flex-start',
    maxWidth: '1440px',
  },

如何使该设置具有响应性，以便在没有足够的屏幕宽度时，一项会低于另一项？

Answer 1

使用媒体查询。

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