Responsive Grid layout

Cool, seems simple enough. Out of curiosity, where did the 650px from the @media (max-width: 650px) come from?

@adam The 650px came from what I felt worked right in my demo. This could be changed into a sass variable that could be adjust to fit a specific case.

A default value of 724px (iPad width) could be set but it should be up to the developer to decided where that break point should be depending on their content.

Cool, I created an issue for us to add it in, thanks!

Whatcha think? https://github.com/driftyco/ionic/commit/1cdb999e5672391fbe02719eef060e28ea72871d

@adam Looks great!

I like the addition of the small, medium, and large break points. I think this will work out great when making apps that can take advantage of the large screen area on tablets.

Sorry, I should elaborate.

You can now set a row to have each column break at various widths. For example, if you want a row of columns to turn in to stacked columns when the viewport is less than 568 pixels, it’d look like this:

  <div class="row responsive-sm">
    <div class="col">
      <div>
        column 1
      </div>
    </div>
    <div class="col">
      <div>
        column 2
      </div>
    </div>
  </div>

The three built in classes are:
.responsive-sm = smaller than landscape phone
.responsive-md = smaller than portrait tablet
.responsive-lg = smaller than landscape tablet

Also, each class uses a sass variable that can be changed to your liking, and there’s also a responsive-grid-break mixin you can use to create your own.

1 Like

Ah gotcha, so you can choose the break point your self based a few presets or make your own. Simple and easy.

Responsive grid docs:

3 Likes

I’m trying to work out whether it’s possible with the current responsive grid implementation and some nesting of html/css styling to combine more than one breakpoint per row group. so that for example you can specify a way of breaking content at a small and medium breakpoints to effectively allow a 1/2/3 column layout within the same row definition.

What I am trying to achieve is similar to Foundation where you can specify small to be 1 column wide, medium to be say 2 and large to be 3 and the content fitting accordingly using small-12, medium-6, large-4 for example.

There are a couple of ways I could work round this and something like foundation could be included but would prefer to try and solve it without repetition of markup and media queries /including a non-ionic layout library if possible.

any tips appreciated.

thanks dan

Something like this?

exactly like that :slight_smile: thanks a lot…

very glad i can do this directly with ionic and don’t have to add any additional libraries or hack about with some custom css.

i’ll keep an eye out in the future for your codepen samples - are there other ionic team members codepen’s i should also keep an eye on / can really useful stuff like this be added to the main ionic codepen repo? … i’m finding these snippets are very useful for pulling together quick working mockups/prototypes, so the more the better :slight_smile:

cheers, dan

In Bootstrap, you can do things like:

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Which the community finds to be extremely helpful.

Is there an Ionic equivalent?

Actually using this build: http://getbootstrap.com/customize/?id=11477931

Which is a template of the:

  • Grid system
  • Basic utilities
  • Responsive utilities
  • @grid-gutter-width: 0px

This looks like it plays really nice so far with Ionic… May be worth considering taking out the responsive classes to keep a separation of concerns.

I’m including this CSS after Ionic.

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

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

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.

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

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?

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

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