Signup for the Ionic Newsletter to get the latest news and updates!

  • JakeWesorick

    Perfect! Exaclty what I needed right now. (Or like 3 weeks ago, lol.)

    • Rithie

      same feelings =)

    • Oliver Hirst

      +1 exactly this

  • Konstantin Pavlovsky

    Cool. Now I know what to use for desktop interface, instead of just bootstrap

  • Abhijith Darshan

    This is beautiful!! Just what the ionic framework needed to evolve into. Any chance of this rolling over to ionic v1? Hope the v1 is not abandoned….

    • Dylan van der Merwe

      Definitely no more v1

    • yesimahuman

      We will not be adding this to v1 nor will we be adding new features to v1. However, we are still fixing bugs here and there, and just did a small release a few days ago.

      Based on community surveys, a large majority of Ionic developers have made the jump to v2 and we are confident focusing on it exclusively is the right choice long term.

      • Jiyuu

        Sad to see your opinion regarding the v1.
        From my point of view, the v1 has not introduced a lot of “often requested features” since the v2 was being developed (approximatively 1 year).

        Large companies which used Ionic v1 will probably not jump to v2 before some time as they have spend time and money to develop their apps on a stable release (which took some time too).

        We waited 1 year for a stable v1 which has been improved (features) during less than one year (release of Unicorn 05/2015, announce of v2 alpha 10/2015).

        Keep up the good work but please concider previous versions’ improvement a little bit more (v1 regarding v2, v2 regarding v3, etc.).

        • yesimahuman

          I understand it’s challenging for v1 users. We’ve been transparent over the last year that we are investing heavily in Ionic 2 because we felt it was the way for us to really build a top quality framework and improve on Ionic 1. We don’t consider Ionic 1 and 2 to be totally different worlds. Yes, the code looks different, but the concepts are very similar and many of the components and tags look the same. Instead, it’s using TypeScript and modern JavaScript which evolved around the time we decided to make the jump.

          We have heard a lot of positive stories from users migrating from v1 to v2 and one conclusion we hear a lot is it’s Just Ionic, but with modern JS. I hope you’ll consider that as the community is picking up v2 rapidly and the positive reception v2 has received is very encouraging.

  • Higor Rosa

    Very Nice!

  • Daniel Oliveira

    congratulations, ever good job

  • Piv Dev

    This is really great!!! For fuller desktop support I think you need to work on navigation, the tabs just look wrong on a desktop when spread out equally, they would look better if they bunch left.

  • Aamir

    Great !

  • Volkan Gümüş

    Is this already merged into the master of ionic-conference-app?

  • Serkan Ünal

    Hi its perfect but I need help about button size with old responsive-sm attribute.
    When we used responsive-sm with rows, the buttons inside in rows can arrange the with automatically. How can achive this with new grid system ??

  • Bruno Renostro

    How do I build for desktop?

    • Gabriel Lovetro

      As far as I know, by making a Progressive Web App (PWA) using a service worker and a manifest. There’s some info (and a tutorial) in this blog.

  • ghenry22

    nice to see some updates to the grid but one thing I noticed, which the old grid also did, as did the grid in ionic v1 🙂

    On ios device or simulator rows don’t wrap. Works fine in browser, works fine on android, exactly as advertised but on ios it doesn’t wrap.

    To get ios to wrap rows, rather than just ending up with one long row that goes off the edge of the screen I need to add the following to my css:

    flex: 1 0 90px;

    90px is the native size of the items in my grid.

    This is probably not ideal as I would like to scale up the items in my grid on larger screens which the new ionic grid seems to do just fine on android and browser but not on ios.

  • Alejandro Heredia

    Does this update include a way of packing the app for desktop standalone installation? Like with ?

    • Diluk Angelo

      this would be great 🙂

    • gelko

      Currently, you can do this using Nativefier (a nodejs tool that allows you to easily create an electron app for any web site)

    • Justin Willis

      Hey! We currently do not have an “official” way to package an Ionic app with electron (although this is something were looking at) but in the meantime you can check out this example repo i made which should help you (:

      • Hasan Özcelik

        Hi, I used your repo to create an electron app, and it works great out of the box. But I don’t know how to call the electron api from within ionic. Can you give me some hints?

        Thank you

  • Workout Anywhere

    Any way to get a quick tutorial for ionic creator users? Sweet grids!

  • Matt

    Tried it, works great. Thanks!

  • Anton

    Hi all ! Is it possible to create grid with fixed width colums not depends of contents ? After update I can’t do this .. Could anyone show examples ?

  • Felix Smuda

    Thats exactly what i needed, thanks! But one question. Can i resize the ion-header and Bottom tabPane to be the same size like ?

  • Sourav Nath

    very nice

  • Riccardo Proietti

    It is possible to calculate $grid-columns dinamically, in *.ts provider for example?

  • Yasir Panjsheri

    how can I change the col size dynamically ?

    • Michael Wanderski

      See my latest response to my own question for the answer 😉

  • Michael Wanderski

    I can’t seem to get it to work like your first images show with a fluid transition between how many columns are in the rows based on the screen width. I tried adding the attributes (e.g. “col-12 col-sm”) in different ways, however that just shows a single column in a row until it gets to the col-sm width (i.e. 576px) and then pops to expand all 12 in a row. How do you make it fluid at each breakpoint?

    • Michael Wanderski

      I figured it out, however it wasn’t until I looked at the Bootstrap documentation (that this was modeled after) that I figured it out. I still don’t find the Angular documentation intuitive, and it would be nice to have just the complete sample code. I assumed that the default would be what was shown, but it’s not. It wasn’t until I added every attribute explicitly that the grid acted responsively. Here is my HTML code (and the ‘grid’ object is a 2 dimensional array with each row being 12 string URLs long)…

      • sampath Munasinghe

        I tried it. but its not working for me.

  • Sagiv Frankel

    Just tried this out – totally totally awesome and useful!

  • sampath Munasinghe

    Hey, awesome blog. I need to discuss about the option 4.

    This tells it to take up 12 columns up to the small breakpoint and then change to equal width columns.

    my question is : how we can handle the device orientation responsiveness with these trick?.


  • Ing. Alejandro Javier Villalón

    This is a very good way to use this same framework for web applications. I love this way, please continue on it.