HTML + CSS Верстка фото портфолио с разными размерами самих фото

Question

Вот в чем собственно дело: Взялся верстать сайт ( Lian- free portfolio remplate ), там есть небольшое портфолио с фотографиями ( скрин есть )

Так вот, в этом портфолио высота у этих фото разная, и они еще "входят" в пустые пространства между другими фото ( как на скрине ). Я пытался сделать это с помощью flex и grid тоже пробовал... Нет, не получилось. Была такая идея: сделать, чтобы блоки ( фото в отдельных блоках содержатся ) подгонялись под высоту каждой из фотографии, тогда они бы сами "входили" в эти пустые пространства между фото. Но вот если и можно сделать, чтобы дочерний элемент брал стили родителя, то наоборот уже сделать нельзя(

Вот код: HTML

<body>
<header>
    <div class="container">

    </div>
</header>
<section class="portfolio">
    <div class="container">
        <div class="port">
            <div class="img">
                <img src="img/image1.png" alt="">
            </div>
            <div class="img">
                <img src="img/image2.png" alt="">
            </div>
            <div class="img">
                <img src="img/image3.png" alt="">
            </div>
            <div class="img">
                <img src="img/image4.png" alt="">
            </div>
            <div class="img">
                <img src="img/image5.png" alt="">
            </div>
            <div class="img">
                <img src="img/image6.png" alt="">
            </div>
            <div class="img">
                <img src="img/image7.png" alt="">
            </div>
            <div class="img">
                <img src="img/image8.png" alt="">
            </div>
            <div class="img">
                <img src="img/image9.png" alt="">
            </div>
            <div class="img">
                <img src="img/image10.png" alt="">
            </div>
        </div>
    </div>
</section>

CSS

 .container{
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
}
header{
   background: grey;
   height:100vh;
}
.port{
   display: flex;
   flex-wrap: wrap;
   justify-content: s`введите сюда код`pace-between;
}

Answer 1

На пример grid css

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 10px;
  height: 100vh;
}

.div1 {
  grid-area: 1 / 2 / 3 / 3;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
}

.div3 {
  grid-area: 1 / 4 / 3 / 5;
}

.div4 {
  grid-area: 2 / 3 / 4 / 4;
}

.div5 {
  grid-area: 3 / 2 / 5 / 3;
}

.div6 {
  grid-area: 4 / 3 / 6 / 4;
}

.div7 {
  grid-area: 6 / 3 / 8 / 4;
}

.div8 {
  grid-area: 5 / 2 / 7 / 3;
}

.div9 {
  grid-area: 3 / 4 / 5 / 5;
}

.div10 {
  grid-area: 5 / 4 / 7 / 5;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="div1">
    <img src="http://placehold.it/100x200" alt="">
  </div>
  <div class="div2">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div3">
    <img src="http://placehold.it/100x200" alt="">
  </div>
  <div class="div4">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div5">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div6">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div7">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div8">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div9">
    <img src="http://placehold.it/200" alt="">
  </div>
  <div class="div10">
    <img src="http://placehold.it/200" alt="">
  </div>
</div>

БЛОГ НА HUSL

HTML + CSS Верстка фото портфолио с разными размерами самих фото

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