Proportional layout divides the space available to a layout into relative shares. In a .NET MAUI Grid, `*` gives each row or column an equal share; a number before `*` gives that row or column a larger or smaller share. The values are ratios, not device-independent units (DIUs), so `1*,3*,8*` and `4*,12*,32*` produce the same result. section 5.1.3 section 5.1.2
Use it when the parts of an interface should grow and shrink together. A calculator grid can give its display four shares of height while each of four button rows receives one share. The display then uses half the Grid’s available height, while the buttons divide the other half evenly. section 5.1.3
Listing 5.10 Updated Grid with proportional screen and rows
<Grid ColumnDefinitions="*,*,*,*"
RowDefinitions="4*,*,*,*,*" #1
RowSpacing="2"
ColumnSpacing="2">
This Grid keeps four columns equal and assigns the display row four times the height of each button row: `RowDefinitions="4*,*,*,*,*"`. section 5.1.3
Set up proportional Grid sizing in three steps:
- Add `RowDefinitions` and `ColumnDefinitions` to the Grid. section 5.1.2
- Use `*` for equal shares, such as `*,*,*,*` for four equal columns. section 5.1.2
- Prefix `*` with weights when one area needs more space, such as `3*,2*,1*`. section 5.1.3
Ratios rather than measurements
`ColumnDefinitions="3*,2*,1*"` divides width into six shares: the columns receive one half, one third, and one sixth. `RowDefinitions="1*,3*,8*"` divides height into twelve shares: one twelfth, three twelfths, and eight twelfths. Scaling every weight leaves the layout unchanged. section 5.1.3
Proportions respond to available space, but they do not guarantee that controls keep a fixed physical size. On a tall, narrow screen, proportionally sized calculator buttons can become elongated. Fixed row and column dimensions can instead preserve button size, while responsive orientation-specific design is considered separately. section 5.1.3
A related use appears in `AbsoluteLayout`: `LayoutBounds` supplies x, y, width, and height, while `LayoutFlags` chooses which values are proportional. For example, proportional position values of `0.9,0.9` keep a floating action button near the bottom-right as the layout resizes. This is proportional positioning, rather than Grid space allocation. section 6.3
