css - 调整大小时的CSS Grid折叠元素，使其消失

我有一排3列。

当我调整页面大小时，我希望元素保持其宽度，但是如果任何元素不能适应调整后的屏幕尺寸，那么我希望它下降到下一行。

我正在尝试使用CSS网格做到这一点。

JSBin Link

我的风格如下

  .wrapper {
    display: grid;
    grid-template-columns: 20% 30% 40%;
    grid-gap: 1em;
  }

最佳答案

如JTS所述，您需要使用媒体查询。

 @media screen and (max-width:900px) {
      .wrapper {
          display: grid;
          grid-template-columns: 50% 50%;
          grid-gap: 1em;
        }
    }

    @media screen and (max-width:576px) {
      .wrapper {
          display: grid;
          grid-template-columns: 100%;
          grid-gap: 1em;
        }
    }

您可以检查引导程序的标准断点，并根据该断点创​​建自己的断点
https://getbootstrap.com/docs/4.0/layout/overview/

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

您可以检查更新的JS Bin代码

https://jsbin.com/bulaqigexi/1/edit?html,output