Qt Quick:Removing empty spaces when the delegate is not visible in a gridview

[ap02423]

ml question:I am trying to use the following model and delegate components in a grid view. The model has a boolean role vis which turns the visible property of the delegate on or off. Later on I intend to bind this vis property to my backend.In this example the green button does not show up as intended but leaves an empty space between red and brown buttons. How do I get rid of the empty space. I just want the brown button to be next to red button

This is my model component
ListModel {

ListElement {
    rectcolor:"red"
    vis:true
}
ListElement {
    rectcolor:"green"
    vis:false
}
ListElement
{rectcolor:"brown"
 vis:true
}

}
This is my delegate
Rectangle {
width: 100
height: 62
visible:model.vis
Button{color:model.rectcolor}
}

[Babalas]

Try setting the height: model.vis ? 62 : 0.