Responsive Grid layout

ionic-v1
21

Right now it doesn’t. Since our target is mobile/tablet apps, we made the grid system pretty simple. Bootstraps grid is pretty in-depth to cover desktop/table/phones and everything in between.

Plus since our grid system is based on flex-box, its not too complicated to role your own grid, which is more ideal anyways. This way your grid will fit your content and not the other way around :smile:

A good resource to use if you need to play with flex-box is this one

http://the-echoplex.net/flexyboxes/

The main property to mess with is the columns flex property.

 flex: 0 1 auto;

The value of 1 will say make this flex 100% of the width.

This should get you going to make your own grid.

1 Like
22

Thanks for the link!

I agree having a responsive grid native to Ionic is more than ideal - but this custom Bootstrap build is only 1000 lines and gives you everything you need to start supporting all devices immediately with seemingly no conflicts.

For anyone wondering how to use Bootstrap grid inside of flexbox:

<div class="row part1">
  <div class="col col-center">
    <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
      <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="Display Name">
        </label>
        <label class="item item-input">
          <input type="email" placeholder="Email">
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password">
        </label>
        <button class="button button-full button-positive">
          Signup
        </button>
      </div>
    </div>
  </div>
</div>

This will also center the form vertically inside of the outer most row.

1 Like
23

Ionic’s grid is simple, small and easy to use. The features it has now seems to be working for many of the types of apps users are building with it. In the case where an app does require something more complicated and needs to support IE8, then they can always import the 1000 lines of code for their individual app.

24

I know this is an old thread, but this might help someone. I tried using the bootstrap grid as suggested here, and it did not work well. Bootstrap doesn’t play well with flex elements, and the ionic css doesn’t work well with block layout.

So I rolled my own responsive flex grid, which, as suggested was really easy. Here is the scss code…

$col-widths: 10 20 25 30 33 40 40 66 70 75 80 90;
$sizes: "sm" "md" "lg";
$screens: $screen-sm $screen-md $screen-lg;

@mixin col-class-maker($size, $width){
  .col-#{$size}-#{$width} {
    @include flex(0, 0, percentage($width/100));
    max-width: percentage($width/100);
  }
}

// Create the small columns
@each $width in $col-widths {
 @include col-class-maker(sm, $width);
}

// Create the md columns
@each $width in $col-widths {
 @media ( min-width: ($screen-sm + 1) ){
   @include col-class-maker(md, $width);
 }
}

// Create the lg columns
@each $width in $col-widths {
 @media ( min-width: ($screen-md + 1) ){
   @include col-class-maker(lg, $width);
 }
}
2 Likes
25

Thanks ndudenhoeffer,
iam new with Ionic, could you give me please an example, where I have to place this snippet and how to use it?

26

Is it okay to use a totally different grid system? I like the Susy grid system.

Here’s the main site: http://susy.oddbird.net/
http://susy.readthedocs.org/en/latest/install/

Sometimes I might have to heavily customize the layout of a certain part of the app.

Thanks Ionic Team

27

I’ve been using the Angular Material library in conjunction with Ionic and their grid layout system has been working flawlessly thus far.

2 Likes
28

Same here.

I use very few ionic components, mostly <ion-content>s wrapped into AM’s <md-content>s, to get native scrollable screen areas when required.

Ionic provides me with the native-like performance, the build system, and mobile OS packaging. And it’s brilliant at it.

My first Ionic-based project is for desktop first. The UI elements provided by Ionic look very good, but I just went with angular-material all the way because of time constraints, and there seems to be no conflict, except for a known and fixable tap events issue I’ve read about, but which I don’t experience myself.

29

hey guys i know this is an old post but check this : http://flexboxgrid.com/ , same Bootstrap grid system but for Flex display :smiley:

3 Likes