Question

所以我最近发现CSS Grid变得越来越成熟，即现在大多数浏览器都支持它 - 这对我当前的项目来说很好。我不需要IE 7，因此能够以最佳方式查看此网页。而且我知道，当屏幕变小时，你可以通过媒体查询做一些聪明的事情，

但我想知道是否可以单独使用CSS Grid吗？

所以让我说我有这样的事情：

%timeit

.container {
  display: grid;
  max-width: 1200px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 25px;
}

.item-1,
item-2,
item-3 {}

因此，如果没有太多样式，这应该只会导致三列具有相同大的div。我的问题是，是否可以这样说：“如果窗口最小化，并且<div class="container"> <div class="item-1">Some content</div> <div class="item-2">Some content</div> <div class="item-2">Some content</div> </div> div内的div变小某个值（如.container），那么移动最右边的div（200px）位于.item-3下方，并且遵循与item-1相同的宽度路径，并且不会延伸到与item-1和item-1一样宽的范围

这可以用一种简单的方式完成，我真的需要媒体查询吗？

Answer 1

＆＃34;如果窗口最小化，并且.container div内的div变小某个值（如200px），则将最右边的div（.item-3）移到{{ {1}}并遵循与item-1相同的宽度路径，并且不会延伸到与item-1和item-1一样宽的范围。

当项目的宽度小于200px时，浏览器应该知道您想要重新排列布局吗？

如果触发媒体功能，浏览器应该知道该怎么做？

所以，是的，您需要媒体查询。这正是它们的用途。

如果窗口变小，使div跳到另一行（使用CSS Grid）

1 个答案: