Question

我目前正在从事个人投资组合项目，而且我遇到了一些我难以解决的错误。我在家具页面对齐方面做得很好，但是当涉及到accessories.html时，tools.jpg和decorative-accents.jpg就没有正确对齐，即使它们的高度和宽度成比例相同（我考虑到了差距）与其他图像一样，它们必须交叉。我尝试了所有对齐和对齐属性但没有工作，也没有使用网格行和列。我的图像尺寸错了吗？如果专家可以帮助解决这个问题，我将不胜感激。

链接到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。

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

1 个答案: