CSS Grid 不具有响应式设计。

Question

CSS Grid 不具有响应式设计。

4

我正在制作一个具有3列和3行的网格，一切都正常，但它不是响应式的。我尝试使用媒体查询，但看起来像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;
  }
}

- aravinvafshe

只需将 grid-template-columns: auto auto auto; 更改为 grid-template-columns: repeat(auto-fit,1fr);。 - Rainbow

5个回答

3

你需要在CSS Grid中使用repeat(auto-fit, minmax(220px, 1fr))以实现响应式布局，无需媒体查询。如果使用repeat(auto-fit, 1fr)或 repeat(auto-fit, auto)或repeat(auto-fit, minmax(auto, 1fr))，将作为块级元素处理且永远不允许其他项（同级）放置在它们旁边。因此我强烈建议您使用repeat(auto-fit, minmax(项的宽度，1fr))或repeat(0, minmax(220px, 1fr))或repeat(auto-fit, minmax(220px, 1fr))来强制网格项给其同级项留出空间。

请在此之后查看我的即将到来的答案，以获得更好的解释。

注意：1FR 将起到块级元素的作用，AUTO 将覆盖至内容大小。在 grid-template-columns 或 grid-auto-columns 中仅使用 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 或 grid-template-columns: repeat(auto-fit,220PX); 来声明网格项内部的宽度，不要分别声明。同时，在 grid-template-rows 或 grid-auto-rows 中也需要声明网格项内部的宽度。

代码沙箱链接 https://codesandbox.io/s/fixed-solution-css-grid-is-not-responsive-8mdow?file=/style.css

- designcoded

1

请问您能否添加一个例子？ - Chiara Ani

我创建了这个设计，编写的代码也是我完成的。请检查我的代码。另外，以下是我的codesandbox链接：https://codesandbox.io/s/fixed-solution-css-grid-is-not-responsive-8mdow?file=/style.css - designcoded

好的回答，但请将代码沙盒添加到您的回答中。 - Chiara Ani

https://codesandbox.io/s/fixed-solution-css-grid-is-not-responsive-8mdow?file=/style.css - designcoded

1

css网格使用grid-template-columns替代宽度，使用grid-template-rows替代高度。

因此，不要使用width:220px;，而应该使用grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));或grid-template-columns: repeat(auto-fit, 220px);

将高度height:120px;替换为grid-auto-rows: 120px;,

因此，请尝试理解css网格的用例，并根据新的css功能替换css属性。

- designcoded

1

您可以将grid-template-columns设置为auto，这样每行将只有一个元素。

._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;
    grid-template-columns: auto;
  }
  .projectPhotos ._a{
    width:300px;
    height:100px;
  }
}

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

- Narek

-1

._a {
  background: gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projectPhotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 120px;
  grid-gap: 40px 60px;
 }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <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>
  </body>
</html>

- designcoded

1

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rian Tavares · Accepted Answer

我认为当你使用 grid-template-columns: auto auto auto; 时，这意味着你将始终拥有一个具有3列的网格布局。为了使其响应式，我建议在您的媒体查询中应用 "grid-template-columns"，例如：

@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;
 }
}

当媒体查询为真时，您正在设置网格只有一列。