I am trying to list categories according to attached image, but didn't get any success, please help me if anyone has any idea. South, East and North will be in loop, so i can add any other at anytime, I am new in php or Wordpress so need your help 
<?php $args = array('orderby' => 'id', 'hide_empty'=> 0, 'child_of' => 1); $categories = get_categories($args); foreach ($categories as $cat) { $background_color = get_option('cat_background_color'.$cat->term_id); ?>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 boxshadow categorylisting padd0 Box1">
<div class="Catheading cat1" style="background-color: #<?php echo $background_color; ?>;"> <span class="config"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" alt="" /></span>
<h3><?php echo $cat->name ?></h3>
</div>
<div class="catlist">
<ul>
<?php $args2= array("orderby"=>'id', "category" => $cat->cat_ID); // Get Post from each Sub-Category
$posts_in_category = get_posts($args2);
foreach($posts_in_category as $current_post) {
?>
<li type='none' ><a href="<?=$current_post->guid;?>">
<?=''.$current_post->post_title;?>
</a></li>
<?php
} ?>
</ul>
</div>
</div>
<?php } ?>
