-2

I want 9 responsive <div> cells that fills the whole page like images below:

http://oi57.tinypic.com/2hf5lrk.jpg

I am using ionic framework. If the framework can help, please provide me an example. If not, the pure css would be great too.

Vahid
  • 3,384
  • 2
  • 35
  • 69

1 Answers1

1

well, see: http://ionicframework.com/docs/components/#grid-even

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div><div class="row">  
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div><div class="row">
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
</div>
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thank you Bass. The only problem is that the rows are not 100% height of the page. – Vahid Feb 17 '15 at 13:04
  • 1
    ionic uses the flex box to build the grid, so consider http://css-tricks.com/boxes-fill-height-dont-squish/, http://stackoverflow.com/questions/15381172/css-flexbox-child-height-100 and http://stackoverflow.com/questions/20959600/height-100-on-flexbox-column-child – Bass Jobsen Feb 17 '15 at 13:28
  • Thanks for your help. You provide me some codes and examples instead of -1 me. Thanks again. – Vahid Feb 17 '15 at 13:35