Just to kind of reiterate here the grid system lets you define rows and columns and that’s the nice general way to help style your page now if you need to take it to the next level you can actually go in and you can modify a particular page template so it looks kind of completely different or you can make completely different region position so you can say and I don’t want region position one to be in this spot I want region position one to be up here or in this other area and so you can bind to that region position and now you can suddenly it kind of inject regions into a location of the page that you weren’t able to before we’ll talk about that but first let’s just make sure that we have the grid basics covered.
So what if I want this region to display to the left and I want my tree to display to the right how do we solve that well quite simply minimize this you can see that visually my tree is displaying below at this container and I’m going to change this from New just to the container because it’s bugging me that it just says new safe under a couple of ways that I can do that and I should be able to click and drag this to the right okay so I just quickly I just drug that to the right and now it’s displaying a kind of even let me go ahead and save and run oh did I not save I don’t think I actually saved you close this and run and what’d I do wrong let’s take a look and let me actually refresh this page to make sure that it’s I didn’t somehow get out of sync here I did so just because so um this is I’d call that a bug so apex 5 the dragging option here I think doesn’t quite update everything the way that we would want it to do so I’m going to show you the other way anyway.
If another way that you can do this is if you click on a region and we’re going to go ahead and minimize all the properties you can see there’s actually a grid option and because this tree comes sequentially after this other container I can say start new row no start new column yes and if I leave the column and the column span to automatic it’s just going to cut everything up 50 50 let me save and run there we go and you can see it cut the page up 50 50 pretty cool the other thing that I can do is if I notice that the height of these things don’t really match up very well but I have to be careful because if depending on how I expand this right this can get substantially bigger so this particular one I don’t I don’t think I want to release try to set the height or deal with this one too much okay what I would like to do though is I can set the height of this container so quite simply if we click on this container and I believe it’s an appearance here we actually have template options.
This is new if you’ve used apex 42 when you move to give this wasn’t available before so we can actually click on this and one of the options here is body height which is set to auto and I can actually come in here and say actually I want it to be 480 pixels okay save and then run and so now you can see I’ve kind of adjusted the height of this container and it scales a little that’s a little more nicely whoops I didn’t mean to click on that it scales a little more nicely well then the last option becomes well what if I want to add a container and that spans the top above both of these so what I’m going to do is I’m going to say let me add another content item a static content item I’m going to add two into my content body and I want to add it before the container that all is already there okay let me go ahead and save and let’s just see by default what does this do okay it looks kind of weird okay.
But we’re not going to spend extra time on that one though yep that will that one just going to take a little more time that’s all not at all you’re exactly right and it will try to consume as much space as possible now I can tell it to not do that right so I can come up here and if we go to under the grid layout it’s going to say column span automatic I can say only span one column and look at look how smoothed it becomes right so I can save run and now I have this smoothed little column here and I could put 12 of these up along the top if I wanted to, but automatic basically means take up as much space as possible and conversely I can are similarly I can go to my container and I can say don’t I don’t want this to divide 5050 I want this to take up a third so I’m going to make it call span for and then because of that this tree is going to then call span 8 it’s going to fill up the rest of the gap so I can say save ok, so now this is called spanning four and then this is now called spanning eight.
If I want to have some sort of gap in between this like maybe I just want a big empty space maybe I want a space of four in the middle well I can come to my tree and I can say well the column that I want you to start on I don’t want you to automatically try to figure out the first column I actually I want you to start on column nine okay and notice now that we’ve made this gap here, so this goes from one to four then five six seven and eight are blank and then nine through 12 are my tree go ahead and save so effectively I have a three-column layout missing the middle column here any questions on that so between a start column and column-span it’s very easy for you to kind of configure what this what your page should look like sometimes though you’ll have multiple regions that you want to have kind of displayed logically together like maybe you’ll have four regions that always need to be together and maybe you’re moving them around a lot.
So another thing that you could do is you could come here and you could say I’m actually I can actually if I right-click the container over here I can actually say right-click and create sub-region okay so now I have a new sub-region in here and I’m just going to say I let me configure this a region just a little and I’m going to call it sub 1 and I can actually right-click this and I can say and actually have to right-click over here and I can say copy too and I can actually keep copying it in into this container sub-regions so I’m going to say after so now I have sub 1 and again I have another sub-one that’s been copied I’m just going to change this to sub 2 I can do this again right-click copy to the container I’m going to go into the sub-regions and I want to go after sub 2 ok so now I have sub 3 so what does this look like save run now.
I actually have some sub-regions in here and sometimes and this can be helpful for and if you have you know like little small snippets of information that are related like if you’re trying to kind of dissect a lot of information and keep it organized that’s a good way to do that and some other things that you could potentially do for sub-regions is if we come over here I’m going to edit my sub-region and there are a couple of different templates that you can leverage and collapsible we could make one of these collapsible we can make one of these actually standard is fine but what we can do though is in addition to being a standard template we can actually come in here and we can say and we can remove the borders okay we can say we want to hide the header we don’t have we actually don’t want the header so what does that do save and run the page.