リキッドレイアウトの特定行へ差し込み要素を入れる

リキッドレイアウトで並べられたアイテムの特定行に差し込み要素を入れたい。

イメージ: 赤枠がアイテム、青枠が差込要素

リキッドレイアウトでは横幅によって1行に並ぶアイテム数が可変となる。

表示するウィンドウの横幅によっては1行3個の場合もあれば、10個の場合もあるため、動的に差込位置を決定する必要がある。

ウィンドウサイズが決まれば1行の個数が決定するため、resizeイベントで都度算出してやればよい。

Vue.js での例 codepen.io