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

Already subscribed? Sign In

Autoplay

    Structure an Application UI with Ionic Grid

    Chris GriffithChris Griffith

    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.

    ionicIonic
    ^3.0.0
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Instructor: 00:00 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.

    00:16 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.

    00:34 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.

    00:50 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.

    01:04 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.

    01:16 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.

    01:28 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.

    01:47 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.

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

    Discuss

    Discuss