# Grid with squares problem

Hi,

I’ve got a grid with equal squares as seen in added picture!

Code:

``````<Grid ColumnCount="4" Width="100%">
<StackPanel Column="0">
<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>
<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>
<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>
</StackPanel>
<Image ColumnSpan="3" Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" MaxHeight="100%" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey" Alignment="Top"/>
</Grid>
``````

Because the total width of my grid divided by four (columns) isn’t a round number, the grid isn’t a perfect grid as seen at the bottom. Is there a way to force the width of the grid to be dividable by 4 so the grid is always perfect?

preferably by keeping width dynamic without setting width in points.

You should get rid of the `StackPanel` and just let `Grid` do its job in how it’s sizing and filling its cells. Also, it seems that you could just set the box-aspect right on the `Grid`, too?

Here’s a complete example that doesn’t suffer from any aliasing:

``````<App>
<Grid Columns="1*,3*" RowCount="3" BoxSizing="FillAspect" Aspect="1">
<Image Column="0" Row="0"
Url="https://unsplash.it/400/400?image=1" StretchMode="UniformToFill" Color="#333" />
<Image Column="0" Row="1"
Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Color="#333" />
<Image Column="0" Row="2"
Url="https://unsplash.it/400/400?image=3" StretchMode="UniformToFill" Color="#333" />
<Image Column="1" RowSpan="3"
Url="https://unsplash.it/400/400?image=4" StretchMode="UniformToFill" Color="#333" />
</Grid>
</App>
``````

Thanks for the quick reply, i’ve tried your approach but that way i don’t have perfect square pictures. What do i need to add to get all squares.

I’m not sure what’s the cause of the not-perfect-square, but changing the `Aspect` property value (below 1, over 1) squashes it either vertically or horizontally.

The problem with the squares is with the images itself not with the grid. I want the images inside this grid to be perfect squares.

To be clear, the design i’m after:

Seems like a little math exercise around rows and columns then. Here’s your perfect squares:

``````<App>
<Grid Columns="1*,2*" RowCount="4" BoxSizing="FillAspect" Aspect="1" CellSpacing="1">
<Image Column="0" Row="0"
Url="https://unsplash.it/400/400?image=1" StretchMode="UniformToFill" Color="#333" />
<Image Column="0" Row="1"
Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Color="#333" />
<Image Column="0" Row="2"
Url="https://unsplash.it/400/400?image=3" StretchMode="UniformToFill" Color="#333" />
<Image Column="1" ColumnSpan="2" RowSpan="3"
Url="https://unsplash.it/400/400?image=4" StretchMode="UniformToFill" Color="#333" />
</Grid>
</App>
``````

The `Aspect="#"` is a ratio of the desired X to Y aspect. If you want square cells this number needs to be the ratio of horizontal to vertical cells. For example:

`<Grid ColumnCount="4" RowCount="3" Aspect="4/3">`

or

`<Grid ColumnCount="3" RowCount="7" Aspect="3/7"/>`

These will result in square cells. You then use Row,Column,RowSpan and ColumnSpan to fill up those cells with images.

I think you’re desired grid, the last image you posted, might be:

`<Grid ColumnCount="4" RowCount="5" Aspect="4/5">`

Most images will just fill one cell, but the large ones will be `<Image Row="0" Column="0" RowSpan="2" ColumnSpan="2">` and `<Image Row="2" Column="1" RowSpan="3" ColumnSpan="3"/>`

Thanks to the both of you, that solved it completely!
Keep up the good work!

how to make grid in round shape ?

@Hiren: please don’t hijack forum threads and make a new forum post with your question. Include a screenshot or a picture to explain yourself better.