Question

我在下面有一个简单的网格，它可以工作，但是我一直在努力消除媒体查询。我是在考虑这个问题，还是在没有媒体查询的情况下有一种更有效的方法？

.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;
    }
}

Answer 1

在网格中使用媒体查询没有天生的错误或效率低下。如果愿意，可以在某些情况下（例如，如果您有统一卡片的列表）避免使用自动放置。代码看起来像这样：

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

此代码来自MDN article，在这里您可以了解有关此功能的更多信息并使其适应您的需求。

没有媒体查询的CSS网格？

1 个答案: