ICONIC - complex Layout discussion

Hi , i have just started IONIC2 and so far still feel loss as i am new to both JS and CSS stuff… i am intended to design a screen layout similar to the image i attached ,

i have tried to use the GRID component but i think i am lost and need some advice , my
questions as follow ,

  1. according to the image , is it i need to have a template html which required to use html5
    tag and other CSS beside pure IONIC 2 default css to achieve the layout ?

  2. to achieve the layout , how can i achieve to have one in one template
    to display so many other types of component , i.e. mixture of other components in one
    html template ? ( is there any samples for showing how to achieve this)

  3. from my image, let say on the right panel , which consist of 2
    upper, the product categories and lower grid , the products filtered by the category ,
    3.1. can i use grid to achieve the layout , i am thinking to use a grid which has 2 columns
    one take 1/3 and another 2/3 of the width , where the right column content has
    another grid with 2 ROW , which top row is fixed at top and the bottom row
    is going to fill with CARDs , is this a correct way to doing the layout ?
    3.2. is there any idea of how to make a key pad component that is similar to the
    image shown ? like what components that can be used to design such layout ?

or is there any ionic2 complex layout samples ? or tutorial so i can refer to becuase at
this moment , i checked youtubes and all tutorial available , it has not much of samples
and examples to follow , especially to code this kind of layout.

any help will be much appreciated , happy ionic2ing …

hi kalmenchia, any progress with this layout ? i’m dealing with same issue.