Having issues with getting GridItems to span columns

Hi,

I’ve been having a bit of trouble getting a GridItem to span columns. I have been using the GridItem::withArea method for this.

I have tried to boil it down to a basic example, so given that I have a TextButton member called “one”, which is added and made visible, and a resized() method as follows:

void ContentContainer::resized()
{
    Grid mainGrid;
    using Track = Grid::TrackInfo;

    mainGrid.templateRows = { Track(1_fr) };

    mainGrid.templateColumns = {
        Track(1_fr),
        Track(1_fr),
    };

    mainGrid.items = {
        GridItem(one).withArea(1, 1, 1, 2)
    };

    mainGrid.performLayout(getLocalBounds());
}

I get the following:

From reading the docs for GridItem::withArea(), the args seem to be: rowStart, columnStart, rowEnd, columnEnd which I was expecting to result in the button taking up the full width of the two available cols.

Have I totally misunderstood this? Am I not doing it the right way, or is there a better way?

Thanks in advance.

Code looks ok, but what’s the size of the ContentContainer? Does it fill the main window?

ContentContainer does fill the main window. In fact if I alter the code to have just one column like this:

void ContentContainer::resized()
{
    Grid mainGrid;
    using Track = Grid::TrackInfo;

    mainGrid.templateRows = {Track(1_fr)};

    mainGrid.templateColumns = {
        Track(1_fr),
    };

    mainGrid.items = {
        GridItem(one)};

    mainGrid.performLayout(getLocalBounds());
}

I get:

Only thing I now wonder about is how ContentContainer size is set. It’s set by getting and using the screen size as follows:

MainComponent::MainComponent() : appState(appStateIdentifier), contentContainer(appState)
{
    auto screenSize = Desktop::getInstance().getDisplays().getMainDisplay().userArea;
    addAndMakeVisible(&contentContainer);

    setSize(screenSize.getWidth(), screenSize.getHeight());
}

void MainComponent::resized()
{
    contentContainer.setBounds(0, 0, getWidth(), getHeight());
}

Don’t know if that’s got anything to do with it…

What happens if you try this: .withArea (1, GridItem::Span (2))

Yep, that did it. Thanks for your help Andrew!