Css网格没有响应 [英] css grid is not responsive

问题描述

我正在制作一个具有3列3行的grid一切正常，但它不是responsive我尝试使用media queries，但它看起来像this。

有什么解决方案吗？

<div class="projectPhotos">
 <div class="_a p1">1</div>
 <div class="_a p2">2</div>
 <div class="_a p3">3</div>
 <div class="_a p4">4</div>
 <div class="_a p5">5</div>
 <div class="_a p6">6</div>
 <div class="_a p7">7</div>
</div>

._a{
  width:220px;
  height:120px;
  background:gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color:white;
  margin: auto;
}
.projectPhotos{
  display: grid;
  grid-template-columns: auto auto auto;
  box-sizing: border-box;
  grid-gap: 40px 60px;
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .projects{
    width:350px;
  }
  .projectPhotos{
    grid-gap:10px 10px;
  }
  .projectPhotos ._a{
    width:300px;
    height:100px;
  }
}

推荐答案

我想当您使用grid-template-columns: auto auto auto;时，这意味着您将始终拥有一个包含3列的网格。 我建议您只需在媒体查询中应用"网格-模板-列"，例如：

@media only screen and (max-width: 600px) {
 .projects{
   width:350px;
 }
 .projectPhotos{
   grid-template-columns: auto;
   grid-gap:10px 10px;
 }
 .projectPhotos ._a{
   width:300px;
   height:100px;
 }
}

通过这种方式，您可以设置当媒体查询为真时，您的网格将只有一列。

这篇关于Css网格没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！