时间戳

首页 > 解决方案 > 没有媒体查询的 CSS 网格？

css - 没有媒体查询的 CSS 网格？

问题描述

下面我有一个简单的网格，它可以工作，但我一直在摸索如何消除媒体查询。我是不是想多了，或者有没有更有效的方法可以在没有媒体查询的情况下做到这一点？

.wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1em;
    grid-auto-rows: minmax(100px, auto);
}

.wrap>div {
    padding: 1em;
    border: solid orange 1px;
}

@media (max-width: 1000px) {
    .wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

标签： cssmedia-queriescss-gridgrid-layout

解决方案

将媒体查询与网格一起使用并没有本质上的错误或低效。如果您愿意，可以通过使用自动放置在某些情况下（例如，如果您有统一卡的列表）避免它们。代码看起来像这样：

.listing {
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}

此代码来自MDN 文章，您可以在其中了解有关此功能的更多信息并根据您的需要进行调整。

推荐阅读