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

1 Like

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

1 Like

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 ?