BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/LayoutGrid.razor

@page "/layoutgrid"
@using Microsoft.FluentUI.AspNetCore.Components.Extensions

@rendermode RenderMode.InteractiveServer

<style>
    .round-edge {
        border-radius: 10px;
        border-style: solid;
        border-width: 1px
    }
</style>

<FluentLabel Typo="Typography.H3">Grid</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    The <code>FluentGrid</code> component helps keeping layout consistent across various screen resolutions and sizes.
</FluentLabel>
<FluentCard Width="auto" Height="auto">
    <FluentStack Class="mb-3" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
        <FluentStack Orientation="Orientation.Horizontal">
            <FluentLabel>Justify</FluentLabel>
            <FluentSelect Items=@(Enum.GetValues<JustifyContent>())
                          OptionValue="@(c => c.ToAttributeValue())"
                          TOption="JustifyContent"
                          Position="SelectPosition.Below"
                          @bind-SelectedOption="@justification" />
        </FluentStack>
        <FluentStack Orientation="Orientation.Horizontal">
            <FluentLabel>Spacing</FluentLabel>
            <FluentSlider class="fluentslider-300" @bind-Value="@spacing" Min="0" Max="10" Step="1" />
        </FluentStack>
    </FluentStack>

    <FluentGrid class="p-3 round-edge" Justify="@justification" Spacing="@spacing"
                OnBreakpointEnter="@OnBreakpointEnterHandler" 
                AdaptiveRendering="true">
        <FluentGridItem xs="12">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="12"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="12" sm="6">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="12" sm="6"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="6" sm="3">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="6" sm="3"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="6" sm="3">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="6" sm="3"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="6" sm="3">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="6" sm="3"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="6" sm="3">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="6" sm="3"
            </FluentLabel>
        </FluentGridItem>
        <FluentGridItem xs="3">
            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
                xs="3"
            </FluentLabel>
        </FluentGridItem>
    </FluentGrid>

    <FluentLabel>@message</FluentLabel>
</FluentCard>

<FluentLabel Typo="Typography.H3">Breakpoints</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    Breakpoints help you control your layout base on widows size.
</FluentLabel>
<FluentCard Width="auto" Height="auto">
    <FluentLabel>
        Extra Small <code>xd</code> &lt;600px, Small to large phone
    </FluentLabel>
    <FluentLabel>
        Small <code>sm</code> &lt;960px, Small to medium tablet
    </FluentLabel>
    <FluentLabel>
        Medium <code>md</code> &lt;1280px, Large tablet to laptop
    </FluentLabel>
    <FluentLabel>
        Large <code>lg</code> &lt;1920px, Desktop
    </FluentLabel>
    <FluentLabel>
        Extra Large <code>xl</code> &lt;2560px, HD and 4k
    </FluentLabel>
    <FluentLabel>
        Extra Extra Large <code>xxl</code> =&gt;2560px, 4k+ and ultra-wide
    </FluentLabel>
    
</FluentCard>

@code {
    JustifyContent justification = JustifyContent.FlexStart;
    int spacing = 3;
    string message = "Message: ";

    void OnBreakpointEnterHandler(GridItemSize size)
    {
        message = $"Message: Page size {size}";
    }
}