Как “прижать” div друг под другом?

#html #css #bootstrap #masonry

Есть верстка стандартного вида на Bootstrap 3:


    

        
1
        
2
        
3
        
4
        
5
        
6
    



Получается вот такая сетка:


А нужно, чтобы слои располагались следующим образом:


Посоветовали вот такой вариант:



  

    
1
    
4
  
  

    
2
    
5
  
  

    
3
    
6
  





Он в принципе подходит, вот только на среднем разрешении на планшете при выводе двух
столбцов выводится:



А при малом разрешении в один столбец:



Отсюда вопрос, есть ли другие варианты "прижать" слои, как на втором рисунке или
придется подключать скрипты, наподобие masonry?

Если первый вариант решения вопроса можно поправить, то как лучше это сделать? Можно
ли как-то для средних и малых разрешений поменять  расположение слоев, чтобы они шли
по порядку 1-2-3-4-5-6, вместо 1-4-2-5-3-6, при этом не добавляя тонны лишнего кода?
    

Ответы

Ответ 1

*как вариант display: flex; flex-flow:column wrap;- родителю. Элементы будут прижиматься
снизу вверх и при уменьшении высоты родителя переносится на следующие колонки слева
направо, по родителю выравниваем align-items: center;- выравнивание по оси Х по центру *



*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #757575;
}
.parentNode{
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  align-content: center;
  margin: 75px auto;
  background: #ce7358;
  width: 250px;
  height: 350px;
}
.parentNode div {
  width: 80px;
  background: #a1e1c1;
  margin: 8px 5px;
}
.child1{
  height: 90px;
}
.child2{
  height: 75px;
}
.child3{
  height: 100px;
}
.child4{
  height: 95px;
}
.child5{
  height: 80px;
}

  

  

  

  

  




Ответ 2

Можно с помощью grid CSS:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 20px;
}


Полный пример с описанием посмотрите на CodePen + Medium:


статья на Medium
пример на CodePen


Но будет и несколько строк JavaScript кода.

Буквально 2 дня назад встал такой же вопрос как и у Вас, но пока что не пробовал
решить через grid.
Есть ещё вот такой способ, но это не сохраняет нужный порядок.