Equal height rows that fit into the view with ionic framework - ionic-framework

Question

I am trying to show a grid in one of my ionic views that has a 4x3 grid. I want the grid to fit into the view, making all the rows have the same height and all the columns same width also all the content in the cells aligned center both vertically and horizontally.
I'm not so good at CSS so I'm having a hard time with it, any help?

Answer 1

Ionic has built in grid classes. You can do something like this
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
They have a very nice documentation on their grid system and other ways to set up rows and columns. link: http://ionicframework.com/docs/components/#grid
for css centering this should work: just place a div around your rows and columns and apply this the classes. I am not great a css but i will try to help :P
<div class=container>
<div class="row contained">
<div class="col">Centered!</div>
</div>
</div>
div.container {
height: 50%; }
div.contained {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }