如何实现angular中的列并排

Question

I am new to angular and i am trying to achieve the below data(Array object count is unknown) binding as side by side please give me suggestion source code would be very helpful

Answer 1

Use a grid layout.

 .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 30ch; }.item { padding: 1rem; box-sizing: border-box; border: 1px solid black; }

 <div class="container"> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> <div class="item">Array item</div> </div>

Answer 2

You can achieve that in many different ways.

1. You can just use pure css, and then you can either use grid or flex.
2. Use lib/module, like basscss or @angular/flex-layout which basically are doing the same and/or more.