0

Столкнулся с проблемой, сверстал сетку в CSS Grid, но при уменьшении экрана высота блока с сеткой в IE не уменьшается.

.images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: (1fr)[22];
  grid-template-rows: repeat(22, 1fr);
  grid-gap: 5px;
  border: 1px solid black;
}

.images img {
  width: 100%;
}

.image1 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 7;
  grid-row: 1 / 8;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

.image2 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1 / 6;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.image3 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 9;
  grid-row: 1 / 10;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.image4 {
  -ms-grid-row: 10;
  -ms-grid-row-span: 5;
  grid-row: 10 / 15;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.image5 {
  -ms-grid-row: 6;
  -ms-grid-row-span: 9;
  grid-row: 6 / 15;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.image6 {
  -ms-grid-row: 8;
  -ms-grid-row-span: 5;
  grid-row: 8 / 13;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

.image7 {
  -ms-grid-row: 15;
  -ms-grid-row-span: 5;
  grid-row: 15 / 20;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.image8 {
  -ms-grid-row: 15;
  -ms-grid-row-span: 7;
  grid-row: 15 / 22;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.image9 {
  -ms-grid-row: 13;
  -ms-grid-row-span: 7;
  grid-row: 13 / 20;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

.button {
  width: 125px;
  height: 30px;
  text-align: center;
  padding-top: 5px;
  margin-bottom: 70px;
  background-color: #959595;
  text-transform: uppercase;
  color: white;
  border-radius: 5px;
}
<div class="images">
  <div class="image1"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image2"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image3"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image4"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image5"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image6"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image7"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image8"><img src="http://via.placeholder.com/150x150" alt=""></div>
  <div class="image9"><img src="http://via.placeholder.com/150x150" alt=""></div>
</div>

<a href="#" class="button">Load More</a>

Результат:

введите сюда описание изображения

8
  • А можете добавить релевантный HTML и пару картинок для воспроизведения вашей проблемы? А то так сложно с этим работать. 17 мая 2018 в 21:29
  • HTML добавил. Картинка есть 17 мая 2018 в 21:47
  • Смысл в том что блок с картинками не адаптируется по высоте, картинки сжимаются, и пустое пространство внизу увеличивается 17 мая 2018 в 21:49
  • Оно как-то так должно выглядеть? jsfiddle.net/ssfr4wcj В общем выглядит достаточно странно. Если это не оно, то картинки добавьте так, чтобы можно было это запустить и увидеть вашу проблему. 17 мая 2018 в 21:53
  • jsfiddle.net/bopr68zp 17 мая 2018 в 22:11

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.