Hello and this ionic programming tutorial we are going to be looking at the grid system within ionic. If you use any sort of a responsive framework like bootstrap foundation responsive to be free anything along those lines, you'll feel right at home if you haven't simply put there a grid system without hitting ionic Annie allows you to create columns and sizes of elements that are uniform on different devices. So if I had an iPad and I had a column which was 50% width, it will be 50% on the iPad 50% on iPhone 50% on the Nexus five x, etc etc. I think you get the point. So first of all, let's just create a very simple column not as good div what we do know what I go into simply Open this up in a separate text editor because the code in full web or in Xcode is terrible.

So in here, I'm going to put a div. Class of row. This requires this particular class is just not isn't it's not just me adding it, this is what it requires. So this is one unique row. If you have another div, which are in a row, then there'll be a separate line regardless of how much content there is in the previous row. Now in here, you would have diff.

Class equals coal, which is the column on coal, which is a column I'm going to copy and paste that. Still five times saved. Yeah. build our project. So now let's run it. Okay build has succeeded we are launching and now and here we go at the moment is probably not the easiest to demonstrate because we have a background and our text is in the center.

So what we're going to actually do is do style. So we're gonna put some style tags in the head. And in here we are simply going to put dot Cole. We're gonna put text, center text, align, center. We're gonna put no background dash So now I'll start doing Xcode again, I'll switch over in a second. Gray does need to build our projects and now we should be ready to connect as soon as possible.

As you can see we've got individual or while the joint top if you would put a margin or some padding, you would see some individual columns and they are of the same with our recommend training in the iPad simulator or on a real iPad if you have it on different devices. So you can see that they are the same and if I were to add, let's say two more, they would take up less with because there will be seven of them they will be taking up an equal amount of space or Tony have to there will be taken up 50% each Next, we're going to show you explicit column sizing that the moment, depending on the number of columns you have, the column will mean the row width gets divided by that number of columns or the even spacing. But now I'm going to show you how to set width in one column at 50%.

And to call me 25%, that sort of stuff. So we'll do another day. We're going to do save that go to sublime, you'll just be easier. We do it in sublime. So go down here, div, class, row, div. And in the first one class, he calls you by default have to have cold You cannot have called any of coal dash, how much you want your column to span.

So 50 will be 50% but that's how it works. Next, we're going to put div class equals, call us all we're going to be calling is call the copy and paste. And what this will do he'll equally take up the rest of the space but you could have it as 25% as temps and then do five more. So you would take a wall why is that like 15% equaliser be free percentage, try that try doing something along the lines. I've always applied the now 15 here, save it. build our project.

Now let's run it So as you can see this first column span 50% of our grid, and the next two are evenly spaced at 25% each. So the next property we're going to be looking at is off setting columns because at the moment, all the columns have started from the left, but maybe you want a gap of 50%. That's what we're going to be achieving right now. So if we put a div put a class row then put a div class of call, then you put call the actual soul Are your columns on the court? Why should I put on the put 14 on now I'm going to put 50 I'm going to put code dash offset 25. So it's going to start 25% and he's gonna spend 50% of the width.

So it's gonna be from 25 to 75%. Essentially, in here we're gonna put 7525 50 and now we are doing the whole class before coal dotco. If I save that, I will get a pretty darn cool result. So let's just run our project. Okey dokey So, indented essentially by 25%, it has been 50%. And the fine or 25% is taken up equally by this column.

If we were to have two in two afterward after this, they would eat take up 2012 and a half percent. So now we're going to look up vertically aligning columns. So now let's put a div put a class of row div class of column or call for call What we're going to do is copy and paste this. So we have free instances, and directly after we're going to put div class equals coal. Well in here what we're going to do put one, great line to slide three right on for you'll see why in a moment if I were to run this now. So let's just run this in our project.

So we have two column column column 1234. what it's done is the height of these columns is the height of The tallest column for all of these. So that's what I've done so far. What we're going to do now is copy and paste this and very simple. And you can see, let's just do it in sublime. So is the superior editor, copy and paste this. As you can see, these are aligned vertically at the top, what we want them to be aligned, maybe in like a staircase effect, what we can do is add some classes.

So if I were to put co dash top Cole call center cold water. So now let's save that actually, you know what, instead of saving and running out, I'm going to copy I'm just going to show you all the different one that I want to show you. So I'm going to show you another cool one and this is going to be We're going to leave this as it is, imagine if we wanted them all to be in the center, we could just do row center and if we wanted them all at the bottom often you can guess we just do row say we may row dashboard. Save that Nope, gotta get rid of that that T the only the only two teasing bottom when our project or build our project or should say. Now let's run it for Xcode. Okey dokey.

As you can see, we've got a staircase defects over the top center and the bottom we have and the height is adjusted accordingly. We've got the center effect and then we got the box effect. So the last thing I'm going to show you is a responsive grid at the moment, if we could resize this or review it on different screens, they would uniformly be the same. So the free would take up 75% of where if this will take off 50% of the screens will take a look 25%, etc, etc. What you can do is create a responsive grid. So if I were to put a div don't do it in here when do this line disappear editor, but the div class equals row responses dash FM.

Now if I were to do a diff Class equals cold call. Let me copy and paste this. What we've done is created a road where if the screen size is below is smaller than the landscape phone, horizontal form, basically, what it will do is put each one of these columns on an individual line essentially. So let's throw that project and show you what we mean. This is a great way of making it look good on a smaller screen, what you sometimes gain websites and apps less so but especially with web software, we saw we saw it in it. We resolved it to the point of local website, it's still rejoicing in the normal way so things are still taking off 50% instead of going on top of each other as it is on top of each of them have power to go to hardware rotate left is our Not Okay, our app does not support landscape.

So let's just run it and make sure it support land scape. That's good. So what we're going to do is go to sublime we're going to put this one at the top loi. So save that, we're going to put a great line below build our project. And now in Xcode or in a moment, we will run our project so let's run this bad boy in the simulator. It is a switch back and they did and they So this is the landscape Left, Right upside down portrayed.

As you can see they are evenly spaced out now because our screen is not smaller than a landscape form. It's we're at a landscape phone. So let's just honestly get rid of this. We don't want this anymore. Let's run it one more last time so you can see what it look like while it was just in regular portrait mode. Yes, run it.

And as you can see they are on top of each other because we are smaller than a landscape from there. So Is it for grid for the grid system. If you have any questions, feel free to post them on our education platform song or learning Dakota, UK. There'll be a link in the description to that. Plus there will be a nova link to the source code from every video in this series. And as usual, thank you for watching and I hope you have a great day.