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

Question

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

Link 到 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;*/
}

Answer 1

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

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

How do I resolve unaligned boxes in grid-area

css

alignment

css-grid