Как разрешить невыровненные поля в области сетки - PullRequest
Новая
       32

Как разрешить невыровненные поля в области сетки

0 голосов
/ 02 мая 2018

В настоящее время я работаю над проектом личного портфолио, и я столкнулся с некоторыми ошибками, которые мне трудно решить. У меня все было хорошо с выравниванием страницы мебели, но когда дело доходит до аксессуаров и границы, которые они должны пересекать), как и другие изображения. Я попробовал все свойства выравнивания и выравнивания, но ни одно из них не сработало и не использовало строки и столбцы сетки. Я получил неправильные размеры изображения? Был бы признателен, если бы эксперт помог решить эту проблему.

Ссылка на репозиторий 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;*/
}

1 Ответ

0 голосов
/ 03 мая 2018

Разобрался, почему появились лишние пробелы. Некоторые элементы в main__nav использовали тот же идентификатор, что и в содержимом #main, поэтому решение состоит в том, чтобы просто переименовать блоки категорий #lighting и #tools в другой уникальный идентификатор.

...