Use Excel to Plan a tkinter .grid()

If you have ever stated a project using .grid() that was simple, even though it had several screen elements, you know you can spend days adjusting and readjusting elements to get the design you thought you had clearly in mind.  You were clearly wrong. You can cut those days to just hours by using Excel – or probably Google Sheets – to layout and refence what you need in advance.  It takes just a few minutes. Here is the general idea:

  • Decide what overall size your Toplevel widgets will be – this will be in pixels. For most small to intermediate projects we use a standard tkinter setup called HEADER SETUP 2 1024X768.py which we load into an IDE then immediately rename to our working project name. That setup already has a top1 window defined at 1024×768 that works for most small to medium projects and is great for testing stuff quickly! There are a couple of closely related techniques, here is one:
  • In Excel, define and refine cells representing major blocks – think Frames or LabelFrames. We do this until we visually have something in the ball park that looks about like what we want. Now:
  • Label the columns and rows, each cell being equivalent to a tkinter grid column or row, then above and outside those labels.
  • Look up (this is the hard part) the width of each Excel column and height of each row, record them in a column just above or below your design, and total them up for width and height
  • Find each the % of total for each excel row and column. Calculate those % in the cell just next to the units.
  • Use those percentages and the dimensions of your top1 widget screen to calculate a first cut at the exact size in pixels of frames or Label Frames you will create to establish those blocks. Do this in the next cell out from your % calculation. For example, if we are using our standard 1024×768 utility size screen and a cell in our Excel plan is 28.03% of total width and 29.9% of total height, we know the Frame size will be about (.2803*1024=) 287.03 pixels wide and (.299*768=)229.63 pixels high.
  • Round everything and adjust for symmetry that common sense tells you should be there.

You can now grid those frames quickly and inside each frame you can .place(), .pack(), or .grid() widget to suit your plan. Note you can only use one of the geometries and you may need to use .propagate(0) with grid or pack to keep your frames from collapsing.

So, your quick visual plan in Excel may look like this:

And you finished product may come out looking something like this: