The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

grid

We’ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic’s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.

The new grid is a powerful, mobile-first flexbox grid system composed of three units – a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be fully customized using Sass.

Let’s dive into the new grid system!

What’s new?

  • Attributes for grid, row, and column are now supported in addition to using them as an element. Use the <ion-grid>, <ion-row> and <ion-col> elements or add them to any element (e.g., <div ion-row> or <p ion-col>).
  • New and changed attributes for rows:
    • Rows will wrap by default, but adding the nowrap attribute will prevent wrapping.
    • Reverse wrap the row by adding the wrap-reverse attribute.
    • Attributes to vertically align all columns for a row have been changed to align-items-*.
    • Attributes to horizontally align all columns for a row have been added as justify-content-*.
  • Attributes for columns to align a column vertically have been changed to align-self-*.
  • Media query support for any number of breakpoints which can be customized via Sass. Defaults to: all breakpoints (xs), sm, md, lg, and xl.
  • Each column can be set to take up a specific number of columns out of the total number of columns, no longer by a predefined percentage.
  • New variable width columns that take up the width of their content by adding the col-{breakpoint}-auto attributes, where {breakpoint} can be omitted in order to affect all breakpoints or specified to use one of the predefined breakpoints.
  • Added pull and push modifiers to change the order of the columns.
  • Responsive row attributes have been deprecated, but the same can be achieved using the new attributes.
  • Set the grid to a fixed size based on screen size by adding the fixed attribute.

grid-2

Getting started

To use the new grid, simply update to the latest version of Ionic by running the following command:

npm install --save --save-exact [email protected]

If you’ve never used the grid before, head on over to the Grid API documentation for usage information. If you have already been using the grid, read the next section for steps to convert to the new grid.

Converting to the new grid

While the old grid attributes are still supported for now, we will be removing them in a future release. We strongly recommend updating now to avoid any surprises down the road. Here are some steps that should get you updated to the latest and greatest:

  1. Columns will automatically size to take up equal width inside of a row unless specified. If you are setting the width explicitly using width-* attributes, you should now set the the size by specifying how many columns out of the total columns it should take up. The number of total columns defaults to 12 for the new grid system. To change this, change the value of the following Sass variable from 12 to your number of desired columns:
    $grid-columns:         12;
    

    All examples in this post will be based on a 12 column grid.

  2. All instances of width-* attributes will need to be changed to use col-*. So for example, if you have the following:

    <ion-col width-50>col</ion-col>
    

    it should be changed to take up 50% of the available columns, so 6 columns:

    <ion-col col-6>col</ion-col>
    
  3. The offset-* attributes still start with offset-*, but the number value that follows should still change from a percentage to the number of available columns. Here’s an example using offset-25:
    <ion-col offset-25>col</ion-col>
    

    it should be changed to offset by 25% of the available columns, so 3 columns:

    <ion-col offset-3>col</ion-col>
    
  4. Responsive row attributes have been removed. In order to achieve the old way of using the responsive-* attributes:
    <ion-row responsive-sm>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
    </ion-row>
    

    it should become:

    <ion-row>
      <ion-col col-12 col-sm>col</ion-col>
      <ion-col col-12 col-sm>col</ion-col>
      <ion-col col-12 col-sm>col</ion-col>
    </ion-row>
    

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

  5. If you were using any of the vertical alignment attributes on rows such as top, center, bottom, etc. they will need to be changed to the new attributes for alignment. For example:

    <ion-row top>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
    </ion-row>
    

    it should become:

    <ion-row align-items-start>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
      <ion-col>col</ion-col>
    </ion-row>
    
  6. Similar to the row, the horizontal attributes for columns will need to be changed to the new attributes for alignment. For example:
    <ion-row>
      <ion-col top>col</ion-col>
      <ion-col center>col</ion-col>
      <ion-col bottom>col</ion-col>
    </ion-row>
    

    it should become:

    <ion-row>
      <ion-col align-self-start>col</ion-col>
      <ion-col align-self-center>col</ion-col>
      <ion-col align-self-end>col</ion-col>
    </ion-row>
    

What’s next?

While a new grid system is great, our support for desktop doesn’t end here! We will be continuously making improvements to features that extend the power and extensibility of the framework. In addition to more responsive features, we plan on improving our support for accessibility, electron, windows, and more. Our next major feature will be split pane support, an often requested component that is shaping up to be amazing! Also, up next we’ll be making our showWhen and hideWhen components more powerful than ever. We can’t wait for you to get your hands on these features and add them to your apps.

Thank you

We want to sincerely thank you for your feedback and patience as we work towards better desktop support. We want you to know that we hear you, and know how important these features are to you. <3

  • JakeWesorick

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

    • Rithie

      same feelings =)

    • Oliver Hirst

      +1 exactly this

  • http://kpavlovsky.pro/ 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.

  • http://xconex.com.br/ 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:

    ion-col.col{
    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.

  • https://logus.us Alejandro Heredia

    Does this update include a way of packing the app for desktop standalone installation? Like with https://electron.atom.io/ ?

    • 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 https://github.com/jgw96/electron-quick-start i made which should help you (:

  • http://workoutanywhere.net 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?