@page "/components/grid"
<PageLayout Title="Grid 栅格" Description="栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。"
    Anchors="@(new[]{"基本使用","区块间隔","左右偏移","排序","次序","水平对齐","垂直对齐"})">
    <ChildContent>

<Example Title="基本使用">
    <Description>
        每一行由12个单列组成。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
        <TRow>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>            
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
            <TColumn>1</TColumn>
        </TRow>
        <TRow>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
            <TColumn Span="ColumnSpan.Is2">2</TColumn>
        </TRow>
        <TRow>
            <TColumn Span="ColumnSpan.Is3">3</TColumn>
            <TColumn Span="ColumnSpan.Is3">3</TColumn>
            <TColumn Span="ColumnSpan.Is3">3</TColumn>
            <TColumn Span="ColumnSpan.Is3">3</TColumn>
        </TRow>
        <TRow>
            <TColumn Span="ColumnSpan.Is4">4</TColumn>
            <TColumn Span="ColumnSpan.Is4">4</TColumn>
            <TColumn Span="ColumnSpan.Is4">4</TColumn>
        </TRow>
        <TRow>
            <TColumn Span="ColumnSpan.Is6">6</TColumn>
            <TColumn Span="ColumnSpan.Is6">6</TColumn>
        </TRow>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TRow>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>            
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
    <TColumn>1</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">2</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is3"">3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">3</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is4"">4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">4</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is6"">6</TColumn>
    <TColumn Span=""ColumnSpan.Is6"">6</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="区块间隔">
    <Description></Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
        <TRow Gutter="24">
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
            <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
        </TRow>
        
        <TRow Gutter="36">
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
            <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
        </TRow>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TRow Gutter=""24"">
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
</TRow>
        
<TRow Gutter=""36"">
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="左右偏移">
    <Description></Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <TRow>
                <TColumn Span="ColumnSpan.Is4">col-4</TColumn>
                <TColumn Span="ColumnSpan.Is4" Offset="ColumnSpan.Is4">col-4 offset-4</TColumn>
            </TRow>
            <TRow>
                <TColumn Span="ColumnSpan.Is3">col-3</TColumn>
                <TColumn Span="ColumnSpan.Is3" Offset="ColumnSpan.Is3">col-3 offset-3</TColumn>
            </TRow>
            <TRow>
                <TColumn Span="ColumnSpan.Is6" Offset="ColumnSpan.Is3">col-6 offset-3</TColumn>
            </TRow>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TRow>
    <TColumn Span=""ColumnSpan.Is4"">col-4</TColumn>
    <TColumn Span=""ColumnSpan.Is4"" Offset=""ColumnSpan.Is4"">col-4 offset-4</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is3"">col-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"" Offset=""ColumnSpan.Is3"">col-3 offset-3</TColumn>
</TRow>
<TRow>
    <TColumn Span=""ColumnSpan.Is6"" Offset=""ColumnSpan.Is3"">col-6 offset-3</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="排序">
    <Description>
        <code>Push</code> 表示向右边移动的距离，<code>Pull</code> 表示向左边移动的距离。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <TRow>
                <TColumn Push="ColumnSpan.Is6" Span="ColumnSpan.Is5">col-5 push-6</TColumn>
                <TColumn Pull="ColumnSpan.Is4" Span="ColumnSpan.Is3">col-3 pull-4</TColumn>
            </TRow>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TRow>
    <TColumn Push=""ColumnSpan.Is6"" Span=""ColumnSpan.Is5"">col-5 push-6</TColumn>
    <TColumn Pull=""ColumnSpan.Is4"" Span=""ColumnSpan.Is3"">col-3 pull-4</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="次序">
    <Description>
        无论 <code>TColumn</code> 如何排列，都将按照 <code>Order</code> 的顺序依次排序。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <TRow>
                <TColumn Span="ColumnSpan.Is3" Order="ColumnSpan.Is4">col-3 order-4</TColumn>
                <TColumn Span="ColumnSpan.Is3" Order="ColumnSpan.Is2">col-3 order-2</TColumn>
                <TColumn Span="ColumnSpan.Is3" Order="ColumnSpan.Is3">col-3 order-3</TColumn>
                <TColumn Span="ColumnSpan.Is3" Order="ColumnSpan.Is1">col-3 order-1</TColumn>
            </TRow>
            </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TRow>
    <TColumn Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is4"">col-3 order-4</TColumn>
    <TColumn Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is2"">col-3 order-2</TColumn>
    <TColumn Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is3"">col-3 order-3</TColumn>
    <TColumn Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is1"">col-3 order-1</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="水平对齐">
    <Description>
        设置 <code>HorizontalAlignment</code> 水平排版 <code>TRow</code> 的单元格，支持 flex 的 justify-content
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <p>align left</p>
            <TRow>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
            </TRow>
            
            <p>align center</p>
            <TRow HorizontalAlignment="JustifyContent.Center">
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
            </TRow>
            
            <p>align right</p>
            <TRow HorizontalAlignment="JustifyContent.End">
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
            </TRow>
            <p>spance between</p>            
            <TRow HorizontalAlignment="JustifyContent.Between">
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
            </TRow>
            <p>spance around</p>            
            <TRow HorizontalAlignment="JustifyContent.Around">
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
                <TColumn Span="ColumnSpan.Is2">col-2</TColumn>
            </TRow>
        </div>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```cshtml-razor
<p>align left</p>
<TRow>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
</TRow>
            
<p>align center</p>
<TRow HorizontalAlignment=""JustifyContent.Center"">
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
</TRow>
            
<p>align right</p>
<TRow HorizontalAlignment=""JustifyContent.End"">
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
</TRow>
<p>spance between</p>            
<TRow HorizontalAlignment=""JustifyContent.Between"">
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
</TRow>
<p>spance around</p>            
<TRow HorizontalAlignment=""JustifyContent.Around"">
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
    <TColumn Span=""ColumnSpan.Is2"">col-2</TColumn>
</TRow>
```
")
    </CodeContent>
</Example>
<Example Title="垂直对齐">
    <Description>
        设置 <code>VerticalAlignment</code> 垂直对齐 <code>TRow</code> 的单元格
    </Description>
    <RunContent>
        
        <div class="tdesign-demo-item--grid">
            <p>align top</p>
            <TRow>
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>                
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>
            </TRow>
            <p>align middle</p>
            <TRow VerticalAlignment="VerticalAlignment.Middle">
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>                
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>
            </TRow>
            <p>align bottom</p>
            <TRow VerticalAlignment="VerticalAlignment.Bottom">
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>                
                <TColumn Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </TColumn>
                <TColumn Span="ColumnSpan.Is3">
                    col-3
                </TColumn>
            </TRow>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<p>align top</p>
<TRow>
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>                
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>
</TRow>
<p>align middle</p>
<TRow VerticalAlignment=""VerticalAlignment.Middle"">
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>                
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>
</TRow>
<p>align bottom</p>
<TRow VerticalAlignment=""VerticalAlignment.Bottom"">
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>                
    <TColumn Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </TColumn>
    <TColumn Span=""ColumnSpan.Is3"">
        col-3
    </TColumn>
</TRow>
```
")
    </CodeContent>
        </Example>

    </ChildContent>
    <ApiContent>
        <ApiDocument ComponentType="typeof(TRow)"/>
        <ApiDocument ComponentType="typeof(TColumn)"/>
    </ApiContent>
</PageLayout>