画像を並べる表示で、折り返した時の縦幅が均等にならない。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

前提

Vueでポートレートサイトを制作しています。
縦幅の異なる画像を2列で表示、更新が増えるごとに行が増えていくイメージです。
現在display: flexで並べているのですが、縦幅の広い画像に画像の余白が影響されてしまうことに悩んでいます。

()

試したこと

glid でも試してみたところ、表示の順番が希望通りになりませんでした。画像のように、1 2 3 4の順で並べたいです。

補足情報（FW/ツールのバージョンなど）

Nuxt.js / vue / VsCode

<template> <div> <div class="works"> <header> mk-architecture </header> <div class="flex-container"> <div class="flex-item" > <img src="/works/image1.jpg"> <div class="title">white arhitecture<br> <span>2023.11.1</span></div> </div> <div class="flex-item" > <img src="/works/image2.jpg"> <div class="title">white arhitecture<br> <span>2023.11.1</span></div> </div> <div class="flex-item" > <img src="/works/image3.jpg"> <div class="title">white arhitecture<br> <span>2023.11.1</span></div> </div> <div class="flex-item"> <img src="/works/image4.jpg"> <div class="title">white arhitecture<br> <span>2023.11.1</span> </div> </div> <div class="flex-item"> <img src="/works/image5.jpg"> <div class="title">white arhitecture<br> <span>2023.11.1</span> </div> </div> </div> </div> </div> </template> <style scoped> .works{ display: flex; padding: 0 75px 0 100px; } .title{ font-size: 11px; } header{ width: 25%; width: calc(calc((calc(var(--vw, 1vw) * 100) - (75px* 2)) / 12)* 2); position: sticky; align-self: flex-start; top: 125px; } .flex-container { margin: 0px auto; column-gap: 30px; } .flex-item { align-self: flex-start; /* アイテムを上端に配置 */ width: 410px; height: auto; float: left; margin:40px; break-inside: avoid; } .flex-item img { width: 100%; height: auto; display: block; } </style>