Styjun

How can I make a 3x3 display of data? I am displaying data using foreach loop and this is the output:

This is my blade.php code

<div class="coupon_div">
 @foreach($coupons as $coupon)
 <div class="column coupon_col">
 <div class="coupon_cont pad">
 <div class="coupon_details">
 <h3 class="column_title coupon_title">
 <span class="bullets">◼ </span>
 $coupon->name 
 </h3>
 <p class="column_text coupon_text"> $coupon->description </p>
 <button class="btn_gold btn-coupon" type="button" name="button" onclick="window.open(' $coupon->file_path ')"> Open </button>
 </div>
 </div>
 </div>
 @endforeach
 </div>

my css

.coupon_div 
 width: 100%;
 display: flex;
 justify-content: space-between;
 margin-bottom: 5px;

.column 
 width: 345px;
 height: auto;
 background-color: white;
 position: relative;

.coupon_col 
 padding: 0;
 margin-bottom: 30px;

.coupon_cont 
 width: 345px;

.coupon_col .pad 
 padding: 0;

.coupon_details 
 padding: 32px;
 border: 1px solid #dcdcdc;

If I display 3 items only, it has the proper spacing. My expected output is somehow like this:

How can I possibly attain this result using css? because as the result shows, it displays data in 1 line only. I found some almost the same problem here but somehow can't make it work.

Thanks for the your answer :) I have figured it out. I just removed some part of coupon_div class from:

.coupon_div 
 width: 100%;
 display: flex;
 justify-content: space-between;
 margin-bottom: 5px;

To:

.coupon_div 
 justify-content: space-between;
 margin-bottom: 5px;

And added some checking:

<div class="column coupon_col $key % 3 == 1 ? 'addmargin' : '' ">

So if the item is on the 2nd, 5th and 7th, it will have a margin to its other 2 items.

.addmargin 
 margin: 0px 15px;

With this now, I'm able to get my desired result.