Table of Contents

URL: https://www.progressiverobot.com/ionic-grid-system/

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<^>:

				
					
&lt;ion-content padding&gt;

  &lt;ion-grid&gt;

    &lt;ion-row text-center&gt;

      &lt;ion-col&gt;I'm a column&lt;/ion-col&gt;

      &lt;ion-col&gt;Another column&lt;/ion-col&gt;

    &lt;/ion-row&gt;

  &lt;/ion-grid&gt;

&lt;/ion-content&gt;

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:

				
					
&lt;ion-content padding&gt;

  &lt;ion-grid text-center&gt;

    &lt;ion-row&gt;

      &lt;ion-col width-67&gt;I'm a column&lt;/ion-col&gt;

      &lt;ion-col width-33&gt;Another column&lt;/ion-col&gt;

    &lt;/ion-row&gt;



    &lt;ion-row&gt;

      &lt;ion-col width-25&gt;A&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;B&lt;/ion-col&gt;

      &lt;ion-col width-50&gt;C&lt;/ion-col&gt;

    &lt;/ion-row&gt;



    &lt;ion-row&gt;

      &lt;ion-col width-33&gt;Lone Column&lt;/ion-col&gt;

    &lt;/ion-row&gt;

  &lt;/ion-grid&gt;

&lt;/ion-content&gt;

—

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

				
					
&lt;ion-content padding&gt;

  &lt;ion-grid text-center&gt;

    &lt;ion-row wrap&gt;

      &lt;ion-col width-25&gt;Too&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;Many&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;Columns&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;For&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;One&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;Row&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;Not&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;A&lt;/ion-col&gt;

      &lt;ion-col width-25&gt;Problem!&lt;/ion-col&gt;

    &lt;/ion-row&gt;

  &lt;/ion-grid&gt;

&lt;/ion-content&gt;

—

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

				
					
&lt;ion-content padding&gt;

  &lt;ion-grid text-center&gt;

    &lt;ion-row&gt;

      &lt;ion-col width-25&gt;One&lt;/ion-col&gt;

      &lt;ion-col width-25 offset-50&gt;Two&lt;/ion-col&gt;

    &lt;/ion-row&gt;



    &lt;ion-row&gt;

      &lt;ion-col width-50 offset-25&gt;Three&lt;/ion-col&gt;

    &lt;/ion-row&gt;



    &lt;ion-row&gt;

      &lt;ion-col width-20&gt;Train&lt;/ion-col&gt;

      &lt;ion-col width-20 offset-20&gt;With&lt;/ion-col&gt;

      &lt;ion-col width-20 offset-20&gt;Me!&lt;/ion-col&gt;

    &lt;/ion-row&gt;

  &lt;/ion-grid&gt;

&lt;/ion-content&gt;