时间戳

首页 > 解决方案 > 制作响应式 CSS 网格

html - 制作响应式 CSS 网格

问题描述

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

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

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

#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>

结果图片：

结果图片：

在大屏幕上完美，但是当我减小窗口的大小时，元素不会相互向下但仍然在原位，我可以在 X 中滚动。

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

如有任何错误，请提前原谅，我是 HTML 和 CSS 的初学者

标签： htmlcsscss-grid

解决方案

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

#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>

推荐阅读