Grid
Flexbox Layout
In addition to column based layout, GridRow and GridColumn also support Flexbox based layout.
Equal Width
Space is equally divided among GridColumns within the same row.
1/4
1/4
1/4
1/4
<GridRow>
<GridColumn>
<span>1/4</span>
</GridColumn>
<GridColumn>
<span>1/4</span>
</GridColumn>
<GridColumn>
<span>1/4</span>
</GridColumn>
<GridColumn>
<span>1/4</span>
</GridColumn>
</GridRow>
Setting One Column width
You can assign a specific width to one or more columns, and the remaininig columns will equally divide and use the remaining space.
1/6 (specified)
Distributing Remaining in 3 parts
Distributing Remaining in 3 parts
Distributing Remaining in 3 parts
<GridRow>
<GridColumn Col="Col.Six">
<span>1/6 (specified)</span>
</GridColumn>
<GridColumn>
<span>Distributing Remaining in 3 parts</span>
</GridColumn>
<GridColumn>
<span>Distributing Remaining in 3 parts</span>
</GridColumn>
<GridColumn>
<span>Distributing Remaining in 3 parts</span>
</GridColumn>
</GridRow>
Variable Width Content
GridColumn supports Auto value for both normal and responsive modes. This allow the column sizes to change based on the content width.
1 of 3
Variable width content (2 of 3)
3 of 3
1 of 3
Variable width content (2 of 3)
3 of 3
<GridRow>
<GridColumn Col="Col.Auto" ColLg="Col.Two">
<span>1 of 3</span>
</GridColumn>
<GridColumn ColLg="Col.Auto">
<span>Variable width content (2 of 3)</span>
</GridColumn>
<GridColumn Col="Col.Auto" ColLg="Col.Two">
<span>3 of 3</span>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn>
<span>1 of 3</span>
</GridColumn>
<GridColumn ColMd="Col.Auto">
<span>Variable width content (2 of 3)</span>
</GridColumn>
<GridColumn Col="Col.Auto" ColLg="Col.Two">
<span>3 of 3</span>
</GridColumn>
</GridRow>
Mulit Row (or specifying Row Break)
A break can be added in between GridColumns by using GridBreakRow. This breaks any following columns to a new line.
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
<GridRow>
<GridColumn>
<span>Col 1</span>
</GridColumn>
<GridColumn>
<span>Col 2</span>
</GridColumn>
<GridBreakRow></GridBreakRow>
<GridColumn>
<span>Col 3</span>
</GridColumn>
<GridColumn>
<span>Col 4</span>
</GridColumn>
<GridColumn>
<span>Col 5</span>
</GridColumn>
<GridColumn>
<span>Col 6</span>
</GridColumn>
</GridRow>