<PrimerBrandGrid HasOverlay="true">
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span1 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span11 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span2 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span10 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span3 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span9 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span4 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span8 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span5 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span7 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span6 } })" />
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span6 } })" />
</PrimerBrandGrid>

<PrimerBrandGrid HasOverlay="true">
    <PrimerBrandGridColumn>
        <PrimerBrandGrid HasOverlay="true">
            <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span4 } })" />
            <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span4 } })" />
            <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span4 } })" />
        </PrimerBrandGrid>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>

<PrimerBrandGrid HasOverlay="true">
    <PrimerBrandGridColumn SpanMap="@(new Dictionary<BrandBreakpoint, BrandGridColumnSpan> {
        { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span12 },
        { BrandBreakpoint.Small, BrandGridColumnSpan.Span6 },
        { BrandBreakpoint.Medium, BrandGridColumnSpan.Span4 },
        { BrandBreakpoint.Large, BrandGridColumnSpan.Span3 },
        { BrandBreakpoint.XLarge, BrandGridColumnSpan.Span2 }
    })" />
</PrimerBrandGrid>

<PrimerBrandGrid HasOverlay="true">
    <PrimerBrandGridColumn SpanMap="@(new() {
        { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span3 }
    })" />
    <PrimerBrandGridColumn SpanMap="@(new() {
            { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span5 }
        })"
                            StartMap="@(new() {
            { BrandBreakpoint.XSmall, BrandGridColumnStart.Start8 }
        })" />
</PrimerBrandGrid>

<PrimerBrandGrid>
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span12 } })">
        <PrimerBrandText>Full width column</PrimerBrandText>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>

<PrimerBrandGrid>
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span6 } })">
        <PrimerBrandBox Background="BrandBoxBackground.Danger">Column 1</PrimerBrandBox>
    </PrimerBrandGridColumn>
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span6 } })">
        <PrimerBrandBox Background="BrandBoxBackground.Danger">Column 2</PrimerBrandBox>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>

<PrimerBrandGrid FullWidth="true" HasOverlay="true">
    <PrimerBrandGridColumn SpanMap="@(new() {
            { BrandBreakpoint.Medium, BrandGridColumnSpan.Span6 }
        })"
                            StartMap="@(new() {
            { BrandBreakpoint.Medium, BrandGridColumnStart.Start4 }
        })">
        <PrimerBrandBox BorderColor="BrandBoxBorderColor.Default" Padding="BrandBoxPadding.Padding16">
            Centered block (md)
        </PrimerBrandBox>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>

<PrimerBrandGrid>
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span4 } })">
        <PrimerBrandText>1/3 Width</PrimerBrandText>
    </PrimerBrandGridColumn>
    <PrimerBrandGridColumn SpanMap="@(new() { { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span8 } })">
        <PrimerBrandText>2/3 Width</PrimerBrandText>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>

<PrimerBrandGrid>
    <PrimerBrandGridColumn SpanMap="@(new() {
        { BrandBreakpoint.XSmall, BrandGridColumnSpan.Span12 }
    })">
        <PrimerBrandText>XSmall: Full Width</PrimerBrandText>
    </PrimerBrandGridColumn>
    <PrimerBrandGridColumn SpanMap="@(new() {
        { BrandBreakpoint.Medium, BrandGridColumnSpan.Span6 }
    })">
        <PrimerBrandText>Medium: Half Width</PrimerBrandText>
    </PrimerBrandGridColumn>
</PrimerBrandGrid>