Как сделать чтобы фотографии были также слитно?

Question

[Danil2134]

<section class="photo">
          <div class="photo__section">
            <div class="photo__text-title">
              <h2 class="photo__title">Наше портфолио</h2>
              <p class="photo__text">Недавние проекты</p>
            </div>
            <div class="photo__colage">
              <img class="photo__photo" src="Images/house1.jpg" alt="" />
              <img class="photo__photo" src="Images/house2.jpg" alt="" />
              <img class="photo__photo" src="Images/house3.jpg" alt="" />
              <img class="photo__photo" src="Images/house4.jpg" alt="" />
              <img class="photo__photo" src="Images/house5.jpg" alt="" />
              <img class="photo__photo" src="Images/house6.jpg" alt="" />
              <img class="photo__photo" src="Images/house7.jpg" alt="" />
              <img class="photo__photo" src="Images/house8.jpg" alt="" />
            </div>
          </div>
        </section>

.photo__section {
  height: 857px;
  display: flex;
  display: inline-block;
  justify-content: space-between;
  align-items: center;
}

.photo__photo {
  width: 477px;
  height: 357px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  margin-left: 0;
  /*vertical-align: right;
  /*justify-content: space-between;
  flex-direction: column;*/
}

Answer 1

[Сергей delphinpro]

Практически весь код нужно выкинуть..

/*.photo__section {*/
.photo__colage {
  /*height: 857px;*/
  /*display: flex;*/
  /*display: inline-block;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.photo__photo {
  /*width: 477px;*/
  /*height: 357px;*/
  /*position: relative;*/
  /*flex-direction: column;*/
  /*justify-content: space-between;*/
  background-size: cover;
  /*margin-left: 0;*/
  /*vertical-align: right;
  /*justify-content: space-between;
  flex-direction: column;*/
}

Answer 2

[Егор Живагин]

.photo__section {
  height: 857px;
  display: flex;
  // здесь вы перетираете display flex на inline-block, из-за этого flex-свойства работать не будут
  display: inline-block;
  justify-content: space-between;
  align-items: center;
}

.photo__colage {
// это стили для обёртки, а не для элементов
  display: flex;
  flex-wrap: wrap;
}
.photo__photo {
  width: 477px; // это же для одного фото? Если для обёртки, то надо перенести в . photo__colage
  height: 357px;
  position: relative;
  background-size: cover;
  margin-left: 0;
  // не знаю, зачем вам здесь эти стили, но без display: flex они не сработают
  flex-direction: column;
  justify-content: space-between;
}