Grid with flexible width and height, but square elements

General
1

I am trying to setup a 6x4 grid in my app with tiles that are equal distance apart, but also perfect squares.

I would like the width and height of the grid to be flexible, and then everything to resize such that the elements sit aligned to the top and midle of the grid filling as much space as possible while remaining square and spaced equally.

The options i have considered is using js to update the values when the window size changes or something else.

2

Rows/Columns have three sizing modes: auto, fixed, and proportional. It sounds like you’d want to be mixing fixed and proportional. For example:

<Grid Columns="50,1,50" Rows="1,2,50">

The values 1 and 2* are weights, meaning the second row will take up twice as much space as the first. The 50 is a fixed size row at the bottom; combined with the two 50 column values it produces two squares. the middle cell at the bottom expands to take up the rest of the space.

You might also find some value in the RowSpan and ColumnSpan settings you can place on an element to take up multiple cell spaces.

I hope some combination of these settings can give you what you want. If not then perhaps draw a rough picture for and we can get you what you want.