Flexbox Masonry Layout

Ибрахим Бендебка предлагает решить задачу masonry-раскладки на флексах при помощи математики. Буквально берёт и раскладывает важные составляющие флексов на формулы и высчитывает нужные размеры для всех элементов, чтобы они красиво выкладывались в горизонтальную плитку.

На самом деле получился не совсем masonry, а только очень частный его случай. И на узких экранах подход ломается. Но для реализации фотогалереи с превьюшками, честно говоря, идея очень интересная, к тому же не нуждающаяся в JavaScript — всё на CSS-переменных и небольших `atan2`-хаках.

Советую вчитаться в демки всем любителям математики в интерфейсах.

https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/