Как расположить блоки?

Question

[di1sa]

как расположить блоки друг под другом без отступа?

Comments

[sergski]

https://designshack.net/articles/css/masonry/

Answer 1

[Yuriy Vorobyov]

Родительский контейнер сделайте так:

.flex-container {
  display: flex;
  flex-direction: column;
}

Про флексы тут

Comments

[i_m]

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

[di1sa]

i_m, как это сделать без плагина, в ручном режиме

[i_m]

di1sa, только на js

[di1sa]

i_m, а с помощью css? я знаю что можно, есть сайты в инете примерно с таким дизайном и у них ровно блок под блоком, но не пойму как сделать

[Антон Литвиненко]

di1sa, три колонки если с css

Answer 2

[i_m]

https://tympanus.net/Development/GammaGallery/ демо
tympanus.net/codrops/2012/11/06/gamma-gallery-a-re... плагин

Answer 3

[di1sa]

.flex-container {
display: flex;
flex-direction: column;
}
сделал как вы сказали, оно получается друг под другом но в 1 столбик, а не в 3 как нужно

Comments

[i_m]

если все блоки по высоте будут одинаковы, то можно так
если нужно как в примере в галереи то только на js

[di1sa]

i_m, все блоки будут разные по высоте , а как установить эту галерею js? и подключить к сайту

[i_m]

di1sa, так скачайте
там же есть архив с демкой
в индексном html смотрите как формируется

Answer 4

[FrelFrloich]

На css или оберните ваш список с картинкой в один блок и задайте.

<div class="menu">

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

</div>

.menu {
display: flex;
}

.menu__list {
display: flex;
flex-direction: column;
}

Или применяйте grid, будет меньше ненужной разметки. Хватит на мозги человеку капать, какой к чёрту js.

Comments

[di1sa]

А не могли бы вы помочь мне в личке, или сделать, если нужно копеечку скину? Я в этом просто не особо понимаю. только азы.

[FrelFrloich]

di1sa, да ничего не надо, просто напишите в тг [phone].