Пытаюсь сверстать вот этот блок
Сделал на flexbox но почемуто мне кажется что это бред:
.con {
display: block;
width: 80%;
margin: 0 auto;
}
.imgs {
margin-top: 40px;
display: flex;
justify-content: space-between;
width: 92%;
margin-left: auto;
margin-right: auto;
}
.left_imgs {
margin-right: 30px;
}
.col2 {
justify-content: space-between;
display: flex;
}
.right_imgs {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.imgs img {
display: block;
max-width: 100%;
height: auto;
}
<section class="sec2">
<div class="con">
<div class="imgs">
<div class="left_imgs ibox">
<img src="http://via.placeholder.com/540x540" alt="">
</div>
<div class="right_imgs">
<div class="col1 ibox">
<img src="http://via.placeholder.com/540x255" alt=""></div>
<div class="col2">
<div class="left_imgs2 ibox">
<img src="http://via.placeholder.com/255x255" alt="">
</div>
<div class="right_imgs2 ibox">
<img src="http://via.placeholder.com/255x255" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
- Можно ли сверстать данный блок более легким правильным и кроссбраузерным способом?
- Почему не масштабируются изображения на IE по классу
.imgs img
в css? - И наконец самый волнующий: Как сделать так чтобы на мобильных устройствах срабатывал медиа запрос и 3 изображения справа вставали под картинкой 540x540. Учил гриды и видел там подобное но ,во первых,услышал много советов о том что пока не стоит их юзать из за слабой кроссбраузерности а ,во вторых, интересно было узнать можно ли осуществить данную адаптивность более укоренившимися методами.(PS Слышал что есть в бутстрапе какая то сетка но от него я пока что совсем далек.)
Было бы приятно услышать разъяснение по этим вопросам. Заранее спасибо:)