时间戳

首页 > 解决方案 > 调整大小并消失时CSS Grid折叠元素

css - 调整大小并消失时CSS Grid折叠元素

问题描述

我有一排 3 列。

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

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

JSBin 链接

我的造型如下

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

标签： cssresponsive-designcss-gridgrid-layout

解决方案

正如 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，输出

推荐阅读