Подскажите пожалуйста можно ли как-нибудь с помощью flexbox используя только один контейнер-обертку, в котором 6 изображений, выставить их так, как на картинке, чтобы потом при адаптивной вертске они выводились в том порядке, в котором идут цифры на них. У меня только есть идеи как это сделать с помощью нескольких контейнеров. Но потом не смогу вывести в нужном порядке. Ведь, если я правильно понимаю, то свойство order работает только в одном контейнере.
1 ответ
.container {
display: grid;
grid-gap: 20px;
grid-template-areas: "row-1 row-1 row-2" "row-1 row-1 row-2" "row-3 row-5 row-2" "row-4 row-5 row-6";
}
.block {
background-color: #cccccc;
padding: 10px 20px;
}
.block-1 { grid-area: row-1; }
.block-2 { grid-area: row-2; }
.block-3 { grid-area: row-3; }
.block-4 { grid-area: row-4; }
.block-5 { grid-area: row-5; }
.block-6 { grid-area: row-6; }
<div class="container">
<div class="block block-1">
<h1>1</h1>
</div>
<div class="block block-2">
<h1>2</h1>
</div>
<div class="block block-3">
<h1>3</h1>
</div>
<div class="block block-4">
<h1>4</h1>
</div>
<div class="block block-5">
<h1>5</h1>
</div>
<div class="block block-6">
<h1>6</h1>
</div>
</div>
Самое простое на Grid'ах.
grid-template-areas
отвечает за сетку, которую можно задать:
строка - "row-1 row-1 row-2"
строка - "row-1 row-1 row-2"
строка - "row-3 row-5 row-2"
строка - "row-4 row-5 row-6"
Я визуально поделил каждый блок на 3 столбца и 4 строки. И создал некое подобие матрицы. Дальше я дал имена каждому из блоков и просто построил сетку как на вашей картинке.
upd: можно извращаться и сделать на flex'ax но тогда у вас будет не один контейнер и структура вашей верстки будет гораздо больше, нежели воспользоваться тем инструментом, который предназначен для таких целей.