十字キーでフォーカスの左右上下移動

前提

3カラムの中にボタンとリンク、文言があります。
tabキーでフォーカスを移動します。

実現したいこと

tabキーを押してフォーカスを下へ、またはshift + tabで上に移動することはできますが、
十字キーの上下左右でフォーカス移動したいです。
ボタン1 → ボタン2 → ボタン6 → ボタン6_2 → ボタン7_2 → ボタン8_2 → サブリンク2_2 → サブリンク4 → ボタン12 → ボタン11
というように十字キーでカラム間を跨いで、好きな方向へ行ったり戻ったりするにはどのようにすればよろしいでしょうか。

該当のソースコード

HTML

<div id="wrapper"> <div class="inner_left"> <div class="frame_button"> <button><span>ボタン1</span></button> <button><span>ボタン2</span></button> <button><span>ボタン3</span></button> <button><span>ボタン4</span></button> <a href="">サブリンク</a> <div tabindex="0">………</div> </div> </div> <div class="inner_right main_content"> <div class="main_inner"><button><span>ボタン5</span></button> <button><span>ボタン6</span></button> <button><span>ボタン7</span></button> <button><span>ボタン8</span></button> <a href="">サブリンク2</a> <div tabindex="0">リンク3</div> </div> <div class="main_inner"><button><span>ボタン5_2</span></button> <button><span>ボタン6_2</span></button> <button><span>ボタン7_2</span></button> <button><span>ボタン8_2</span></button> <a href="">サブリンク2_2</a> <div tabindex="0">リンク3_2</div> </div> </div> <div class="inner_right"> <button><span>ボタン9</span></button> <button><span>ボタン10</span></button> <button><span>ボタン11</span></button> <button><span>ボタン12</span></button> <a href="">サブリンク4</a> <div tabindex="0">リンク5</div> </div> </div> </div> </div> </div> </div>

CSS

#wrapper{ align-items:center; display:flex; justify-content:space-around; width:80%; margin:0 auto; padding:10px;} button{ display:block; margin-bottom:10px;} .inner_left{ background:#F6E3CE; padding:10px;} .inner_right{ background:#D0F5A9; padding:10px;}.inner_right.main_content{ align-items:center; display:flex; justify-content:space-around; width:80%; margin:0 auto; padding:10px;}