Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Structure an Application UI with Ionic v3 Grid


    Learn how to use the Ionic Grid component to layout more advanced user interfaces. See how to use the built-in responsive breakpoints to have different layouts for different screen sizes.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: We'll start with an ion-grid. Next, we'll add our ion-row. Now, we can't have content directly in an ion-row, so we'll need to use the ion-column. It is in this element that we'll place our actual content.

    Our design has three cells, so I will have three ion-columns and put the column name in each, just so we can see what it initially looks like. I will add a custom class to each column, just to provide a background color so we can better see the columns on a page.

    Saving. We can see each column's name in inaudible position across our screen. By default, each col will have equal width. To find a col's width, we can add the col- and the number of columns that we want to use.

    Let's change the three col widths. The first column will take up five columns. The middle will take 2, and the third 5, adding up to 12. Saving, and we can see the widths have changed.

    We can further control the number of columns by including one of the sponsored breakpoint identifiers. Let me switch to a more realistic example to show you this first.

    Here we have a form that's asking for our first and last name. Currently, these two inputs are side by side. Fine for wider viewports, but on a smaller screen, I would like them stacked.

    Ion's grid columns have five breakpoints -- xs small, small, medium, large, and extra-large. This allows us to have different column widths at different swing sizes. These values can be changed to their associated sass values.

    Switching in this new HTML code, we have our grid in our rows before. We have two columns, each containing our inputs. I will define each column to take up 12 units, and once the small breakpoint width is reached, only to take up 6 units instead. Ionic will automatically wrap our content if the column total equals 12.

    Now, we can see with this new responsive set on the small screens, the inputs are stacked, larger becomes side by side. Using these additional modifiers can be extremely useful to change the layout of your content for different screen sizes.