Я прописал flex-wrap: wrap; и первая линия нормально выстраивается, а остальные на друг друга. Как можно решить только с помощью флексов и без гридов? Код ниже! Вот ссылка на картинки + скрин проблемы и скрин как нужно P.S. То что я добавил для блоков с картинками 25% наверн это я лишнее сделал...
.content {
display: flex;
flex-wrap: wrap;
}
.content_img {
width: 25%;
}
/*More Images
============================================*/
#more_img {
display: none;
}
<div class="portfolio">
<div class="content">
<div class="content_img" id="hide_img">
<img src="img/content/room-1.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-2.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-3.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-4.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-5.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-6.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-7.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-8.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-9.jpg" alt="Images">
</div>
<div class="content_img" id="hide_img">
<img src="img/content/room-10.jpg" alt="Images">
</div>
<!------------------More Images------------------>
<div class="content_img" id="more_img">
<img src="" alt="Images">
</div>
<div class="content_img" id="more_img">
<img src="" alt="Images">
</div>
<div class="content_img" id="more_img">
<img src="" alt="Images">
</div>
<div class="content_img" id="more_img">
<img src="" alt="Images">
</div>
<div class="content_img" id="more_img">
<img src="" alt="Images">
</div>
</div>
</div>