У них в основном есть обертка, в которой все эти строки имеют фиксированную ширину ответа (медиазапросы определяют фиксированную ширину для каждого размера экрана) и display:flex
/ flex-direction:column
, чтобы эти строки складывались друг на другазатем эти строки также сгибаются: с flex-direction:row
в отличие от вашего кода у каждой строки есть 3 делителя, у этих div есть flex:1 0 0%
, поэтому они равномерно разделяют ширину, и у каждого из них есть img внутри каждого img имеет набор определенных размеров ватрибут srcset , имеющий одинаковую высоту.
Таким образом, вы видите, что фиксированная ширина на обертке делится между дочерними элементами, а высота определяется изображениями.
пример ниже
Я разбил ваш пример на две строки, каждая с 3 изображениями, вместо того, чтобы делать то же самое, что они сделали с атрибутом srceset
, чтобы сделать изображения отзывчивыми, я просто собираюсьдайте им фиксированную высоту ради этого объяснения.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 935px !important;
/* Because in here bootsrtap comes after the editor css*/
}
.container>.row {
display: flex;
flex-direction: row;
}
.container>.row>div {
flex: 1 0 0%;
}
.container>.row>div img {
max-width: 100%;
height: 293px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<h1 class="my-4 text-center text-lg-left"></h1>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjiCy5uDPHp/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjhw_0DDAKB/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhXUb5DVo4/media/?size=l" alt="">
</a>
</div>
</div>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhF2fDjc6E/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjgz6KJDw2S/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjggi3mjTxf/media/?size=l" alt="">
</a>
</div>
</div>
</div>