Place a box on the top and in the center

Question

I am trying to place four blue boxes in the grid. First I wanted to start with one blue box in the center and in the top. Unfortunately I can't even figure one box out to place it right. I've tried to make two boxes and one panel. I've tried with a static text and it worked, so I wanted to adapt that principle with the box, but I don't know what I am doing wrong. Could you have a look into it to see what I've done wrong?

What I want to achieve is this:

Here's below is my code:

    import wx
class Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        panel1 = self.panels()
        self.boxes(panel1)

    def panels(self):
        panel1 = wx.Panel(self)
        panel1.SetBackgroundColour([0, 178, 202])
        return panel1

    def boxes(self,panel1):
        hbluebox1 = wx.BoxSizer()
        vbluebox1 = wx.BoxSizer(wx.VERTICAL)

        hbluebox1.Add(panel1, 6, wx.ALIGN_TOP)
        vbluebox1.Add(hbluebox1, 6, wx.ALIGN_CENTRE)
        self.SetSizer(vbluebox1)
        return vbluebox1

if __name__ == '__main__':
    class Screen(wx.Frame):
        def __init__(self, parent, id, title):
            wx.Frame.__init__(self, parent, id, title, size=(600, 400))
            framebox = wx.BoxSizer()
            panel = Panel(self)
            framebox.Add(panel, 1, wx.EXPAND | wx.ALL)
            self.SetSizer(framebox)
            self.Show()
    app = wx.App()
    Screen(None, -1, "Kleuruitdager 2")
    app.MainLoop()

Answer 1

You can achieve this with simple coloured panels and a wx.GridBagSizer

I'll leave you to finish off the tweaking and a central panel (perhaps achieved in a similar manner).
The other option, is of course, to start drawing, as suggested in the comments.

import wx

class Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        sizer = wx.GridBagSizer(3, 3)
        top_lpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        top_mpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        top_rpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        top_lpanel.SetBackgroundColour("white")
        top_mpanel.SetBackgroundColour("blue")
        top_rpanel.SetBackgroundColour("white")
        
        mid_lpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        mid_mpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        mid_rpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        mid_lpanel.SetBackgroundColour("blue")
        mid_mpanel.SetBackgroundColour("white")
        mid_rpanel.SetBackgroundColour("blue")
        
        bot_lpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        bot_mpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        bot_rpanel = wx.Panel(self, wx.ID_ANY, size=(100, 100))
        bot_lpanel.SetBackgroundColour("white")
        bot_mpanel.SetBackgroundColour("blue")
        bot_rpanel.SetBackgroundColour("white")
        
        sizer.Add(top_lpanel, pos=(0, 0), flag=wx.EXPAND, border = 10)
        sizer.Add(top_mpanel, pos=(0, 1), flag=wx.EXPAND, border = 10)
        sizer.Add(top_rpanel, pos=(0, 2), flag=wx.EXPAND, border = 10)
        sizer.Add(mid_lpanel, pos=(1, 0), flag=wx.EXPAND, border = 10)
        sizer.Add(mid_mpanel, pos=(1, 1), flag=wx.EXPAND, border = 10)
        sizer.Add(mid_rpanel, pos=(1, 2), flag=wx.EXPAND, border = 10)
        sizer.Add(bot_lpanel, pos=(2, 0), flag=wx.EXPAND, border = 10)
        sizer.Add(bot_mpanel, pos=(2, 1), flag=wx.EXPAND, border = 10)
        sizer.Add(bot_rpanel, pos=(2, 2), flag=wx.EXPAND, border = 10)                
        self.SetSizer(sizer)

if __name__ == '__main__':
    class Scherm(wx.Frame):
        def __init__(self, parent):
            wx.Frame.__init__(self, parent)
            framebox = wx.BoxSizer()
            panel = Panel(self)
            framebox.Add(panel, 1, wx.EXPAND | wx.ALL)
            self.SetSizerAndFit(framebox)
            self.Show()
    
    app = wx.App()
    Scherm(None)
    app.MainLoop()