Как исправить поведение элементов?

Question

[Robert Bl]

Колонки ведут себя хаотичным образом если одна из колонок другой высоты

Answer 1

[Maksym Davydchuk]

.articles {
display: flex;
flex-wrap: wrap;
}

Comments

[iBird Rose]

может все таки на родителя?

[Maksym Davydchuk]

iBird Rose: да

Answer 2

[Astrohas]

.row{
  columns-count: 3;
  columns-gap: 20px;
  vertical-align: top;
}
.coll-md-3{
  width: 33%;
  vertical-align: top;
  border: 1px solid #000;
  display: inline-block;
  min-height: 200px;
}

конечно костыльно, но

Answer 3

[iBird Rose]

расставить clearfix. Примерно так:

<div class="row">
	<div class="col-lg-4 col-sm-6"></div>
	<div class="col-lg-4 col-sm-6"></div>
	<div class="clearfix visible-sm visible-md"></div> //через каждые 2
	<div class="col-lg-4 col-sm-6"></div>
	<div class="clearfix visible-lg"></div> //через каждые 3
	<div class="col-lg-4 col-sm-6"></div>
	<div class="clearfix visible-sm visible-md"></div>
	<div class="col-lg-4 col-sm-6"></div>
	<div class="col-lg-4 col-sm-6"></div>
	<div class="clearfix visible-sm visible-md"></div>
	<div class="clearfix visible-lg"></div>
	<div class="col-lg-4 col-sm-6"></div>
</div>

Answer 4

[Михаил Захаров]

Для родителя:

div {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0; 
}

Для блоков:

div>* { 
  width: 33.3%;
}

Comments

[Astrohas]

font-size: 0;

?

[Михаил Захаров]

Хасан Истамкулов: ! можно и не писать

Answer 5

[Demian Smith]

Посмотрите как реализована эта штуковина https://blackrockdigital.github.io/startbootstrap-...

Comments

[Demian Smith]

Сам недавно пытался решить подобную проблему и для блоков разной высоты это решение оказалось самым устойчивым.

[Robert Bl]

Demian Smith: Не совсем понимаю, что здесь отличается?

[Demian Smith]

Robert Blk: только что посмотрел старые архивы и выяснилось что я в итоге пришел вот к такому решению.

.thumb {
    margin-bottom: 10px;

    @extend .col-lg-3;
    @extend .col-md-4;
    @extend .col-xs-6;

    @media (max-width: $screen-md-min) {
        &:nth-child(2n + 1) {
            clear: both;
        }
    }


    @media (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
        &:nth-child(3n + 1) {
            clear: both;
        }
    }

    @media (min-width: $screen-lg-min) {
        &:nth-child(4n + 1) {
            clear: both;
        }
    }
}

<div class="row">
    <div class="thumb">
        Тут что угодно
    </div>
    <div class="thumb">
        Тут что угодно
    </div>
    <div class="thumb">
        Тут что угодно
    </div>
    <div class="thumb">
        Тут что угодно
    </div>
</div>

Оно мне безумно нравится тем что в хтмле нет никаких выкрутасов. Всё упрятано в стилях.

Answer 6

[Василь Бойко]

есть такой скрипт matchHeight решает подобные проблемы известные бренды его используют)