使网格响应式

Question

有什么办法可以使这个网格响应式吗？

这是我的CSS：

最初的回答：

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px;
    background-color: #fff;
    color: #444;
    }

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

.a {
    grid-column: 1 / 3;
    grid-row: 1;
}
.b {
    grid-column: 3 ;
    grid-row: 1 / 3;
}
.c {
    grid-column: 1 ;
    grid-row: 2 ;
}
.d {
    grid-column: 2;
    grid-row: 2;
}

HTML

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

我尝试了这段代码：

@media only screen and (max-width:500px) {
   .box  {
      width: 100%;  
      margin-right: 0;
      float: none;  
      margin-bottom: 20px !important;
   }

如何最好地完成这个任务？

最初的回答

- Sara Z

---

在媒体查询中将 display: grid; 更改为 display:block，这应该就足够了。 - Temani Afif

在移动设备上应该如何显示？仍然是网格状，还是只是将块堆叠在彼此下面？ - elveti

@elveti 只是将块堆叠在彼此下面。 - Sara Z

@TemaniAfif 谢谢。我已经这么做了，而且我已经能够工作了。只是我不再有 div 下面的空白了。有任何想法吗？提前感谢。 - Sara Z

将边距添加到div以替换间隙。 - Temani Afif

另一个使用auto-fill的响应式想法-尝试在https://jsfiddle.net/1oghwvkj/中更改窗口宽度。 - kukkuz

Answer 1

我同意@Petra的观点，你需要使用fr，但如果想在移动设备上以堆叠方式显示它们，则需要使用媒体查询。您也可以将显示更改为块。确保在初始CSS之后添加这些内容，以免被覆盖。

“Original Answer”翻译成中文是“最初的回答”。

@media screen and (max-width: 512px) {
    .wrapper {
        grid-template-columns: 1fr;
    }
}

- Arvind

---

谢谢@Arvind，我试了一下，它可以工作（同时将显示更改为块），只是我不再有div下面的间隙了。有什么想法吗？提前感谢。 - Sara Z

Answer 2

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #fff;
    color: #444;
    }

使用CSS Grid布局，我们获得了一种新的灵活单位：Fr单位。Fr是一种分数单位，1fr表示可用空间的1部分。

- Petra