Using the Grid

Aligning the App

Even though Ionic ships with a lot of useful UI components for building native applications, sometimes more granular control is needed over layout. For this, Ionic provides a grid system to create UIs of any complexity.

Ionic’s grid system uses the CSS Flexible Box Layout Module standard to provide customizability that would be otherwise difficult to achieve.

At it’s simplist, Ionic’s grid system is composed of divs with the class row, with divs having the class col

Making equal splits

To make a row with equally spaced columns, simply nest the col divs within the row div:

<div class="row">
  <div class="col">
    <button class="button button-block button-positive">Button</button>
  </div>
  <div class="col">
    <button class="button button-block">Button</button>
  </div>
</div>

Adjusting the size

Columns can also be of varying sizes, and have differing offsets. Ionic has a multitude of percentage-based options for structuring the grid. This example shows a button that takes up half the screen, followed by a second button that is a half the size with a slight offset:

<div class="row">
  <div class="col-50">
    <button class="button button-block button-positive">Button</button>
  </div>
  <div class="col-25 col-offset-10">
    <button class="button button-block">Button</button>
  </div>
</div>

Offsets can precede a column too. To push a large button to the right side of the screen, we can use the col-offset- series of classes:

<div class="row">
  <div class="col-75 col-offset-25">
    <button class="button button-block button-energized">Button</button>
  </div>
</div>

Going vertical

Because of Ionic’s use of CSS flexbox, we can also use the grid vertically. Here are three placeholder images, all with a slightly different alignment of the caption text:

<div class="row">
  <div class="col"><img src="http://placehold.it/280x150"></div>
  <div class="col">Caption Top</div>
</div>
<div class="row row-center">
  <div class="col"><img src="http://placehold.it/280x150"></div>
  <div class="col">Caption Middle</div>
</div>
<div class="row row-bottom">
  <div class="col"><img src="http://placehold.it/280x150"></div>
  <div class="col">Caption Middle</div>
</div>

If we need more granularity, we can do vertical alignment on the columns as well:

<div class="row">
  <div class="col"><img src="http://placehold.it/150x190"></div>
  <div class="col col-top">Caption Top</div>
  <div class="col col-bottom">Caption bottom</div>
</div>

This example has two captions equally spaced with the image - one sits on top, and one sits on bottom.

The scratchpad below has everything you need to get started using Ionic’s grid and endlessly customizing your apps!

Try this tutorial out below in the Scratchpad:

further reading
Customizing the Splash Screen

When releasing an app, a nice final polish is a custom splash screen. Learn how to customize it with Ionic and ngCordova.

Making Modals

Modals are an essential UI component of any app needing to show a detail view. This formula goes into the details of making those modals.

Understanding Action Sheets

Action sheets can be a useful UI for providing contextual actions. Learn how to create one, and use custom gestures as a bonus.

Pull to Refresh

Update your lists in real time using pull-to-refresh with the handy ion-refresher directive!

Navigating Ionic's Headers

Ionic includes multiple ways to display a header at the top of the screen. Learn the difference between nav bars and header bars, and when to use each.

Get building with Ionic today!