// Tutorial //

    Using the Grid System in Ionic 2

    Published on February 21, 2017
      Default avatar
      By Alligator.io
      Developer and author at DigitalOcean.
      Using the Grid System in Ionic 2

      While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

      Ionic comes with a built-in grid component system that allows you to create just about any kind of layout for your apps. Behind the scenes the grid system uses Flexbox to layout the items, so everything behaves as you would expect with creating a layout with flex containers and flex items.

      To use the grid system in your templates, you simply define a parent ion-grid element and then rows within that element with ion-row and then finally columns within each row with ion-col:

      <ion-content padding>
        <ion-grid>
          <ion-row text-center>
            <ion-col>I'm a column</ion-col>
            <ion-col>Another column</ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
      

      Your first grid in Ionic

      You’ll notice that by default the columns are of equal width. You can change that behavior by using width attributes on the ion-col elements. The available attributes are: width-10, width-20, width-25, width-33, width-50, width-67, width-75, width-80, width-90.

      Here’s an example with three rows that each have columns with width attributes specified:

      <ion-content padding>
        <ion-grid text-center>
          <ion-row>
            <ion-col width-67>I'm a column</ion-col>
            <ion-col width-33>Another column</ion-col>
          </ion-row>
      
          <ion-row>
            <ion-col width-25>A</ion-col>
            <ion-col width-25>B</ion-col>
            <ion-col width-50>C</ion-col>
          </ion-row>
      
          <ion-row>
            <ion-col width-33>Lone Column</ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
      

      Your first grid in Ionic


      You can also use the wrap attribute on a row for the columns to wrap if they don’t fit into one row:

      <ion-content padding>
        <ion-grid text-center>
          <ion-row wrap>
            <ion-col width-25>Too</ion-col>
            <ion-col width-25>Many</ion-col>
            <ion-col width-25>Columns</ion-col>
            <ion-col width-25>For</ion-col>
            <ion-col width-25>One</ion-col>
            <ion-col width-25>Row</ion-col>
            <ion-col width-25>Not</ion-col>
            <ion-col width-25>A</ion-col>
            <ion-col width-25>Problem!</ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
      

      Wrapping columns


      Finally, use offset attributes on columns to change their placement within a row:

      <ion-content padding>
        <ion-grid text-center>
          <ion-row>
            <ion-col width-25>One</ion-col>
            <ion-col width-25 offset-50>Two</ion-col>
          </ion-row>
      
          <ion-row>
            <ion-col width-50 offset-25>Three</ion-col>
          </ion-row>
      
          <ion-row>
            <ion-col width-20>Train</ion-col>
            <ion-col width-20 offset-20>With</ion-col>
            <ion-col width-20 offset-20>Me!</ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
      

      Ionic 2 column offsets


      Want to learn more? Join the DigitalOcean Community!

      Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

      Sign up
      About the authors
      Default avatar
      Developer and author at DigitalOcean.

      Still looking for an answer?

      Was this helpful?
      Leave a comment

      This textbox defaults to using Markdown to format your answer.

      You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!