如何解决网格区域中未对齐的框答案

【问题标题】：How do I resolve unaligned boxes in grid-area如何解决网格区域中未对齐的框
【发布时间】：2018-05-02 09:54:33
【问题描述】：

我目前正在从事个人投资组合项目，但遇到了一些我难以解决的错误。我在家具页面对齐方面做得很好，但是当涉及到 Accessories.html 时，tools.jpg 和 decorating-accents.jpg 没有正确对齐，即使它们具有相同的比例高度和宽度（我考虑了间隙和他们必须跨越的边界）作为其他图像。我尝试了所有的 align 和 justify 属性，但没有一个起作用，也没有使用网格行和列。我是不是把图片尺寸弄错了？如果专家可以帮助解决此问题，将不胜感激。

GitHub 存储库链接： https://github.com/helloyellowmellowcello/WareHouse_FurnitureRetail/tree/Redesign_%231

.product__list {
 display: grid;
  min-width: 1189px;
  grid-template-areas: 'fabric fabric organisation'
                     'mirrorsclocks mirrorsclocks organisation'
                     'bedroom bathroom dining-room'
                     'kitchen decorativeaccents patio'
                     'lighting decorativeaccents tools';
  /*grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(3, 1fr);*/
}

#fabric {
  grid-area: fabric;
  /*grid-column: 1 / span 2;
  grid-row: 1 / 2;*/
}

#organisation {
  grid-area: organisation;
  max-height: 731px;
  /*grid-column: 3 / span 1;
  grid-row: 1 / 3;*/
}

#decorativeaccents {
  grid-area: decorativeaccents;
  max-height: 731px;
  /*grid-column: 2 / span 1;
  grid-row: 4 / 6;*/
}

#lighting {
  grid-area: lighting;
 /*grid-column: 1 / span 1;
  grid-row: 5 / 6;*/
}

 #mirrorsclocks {
  grid-area: mirrorsclocks;
  /*grid-column: 1 / span 2;
  grid-row: 2 / 3;*/
}

#bedroom {
  grid-area: bedroom;
  /*grid-column: 1 / span 1;
  grid-row: 3 / 4;*/
}

#bathroom {
  grid-area: bathroom;
  /*grid-column: 2 / span 1;
  grid-row: 3 / 4;*/
}

#dining-room {
  grid-area: dining-room;
  /*grid-column: 3 / span 1;
  grid-row: 3 / 4;*/
}

#kitchen {
  grid-area: kitchen;
  /*grid-column: 1 / span 1;
  grid-row: 4 / 5;*/
}

#patio {
  grid-area: patio;
  /*grid-column: 3 / span 1;
  grid-row: 4 / 5;*/
}

#tools {
  grid-area: tools;
  /*grid-column: 3 / span 1;
  grid-row: 5 / 6;*/
}

【问题讨论】：

看起来你已经注释掉了你的大部分代码。要么你使用网格模板解决方案，然后你需要：grid-template-columns、grid-template-rows、grid-template-areas。 ..或您在注释代码中设置的每个网格个体。请创建一个代码 sn-p 或一个指向可访问代码的网站的共享链接。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
@Paulie_D 我已经在上面的帖子中提供了指向 github 存储库的链接。它对公众开放，您可以下载包含代码的整个repo：github.com/helloyellowmellowcello/WareHouse_FurnitureRetail/…我没有发布整个代码sn-p的原因是因为它涉及一个单独的html文件，以及一个文件中的几个图像我已经在 html 文件中链接了（问题可能是图像大小本身。我想知道根本原因是什么，这就是我要问的原因）。 css 代码是最短的，这就是我在我的 qn 中发布的原因。
@Toolbox ：我已经在上面的帖子中提供了指向 github 存储库的链接。它对公众开放，您可以下载包含代码的整个repo：github.com/helloyellowmellowcello/WareHouse_FurnitureRetail/…我没有发布整个代码sn-p的原因是因为它涉及一个单独的html文件，以及一个文件中的几个图像我已经在 html 文件中链接了（问题可能是图像大小本身。我想知道根本原因是什么，这就是我要问的原因）。 css 代码是最短的，这就是我在我的 qn 中发布的原因。
我们不应该下载任何东西来为您重新创建问题。您始终可以使用占位符图像。同样，如果我们无法从代码中重现问题在实际问题中，我们将无法诊断它。 帮助我们帮助您... * 提供一个使用 Stack Snippets 的演示*

标签： css alignment css-grid

【解决方案1】：

弄清楚为什么会有额外的空格。 main__nav 中的某些元素使用与#main 内容中相同的 id，因此解决方案是简单地将类别块 #lighting 和 #tools 重命名为另一个唯一 id。

【讨论】：