CSS Masonry Grid с Flexbox или другими макетами

введение сетки CSS

вместо Flexbox, рассмотрите возможность использования сетки CSS для этой цели. Он предлагает более надежный и интуитивно понятный способ достижения кладовой сетки:

]

html Structure:

...

  
  
  ...

css:

Grid-Container { дисплей: сетка; сетка-авторозы: 50px; сетка сетки: 10px; Колонны сетки сетки: Повторение (Автополнение, Минмакс (30%, 1FR)); } [короткий] { сетка сетка: SPAN 1; фоновый цвет: зеленый; } [высокий] { сетка сетка: SPAN 2; фоновый цвет: малиновый; } [выше] { сетка сетка: SPAN 3; фоновый цвет: синий; } [Самый высокий] { сетка сетка: SPAN 4; фоновый цвет: серый; }

  
  
  ...

объяснение:

1. Display: Grid: инициализирует контейнер как сетка. pixels.
2. Grid-Gap: 10px: ] Указывает расстояние между элементами сетки.
3. Grid-Template-Columns: определяет, сколько колонн в сетке (Auto-Fill) и минимальный в условиях. 1FR).
4. Grid-Row: SPAN X: указывает, что элемент должен занимать x Количество рядов сетки.
]