Необычное расположение изображений CSS

162

27 июня 2019, 19:50

Подскажите, пожалуйста, как сделать такую штуку?

Ни с nth-child, ни с чем другим сделать не могу, ничего в голову не приходит.

Заранее спасибо.

Answer 1

Замечания о том что нельзя делать дополнительные вложенные блоки не было

На изображении указаны размеры это и будет размером блоков в том случае если картинки будут фоном а если картинки внутри будут то достаточно их так же стилизовать но в общем дэмо:

demo с появлением при hover скрытого блока

img { 
  display: block; 
  outline: 1px solid #fff; 
} 
 
.items { 
  display: flex; 
  width: 500px; 
  margin: 20px auto; 
} 
 
.wrap { 
  width: 300px; 
  display: flex; 
  flex-wrap: wrap; 
  height: 200px; 
  align-items: flex-start 
} 
 
.roll { 
  position: relative; 
}

<div class="items"> 
  <div class="item"> 
    <div class="roll"><img src="http://placehold.it/200x200" alt=""></div> 
  </div> 
  <div class="wrap"> 
    <div class="roll"><img src="http://placehold.it/210x100" alt=""></div> 
    <div class="roll"><img src="http://placehold.it/90x100" alt=""></div> 
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div> 
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div> 
    <div class="roll"><img src="http://placehold.it/100x100" alt=""></div> 
  </div> 
</div>

Answer 2

На случай нерабочей ссылки, а так grid-template-area - ваше всё

#page { 
  display: grid; 
  width: 100%; 
  height: 250px; 
  grid-template-areas: "head head" 
                       "nav  main" 
                       "nav  foot"; 
  grid-template-rows: 50px 1fr 30px; 
  grid-template-columns: 150px 1fr; 
} 
 
#page > header { 
  grid-area: head; 
  background-color: #8ca0ff; 
} 
 
#page > nav { 
  grid-area: nav; 
  background-color: #ffa08c; 
} 
 
#page > main { 
  grid-area: main; 
  background-color: #ffff64; 
} 
 
#page > footer { 
  grid-area: foot; 
  background-color: #8cffa0; 
}

<section id="page"> 
  <header>Header</header> 
  <nav>Navigation</nav> 
  <main>Main area</main> 
  <footer>Footer</footer> 
</section>

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Так можно блоки вертеть как вам угодно, просто и быстро

Answer 3

Реализация на CSS Grid:

.grid-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    grid-template-areas: "image-1 image-2 image-2 image-3" "image-1 image-4 image-5 image-6"; 
} 
 
.image-1 { 
    grid-area: image-1; 
} 
 
.image-2 { 
    grid-area: image-2; 
} 
 
.image-3 { 
    grid-area: image-3; 
} 
 
.image-4 { 
    grid-area: image-4; 
} 
 
.image-5 { 
    grid-area: image-5; 
} 
 
.image-6 { 
    grid-area: image-6; 
} 
 
/* Для наглядности */ 
.grid-container div { 
    outline: 1px solid red; 
    padding: 20px; 
}

<div class="grid-container"> 
  <div class="image-1">1</div> 
  <div class="image-2">2</div> 
  <div class="image-3">3</div> 
  <div class="image-4">4</div> 
  <div class="image-5">5</div> 
  <div class="image-6">6</div> 
</div>