用表格顺序布局元素的正确方法是什么？

Question

---

Hi i want to position my elements like in this picture.

I tried to use flexbox but the second row required more effort to place the elements differently

I am not sure if I should use flexbox/grid or normal table for this kind of layout

Is using the table tag is not preferable? I would really like to see a code suggestion for this layout.. Thanks ahead

Answer 1

If I understand you correct you need simple grid.

 .container{ display: grid; grid-template-columns: repeat(4, 50px); grid-template-rows: repeat(4, 50px); grid-gap: 50px; } .grid-item { background-color: blue; } 

 <div class="container"> <div class="grid-item"> 1 </div> <div class="grid-item"> 2 </div> <div class="grid-item"> 3 </div> <div class="grid-item"> 4 </div> <div class="grid-item"> 5 </div> <div class="grid-item"> 6 </div> <div class="grid-item"> 7 </div> <div class="grid-item"> 8 </div> <div class="grid-item"> 9 </div> <div class="grid-item"> 10 </div> <div class="grid-item"> 11 </div> <div class="grid-item"> 12 </div> </div>