Bootstrap отлично подходит как сетка для структурирования скелета вашего сайта, но, к сожалению, не для этой цели.
аюсь построить галерею в виде каменной кладки, но я не могу разобраться с упаковкой флексбоксов?
У меня есть простой список UL, и я добавил необходимый стиль, но все не плавается и не переносится, как должно.
.masonry {
margin: 48px -2px;
padding-left: 0;
list-style: none;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
.masonry li {
height: 300px;
flex-basis: calc(33.33% - 4px);
margin: 2px;
text-align: center;
display: flex;
background-color: #C9F4FF;
}
.masonry li:nth-child(1), .masonry li:nth-child(7) {
height: 604px;
background-color: #FFB4FF;
}
.masonry li:nth-child(4), .masonry li:nth-child(4) {
flex-basis: calc(66.66% - 4px);
background-color: #B9EDA8;
}<!-- masonry starts -->
<ul class="masonry">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<!-- masonry ends -->Результат выглядит так, что довольно забавно :)
Может быть, кто-то знает, как написать правильный CSS, чтобы правильно обернуть вещи?