制作响应式 CSS 网格

Question

我想制作一个占据整个屏幕宽度并且每个元素之间没有任何间隙的响应式网格。

每个元素都必须是正方形。

我想在大屏幕上每行四个元素，在智能手机上每行一个元素。

 #work { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }.post { margin: 0; padding: 0; width: 480px; height: 480px; border: 1px solid red; }

 <div id="work"> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> </div>

结果图片：

结果图片：

在大屏幕上完美，但是当我减小 window 的尺寸时，元素不会 go 在彼此下方但仍然在原位，我可以在 X 中滚动。

我尝试了许多可以在互联网上找到的解决方案，但没有一个有效。

请原谅我可能有任何错误，我是 HTML 和 CSS 的初学者

Answer 1

您可以通过将grid-template-columns设置为 1 来使用@media角色

 #work { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }.post { margin: 0; padding: 0; width: 480px; height: 480px; border: 1px solid red; } @media only screen and (max-width: 800px) { #work { grid-template-columns: repeat(1, 1fr); }.post { width:100%; } }

 <div id="work"> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> </div>

Answer 2

您可以使用 flexbox 执行此操作，并将 flex-wrap 设置为 wrap。

 #work { width: 100%; height: 100%; display: flex; flex-wrap: wrap; }.post { margin: 0; padding: 0; width: 480px; height: 480px; border: 1px solid red; }

 <div id="work"> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> <div class="post"></div> </div>

Answer 3

#work {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  gap: 2rem;
}

.post {
  width: 480px;
  height: 480px;
  border: 1px solid white;
  background: red;
}

大屏幕

移动的

我添加了一个红色背景只是为了演示，你可以调整大小。 但这应该可以帮助您实现您想要做的事情？