New Responsive ion-grid


In the new responsive ion-grid, How can I hide one ion-col depend on mobile device size?

For example, I have two ion-cols and one ion-col will only display in small device and not in all device. So, how can I hide this col in large device?


In bootstrap 3 they have class like “hidden-xs”, do we have any thing like that? @brandyshea @mhartington


Not yet. It’s on my list of things to add! :smile:


Any chance you can make a demo of this for Ionic Creator?
Thank you Brandy.


Hey @jrunfitpro, Ionic 2 isn’t supported in Creator yet. Did you mean the grid for Ionic 1? cc @mattkremer


Darn, I thought Creator was a new product and assumed it was Ionic2. Any idea when Creator will use Ionic2?


We don’t have a timeline, but they are actively working on it. There’s some more information on it here:


Slightly different subject. Would the body shaped progress meter work in Creator? I sort of attempted making it, but couldn’t get it just right.


another thing that would be useful and seems spotty right now is conditional col widths


    <ion-col col-12 [col-md-6]="someCondition">
        Content 1
    <ion-col col-12 col-md-6 [hidden]="someCondition">
        Content 2

Right now that doesn’t seem to work correctly but it’s not clear if it should

Dynamic Rendering of html components

So the grid is mostly CSS right now. All of the column attributes are just CSS attributes. For example:

[col-md-auto] {
  flex: 0 0 auto;

  width: auto;

In order to dynamically add attributes you need to use the following syntax:

<ion-col col-12 [attr.col-md-6]="someCondition ? '' : null">
  Content 1

The syntax you wrote is for property binding in Angular. For more info on this:!#property-binding!#other-bindings

Here’s a good description on the syntax for dynamic attribute binding:


Will give that a try, thanks!

[edit] - that works, much appreciated.


Awesome - any timeline on when hidden columns will be available?

Also - is there a way to make the font-size smaller depending on the breakpoint?


we are waiting for it also!
Meantimes I will use @media condition I suppose


is this available now ?