Резиновая сетка изображений css - flex/grid

Question

Есть ряд картинок. Нужно сделать резиновую верстку, что бы все четко и плавно менялось при изменении размера контейнера или разрешения экрана. Есть минимальные и макс размер картинок и экрана - от 320 до 760, например. Меж ними 4пикс расстояние. Плитки должны идти слева на право, рядами и пропорционально увеличиваться в размере, сохраняя расстояние, а По-разному пробовал. С Grid проблема в резиновости. Рекламный div меняет размер от размера экрана, так, при большом он встает на правую сторону, на 2 колонки и 3 ряда с 2го (с флекс так понимаю проблема занять ячейки в рядах...)

Сейчас как ни пробую есть искажения то ли в размере, то ли в позиции.

.titlesGrid {
  width: 320px;
  /* 320, 480, 768 */
  display: flex;
  flex-flow: row wrap;
  min-height: 300px;
  grid-gap: 4px;
  /* grid-template-columns: auto auto; */
  background: #33c;
  justify-content: stretch;
  justify-items: stretch;
  align-content: flex-start;
  align-items: center;
  /*	    
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);//minmax(48px, 104px)
  max(calc(160px / 104px * 10vw), 104px, 48px));
  grid-column-gap: 4px;
  grid-row-gap: 4px; 
  @media only screen and (min-width: 768px) {
    grid-column-gap: 20px;
    grid-row-gap: 20px; 
  }
  */
}

.item {
  /* margin: 0 4px 4px 0; */
  display: flex;
  padding: 0;
  /* width: 160px;// calc((160px * 100%) * 2 );*/
  /* height: 104px;max-width: calc(100% - 160px + 4px / 2);*/
  min-width: 73px;
  min-height: 48px;
  max-width: 160px;
  max-height: 104px;
  /*
  width: auto; //calc(100%);
  height: calc(160px / 104px * 100vw);
  calc(100% * 160px / 104px); 
  min(calc(160px / 104px * 10vw), 104px, 48px);
  width: 100%;
  height: 100%;
  width: 4fr;
  height: 1vh;
  width: calc(100% - 160px + 4px / 2);
  height: calc(100% - 104px + 4px / 2);
  */
  background-repeat: no-repeat;
  background-size: contain;
  /* border: 1px solid red; */
  order: 0;
  flex: 1 1 auto;
  /*
  justify-self: flex-start;
  align-self: flex-start;
  object-fit: contain;
  */
  border: 1px solid #f8a;
}

.item:nth-child(1) {
  /* grid-area: 1 / 4 / 2 / 5; */
  background-image: url("https://media.giphy.com/media/aaoiJuarHM1b2/giphy.gif");
}

.item:nth-child(2) {
  /* grid-area: 1 / 3 / 2 / 4; */
  background-image: url("http://www.lebipbip.com/wp-content/uploads/2015/01/lebipbip_160x104.png");
}

.item:nth-child(3) {
  /* grid-area: 1 / 2 / 2 / 3; */
  background-image: url("http://img0.liveinternet.ru/images/attach/c/6/93/362/93362842_large_8.png");
}

.item:nth-child(4) {
  /* grid-area: 1 / 1 / 2 / 2; */
  background-image: url("http://img0.liveinternet.ru/images/attach/d/0/137/39/137039104_5369832__1_.png");
}

.item:nth-child(5) {
  /*
  grid-area: 2 / 1 / 3 / 2;
  flex-shrink: 3;
  */
  background-image: url("https://media.giphy.com/media/aaoiJuarHM1b2/giphy.gif");
}

.item:nth-child(6) {
  /* grid-area: 2 / 2 / 3 / 3; */
  flex-grow: 3;
  background-image: url("http://www.lebipbip.com/wp-content/uploads/2015/01/lebipbip_160x104.png");
}

.adsBlock_1 {
  display: flex;
  min-width: 307px;
  min-height: 80px;
  background: skyblue;
  background-image: url("../images/ad1.png");
  background-repeat: no-repeat;
  /* background-size: contain; */
  order: 0;
  flex: 4 1 auto;
  align-self: stretch;
  border: 1px solid red;
}

<div class="titlesGrid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="adsBlock_2">
    <div></div>
    <div></div>
  </div>
</div>

БЛОГ НА HUSL

Резиновая сетка изображений css - flex/grid

Ответы (0 шт):