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.
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.