Сжимайте столбцы CSS-сетки с той же скоростью

Question

Я использую сетку CSS.Столбцы и строки этой сетки установлены на «авто».Каждая ячейка в сетке содержит (среди прочего) изображение, которое определяет размеры.

Сетка выглядит следующим образом: Проблема заключается в следующем: когда я уменьшаю размер экрана,соотношение ячеек сетки не поддерживается.Кажется, что крайний левый столбец сокращается первым:

Это приводит к безобразным целям в сетке.Как я могу гарантировать, что сетка постоянно растет и сжимается при идеальном сохранении изображений, определяющих внешний вид?

Вот простая версия CSS сетки с сопровождающим fiddle .

   .grid {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    display: grid;
    position: relative;
    grid-gap: 12px 12px;
    }

    .element_1 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .element_2 {
          grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
    }
    .element_3 {
      grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .element_4 {
          grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    .img-responsive {
      width: 100%;
      height: auto;
    }

Answer 1

Вот решение, ваш css файл

.grid {
  display: grid;
}

.grid > div img {
  display:inline-block;
  vertical-align:middle;
}

.element_1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}
.element_1 img {
  padding-top:0;
  padding-left:0;
}
.element_2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}
.element_2 img {
  padding-top:0;
  padding-right:0;
}
.element_3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 5;
}
.element_3 img {
  padding-bottom:0;
  padding-left:0;
}
.element_4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}
.element_4 img {
  padding-bottom:0;
  padding-right:0;
}

.img-responsive {
  box-sizing:border-box;
  padding:6px;
  width: 100%;
  height: auto;
}

@media screen and (max-width:480px) {
  .img-responsive {
    padding:3px;
  }
}

Вы можете увидеть запущенный пример и поиграть с исходным кодом здесь jsbin