如果 window 变小，使 div 跳到另一行（使用 CSS 网格）

Question

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

但我想知道这是否可以单独使用 CSS 网格来完成？

假设我有这样的事情：

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

.item-1,
item-2,
item-3 {}

<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。我的问题是是否可以这样说："If when window is minimized, and a div inside the .containerdiv get smaller that some value (like 200px), then move the outermost right div (.item-3) below item-1 and follow the same width path as item-1 and not stretch to be as wide as both item-1and item-2".

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

Answer 1

"If when the window is minimized, and a div inside the .container div gets smaller that some value (like 200px), then move the outermost right div (.item-3) below item-1 and follow the same width path as item-1 and not stretch to be as wide as both item-1and item-2.

当项目变得小于 200 像素宽时，浏览器如何知道您想要重新安排布局？

当媒体功能被触发时，浏览器应该如何知道要做什么？

所以，是的，您将需要媒体查询。这正是他们的目的。

如果 window 变小，使 div 跳到另一行（使用 CSS 网格）

Make div jump down on another row if window gets smaller (with CSS Grid)

css

responsive-design

css-grid