CSS网格没有媒体查询？

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在这里你可以了解更多关于此功能，并使其适应您的需求。