Pack Vs Grid For Placement - Intro To Tkinter 3

in this video we'll look at pack versus Grid for positioning things in kter and python hey guys John Al from tk.com and in this video we'll start to look at pack versus Grid for positioning things around in a tkinter app now up until now we've looked at just packing things on the screen and that's fine but kter also has a system called the grid system that is more like rows and columns that allows you to really kind of dictate exactly where things go on the screen and that's what we're going to look at in this video so let's head over to our code I'm using the Sublime Text Editor and they get back terminal as always and as always you can find a link to the code in the pin comment section below as well as link to the playlist with all the other videos in this intro to tkinter Series so check that out if you haven't so far and if you don't want to wait for all these videos to come out be sure to grab a totally free PDF copy of my kter widget quick reference guide book thing is awesome over 150 pages with all the ker widget attributes grab your free copy today just head over to tk.com widget dbook and your email address I'll send that right out to you and while you're there think about membership ink.com you get all my ker courses all my future courses for one low price these C bu code YouTube to get 30% off membership if you're interested Okay so we've got our basic tkinter starter code that we always have I'm calling this pack grid. py and let's start out just by packing a couple of buttons on the screen like we always have before so I'm going to go mycore button one and this is going to be a button we want to put it in root we want the text to say I don't know button doesn't really matter uh let me just copy this guy and let's do button two same deal and now let's go my score button one. pack and let's give this a pad y of 20 push down the screen a little bit and then let's go my button two. pack and also give it a pad y so let's save this and run it just to see what the the spacing and everything looks like for this so let's head over to our terminal I'm in my ct.com directory and let's run python pack grid. py and you see we've got these two buttons now the first one has 20 pixels of space above it and 20 below it this one also has 20 above it and 20 below it so that's why it looks kind of a wide Gap here versus a smaller Gap here one of the nice things about pack and the padding system is you can do it like we just did and say 20 and that will be for pad y above and below you can also use pad X for left and right but you can also designate just the top or just the bottom using a tuple so let's look at that very quickly so instead of here saying just pad y 20 we can say pad y of 20 and zero and let's give this a pad y of zero too just to sort of see here so now if we save this we have 20 above and nothing below and for this button here we gave it no padding so it's right up against there so because there's often times you want padding either above or below but not both so just use a topple for that so okay that's good now that's pack we've already looked at pack before one thing I will mention is we can expand them if we want and we do that by by using fill so let's do fill for the second button let's go fill of X now you can fill X which is left to right you can fill Y which is up and down or you can also do both uh let's just do X for now go and save this and run it see what this looks like and we got this button that's now filled all the way across and it just expands in both directions as far as it can in the container that it happens to be in and this container just happens to be our root app talk about frames in just a second but okay that's kind of interesting now one thing you'll notice if we sort of change the size of this this stays it resizes dynamically to whatever the size of the thing that it's in the container that it's in so that's interesting uh now we can also use pad X now because we have some X stuff that is interesting so let's give this a pad X of say 20 and this will give padding on the left and right as opposed to pad Y which is is up and down right top and bottom so here save this and run it and now it's filled but there's padding on both sides of 20 pixels so okay very interesting so that's pack we're going to use pack throughout this playlist all the time so I'm not going to go into any more detail with pack for the rest of the video we want to talk about grid and grid is very interesting now the first thing you'll notice is grid is what it sounds like it's a grid system so there are rows left and right and columns up and down and your whole app you just have to sort of visualize in your mind a grid and then you can just place things or grid things in rows and columns accordingly now one thing to note is you cannot pack and Grid in the same container so our container is this whole app right so if I came down here and tried to grid you'll see in just a second well let's just do one so let's go mycore let me let me comment this here uh grid stuff right so let's go mycore button three and that's going to be a button we want to put it in root we want the text to say button whatever now to grid stuff it's just like pack we call the thing so my button but instead of pack we do grid now inside of here you set the row equal to something they start at zero and you set the column equal to something they start at zero now if we save this and try and run it we're going to get an error because like I said you cannot grid things and pack things in the same overall container which is our app so if we try to run this guy we can say Hey you cannot use the geometry manager grid inside which already has slaves managed by pack right so luckily there's a nice way to get around this by using frames and we haven't talked about frames yet we'll probably talk about them in detail in another video but for now let's just uh create a quick frame you don't have to know much about them to use them so I'm going to call this mycore Frame and that's going to be a frame widget we want to put it in root that's really all we need so let's go mycore frame. pack and let's give this a pad y of 20 to push it down the screen from these buttons a little bit so we have a frame and we've packed it just like we packed all these other things so there's no problem now inside of this Frame we can grid things and that's a different Master widget it's no longer inside the main M app it's its own thing it's a frame so inside of that we can put things and we put things in a frame just by like right here we said put our button in root because our main app is root well we can instead say put it in my frame so instead of here saying root we could say here put it in my frame so now instead of showing you that let's make a few more buttons so uh let's let's do three more or two more so let's go four and five we want them in my frame and so here let's create two more four and five okay so like I said rows and columns start at zero right so we want all of these let's put them straight across from each other so we want them in the same row so that's row zero the first one will be in column zero next one will be in column one next one column two now you can just say one two 3 if you want same thing here you could call this Row one and tter will treat it like that but Tech technically it is the zeroeth row so let's just go ahead and do it like that so now if we save this and run it we have these nice three buttons and they're straight across from each other and that's grid so this is Row one all the way across and this is column one column two and column three or technically column zero column one and column two very cool now you'll notice they're all squished together we can pad X these guys so if we came back over here and really we only need to do the one in the middle right so we could go pad x equals 20 because it will give padding on each side of that one in the middle which will then run this guy again give padding make it look like they're all spaced apart right and again you can also use topples very cool so that's one row now what if we wanted another button below that kind of stretched out the whole length well we talk about that in a second but let's first build another button below just to see another kind of row here so let's just copy this guy here this is going to be my button six and let's come down here and copy this yeah go and this is my button six now instead of row zero we want to put it in row one and let's say column one so let's save this head back over here run Sky again and now we have a second row right here and the button is in the 0 oneth column two so 0 1 2 0 one 2 now you'll notice it's scrunched right next to it again we can use our pad X and our pad y so if I wanted to say pad y of 20 that will give 20 pixels of space above and below it we around this we now see there's nice bit of space there very cool this is all scrunched up we might want to move move this all down we can with our frame by say giving this a pad y of like 50 really push it down the screen now those buttons are down here further little separation between these two things so okay that's cool now what if we wanted this button to stretch the width of this entire thing here well we would use something called a column span because this is a column this is a column and this is a column we want to span all of those columns so we could do that super easy we could just give this a column span of three so now we have it spanning all three but I would probably put this in column zero so it's right at the beginning of our our columns and then have it span across all three so now if we save this and run it this is going to get us part of the way there we put it in column zero which is right here but yet it looks like it's right here because we're spanning it across well the problem is there's not a lot of text here so the button just isn't very big so it's not going all the way across it is technically going all the way across there's just not much of it to see we can sort of tell T hinter to just make the button bigger and let's do that and we do that by using something called sticky so up here with hack we use this fill you can't fill with grid for some reason they they changed it out and instead of using fill they use a thing called sticky and with sticky you use directions so it's north south east and west so North is above South is below East is to the left and West is to the right so we want East and West we want to expand it we want to fill it out to the east to the left and to the right to the West right if you wanted to go up and down that would be North and South if you just wanted it to go up that would be North if you just wanted it to go right that would be West right we want it to stretch out both I don't know it's a little a little bit silly but it works the sticky and now we have this button stickying out the entire area that there is so that's Grid in a nutshell that's pack in a nutshell there are other things you can do with both of these grid and pack and we'll get into these sorts of things as we move along in the playlist but this is what you need to really get started and understand the grid system now we have this whole block in a frame if we didn't and we got rid of these things up here that weren't packed anymore this whole whole block of buttons would be up here in the top leftand quarter so sort of keep that in mind so very often I will create a frame and pack it and whenever you pack things it just packs things right in the middle of the app and then if you pack something else below it it just packs it right below it like we see with these two buttons they're just right in the middle of the app so if you want to Center things I'll often use a frame to Center them pack the frame inside of the frame you put the grid stuff that you want like we've done here there's just a zillion different ways to sort of play around with the grid and the pack system which you know we'll learn about as we move along in this playlist and also just by playing around with it you'll learn these things but this is really the guts of what you need to get started now there's also a third geometry system there's pack there's grid there's also place and place allows us to put things in very specific sections based on coordinates we'll look at that in a couple of videos from now but in the next video we'll dive a little bit deeper into the pack and grid system and we'll look at something called pack forget and pack destroy very fun and that video will be popping up somewhere over there so check that out my name is John Elder from tk.com I'll see you in the next video

Channel: Tkinter․com

Views: 1,843

Keywords: tkinter pack, tkinter grid, tkinter sticky, tkinter fill, tkinter grid sticky, tkinter pack fill, tkinter pack vs grid, tkinter pack and grid, tkinter pack grid same time, tkinter.com, john elder, john elder tkinter, john elder tkinter tutorial, tkinter pack method, tkinter grid method, tkinter .pack(), tkinter .grid(), tkinter pack(), tkinter grid(), tkinter grid columnspan, tkinter columnspan

Id: m9peQh4tu9g

Length: 13min 20sec (800 seconds)

Published: Tue Mar 12 2024