Как спрятать некоторые элементы в сетке так, чтобы остальные не съезжали?

Question

[Ratibor]

Как можно осуществить такую сетку https://codepen.io/RatiboR1978/pen/pxdyPg здесь видно что она кривовата как поправить?

Answer 1

[0xD34F]

Что если заменить

.imageContainer:empty {
  height: 0;
  border: none;
}

на

.imageContainer:empty {
  visibility: hidden;
  /* или */
  opacity: 0;
}

??

UPD. Или, добавить box-sizing: border-box; для .imageContainer.

UPD. Или, заменить flex на grid - убрать flex: 0 0 30%; у .imageContainer, а у их родителя пусть будет так:

display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: space-between;

Comments

[Ratibor]

да пашет!) Спасибо!