Ionic 4: todo App + firebase

13 Using Cards and Grids in Ionic Building Mobile Apps with I

cards and grids in this lesson we are going to learn how we can create cards in our ioniq applications you must have seen cards in many modern applications

from Facebook to LinkedIn all modern applications are using cards in the layout of their applications in the second half of this lesson we'll learn how we can use grids to arrange all the

UI components on our page in rows and columns this allows us to create responsive user interfaces and keeps our user interfaces intact for devices of different screen

sizes so let's get started so here I am back again inside Visual Studio code and the first thing I will do is get rid of everything inside Dyanne content you

so now the page has no content and I'll also hide the Explorer to create a card in ionic you have to use the component called iron card whatever you want inside your card goes inside the iron

card component tags so here you can go ahead and type in any content and you can see that I get this card it doesn't look very pretty but we have a card on our page now to make our

content look good inside a card we have different components that we can use inside the Heian card component the first component that you want to use is iron card content

and all your content inside the iron card should go inside the iron card content component now if I save the application you can see that the content now looks good inside the card we have a

little more padding around the text and the card is also little more emphasized along with the iron card content component you can also put in titles inside your cards to do that all you

have to do is use the component iron card header and inside your iron card header you can use two components the first component that you can put in inside your iron

card header is iron card title and the other one is iron guard subtitle let's save that and see how it looks so now you can see that the title of the card is pretty big in size also the text

of the subtitle is all uppercase along with having the iron card header and iron card content you can have images in your iron cards so let's see how we can use images to use an image within your

iron card all you have to do is just use the regular HTML image tag so for example let's use an image tag right before our iron card header inside our iron card so here

I'll use an image tag and for the source of the image I'll use the adorable avatars API again and as I save you can see that I get this image inside my card and the card

now looks much better and the image by default expands itself throughout the width of the card so it takes all the available horizontal space inside the card if you want to have your image

between your header and content you can do that as well and all you have to do is move this image tag right after the closing iron card header tag and now if I save the file

you can see that the card header which comprises of the title and the subtitle is above the image in the card and the content is below the image so that's how you can create cards inside your

application and within your eye on card content component you can put whatever you want you can use regular text and you can also use other ionic UI components so if you want to use a

button or an icon you can do that so now that we know how we can create cards in ionic let's have a look at how we can use grid in ionic before creating a grid I'll just get rid of everything I have

inside my iron content and I'll save the file so the page goes blank again to create a grade all you have to do is use the component iron grid the iron grid component requires that

the immediate child of the iron grid component should be an iron row so inside the Ryan grid you need to create a row using the iron row component and inside your iron row you need to create

columns using the iron call component or iron column component and for now I'll just go ahead and use some dummy text inside this column I'll make a copy of this column and paste it

inside the same iron row just after this first column let's say that and see how it looks you can see that I have the content but the content is divided into columns I

have two columns and each column contains its own copy of text and that's because I have put in this text inside the ion column component both these ion column components are inside the same

iron row therefore the text is horizontally in the same row if you create multiple columns all the columns divide the available space equally amongst themselves so if I create a

third column it will take a 1/3 of the total width and you can see that the first two columns are not shrink because they have to give space to the third column which also requires one third of

the available space so this is how you can create columns so by default all the columns divide the available space in a row equally amongst themselves but when you design an application you may want

to have some of your columns wider than the others and you can do that using some attributes that ionic provides for iron columns and the grid system in ionic is inspired a lot by the bootstrap

grid system so if you are aware of bootstrap the total width is divided into 12 units and you can divide these 12 units amongst your columns as you please so for example I want to have my

first column take up half of the width on the page and I want to divide the second half of the page equally between the second and the third column so out of the total of available 12 units the

first column will take up 6 and the second and third columns will take up 3 units each and to specify how many units do you want to allocate to each column all you have to do is just specify the

size parameter on your iron call component surely I squared and specify the size value of six for the first column and for the second and third column I can go

ahead and specify a value of three each but even if I do not have specify that value the remaining half will be equally divided between these two columns so now if I save this file you can see that the

first column takes up half the page width and the second and the third column divide the remaining space between them so if I just go ahead and type in something here inside this

column and save the file you can see where the third column lives along with dividing a row within columns you can also specify how you want your columns to span on different screen sizes by

default ionic grid considers five different screen sizes extra small small medium large and extra large these sizes range from small screen phones to large screen desktops

and there are attributes that ionic provides that allow you to define how you want your columns to span on each of these screen sizes so let's say that I want to have my first column take up

half the width on a small screen size which is the phone but if the screen sizes extra small I want this column to take up all the 12 units and we can do that using the size

s simple tribute the SM here stands for small and since I have said the value six on all the small screens and on all the screens larger than that this column will take up six units however you can

go ahead and specify explicitly how many units of width you want for this column on an extra small screen and for that you can use sighs – X s where X s stands for extra small and in this very

specific case I want this column to take up twelve units on an extra small screen similarly you can go ahead and specify widths for each screen size so for extra small we use sighs – XS for a small we

use size – s m4 medium we use size an MD for large we use size – LG and for extra-large size – XL so now if I save the application you'll notice that on this screen the column takes up all the

available 12 units and that's because this is an extra small screen however if you want to see how your application would behave if the screen size changes you can open the same URL and open the

port eight one zero zero instead of the default eight two zero zero to launch your application in your browser without having this emulator so now if you expand the size of your

screen you can see that the columns change their fit accordingly so as the screen size increases beyond a certain limit the first column now takes only six units of the available width and the

other two columns divide the remaining space between them so this is how you can create responsive user interfaces using the grid component so now that we know how we can use cards and grids in

ionic now it's time to take a step further and learn how we can display loading spinners as our application is doing something in the background so in the next video we learn about loading

controller