IONIC Section 4 - 4.9 Using ion-grid

Click here for more videos available on our youtube channel !

Hello everyone, now to find a solution to the problem of our components which sometimes not the right width for different screen sizes, it is important to understand that Ionic contains 3 different component types. It's an official term, but I think it will help you if you think to these components in these explanatory terms. First of all, we have components that help us along with the data output, we have components that help us with the layout "layout", the organization and ordering of components the "input", and we have components that we help get user input. Output components are things like "ion-img, ion-badge, ion-label, ion-title…”, components that mainly display elements. Obviously in this list, there are things like "ion-alert" where the user can also press a button and interact with it. Of course this component does both, but in general these components are primarily intended to display something on the screen that we want to display to the user. The layout components themselves are not directly visible, but their effect is visible because they basically allow us to structure the content, for example "ion-grid" which we do not have yet used, but we will use for example, "ion-list, ion-tabs". So basically these components which sometimes also have their visible parts like "ion-card", but which are also important for grouping elements, order the elements in a certain way. And finally the input components such as "ion-button, ion-input, ion-textarea", so that the user can interact with all these components, type something, click something, press a button. So these are 3 important categories that we looked at among the elements of each of these categories. Now, as we have a too large component, we want to reduce the size and we will probably need “ion-grid”. I'll give you an appointment for the rest in the next video.