时间戳

首页 > 解决方案 > 如何解决网格区域中未对齐的框

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

问题描述

我目前正在从事个人投资组合项目，但遇到了一些我难以解决的错误。我在家具页面对齐方面做得很好，但是当涉及到 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;*/
}

标签： cssalignmentcss-grid

解决方案

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

推荐阅读