<div class="content__title">
|
<h1>
|
Grid
|
<small>24 Grids System</small>
|
</h1>
|
</div>
|
<div class="text-md bg-white p-lg">
|
<h2 class="mb-md">Design concept</h2>
|
<div class="grid-demo">
|
<div class="ant-row demo-row">
|
<div class="ant-col-24 demo-col demo-col-1">
|
100%
|
</div>
|
</div>
|
<div class="ant-row demo-row">
|
<div class="ant-col-6 demo-col demo-col-2">
|
25%
|
</div>
|
<div class="ant-col-6 demo-col demo-col-3">
|
25%
|
</div>
|
<div class="ant-col-6 demo-col demo-col-2">
|
25%
|
</div>
|
<div class="ant-col-6 demo-col demo-col-3">
|
25%
|
</div>
|
</div>
|
<div class="ant-row demo-row">
|
<div class="ant-col-8 demo-col demo-col-4">
|
33.33%
|
</div>
|
<div class="ant-col-8 demo-col demo-col-5">
|
33.33%
|
</div>
|
<div class="ant-col-8 demo-col demo-col-4">
|
33.33%
|
</div>
|
</div>
|
<div class="ant-row demo-row">
|
<div class="ant-col-12 demo-col demo-col-1">
|
50%
|
</div>
|
<div class="ant-col-12 demo-col demo-col-3">
|
50%
|
</div>
|
</div>
|
<div class="ant-row demo-row">
|
<div class="ant-col-16 demo-col demo-col-4">
|
66.66%
|
</div>
|
<div class="ant-col-8 demo-col demo-col-5">
|
33.33%
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">In most business situations,Ant Design need solve a lot of information storage problems within the design area,so based
|
on 12 Grids System,we divided the design area into 24 aliquots.</p>
|
<p class="mt-md">We name the divided area as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the
|
proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom typography
|
inside of the box based on the box unit.</p>
|
<h2 class="mt-md">Outline</h2>
|
<p class="mt-md">In the grid system, we define the frame outside the information area based on row and column, to ensure that every area
|
can steady arrangement.</p>
|
<p class="mt-md">Following is a brief look at how it works:</p>
|
<ul class="list-styled mt-md">
|
<li>
|
To establish a set of <code>column</code> in the horizontal direction by <code>row</code> (abbreviated col)
|
</li>
|
<li>
|
Direct your content elements should be placed in the <code>col</code>, and only <code>col</code> as the <code>row</code>
|
</li>
|
<li>
|
The column grid system is a value of 1-24 to represent its range spans.For example, three columns of equal width can be created
|
by <code>.col-8</code>.
|
</li>
|
<li>
|
If a <code>row</code> sum of <code>col</code> more than 24, then the extra <code>col</code> as a whole will start
|
a new line arrangement.
|
</li>
|
</ul>
|
<h2 class="mt-md">Flex layout</h2>
|
<p class="mt-md">Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center,
|
right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support
|
the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of
|
elements by using 'order'.</p>
|
<p class="mt-md">Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.</p>
|
<h2 class="mt-md">Examples</h2>
|
<h3 class="mt-md">Base Grid</h3>
|
<div class="mt-md" id="components-grid-demo-basic">
|
<div class="code-box-demo">
|
<div nz-row>
|
<div nz-col [nzSpan]="12">
|
col-12
|
</div>
|
<div nz-col [nzSpan]="12">
|
col-12
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="8">
|
col-8
|
</div>
|
<div nz-col [nzSpan]="8">
|
col-8
|
</div>
|
<div nz-col [nzSpan]="8">
|
col-8
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="6">
|
col-6
|
</div>
|
<div nz-col [nzSpan]="6">
|
col-6
|
</div>
|
<div nz-col [nzSpan]="6">
|
col-6
|
</div>
|
<div nz-col [nzSpan]="6">
|
col-6
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">From the stack to the horizontal arrangement.</p>
|
<p class="mt-md">
|
You can create a basic grid system by using a single set of <code>Row</code> and <code>Col</code> grid assembly,
|
all of the columns (Col) must be placed in <code>Row</code>.
|
</p>
|
<h3 class="mt-md">Grid Gutter</h3>
|
<div class="mt-md" id="components-grid-demo-gutter">
|
<div class="code-box-demo">
|
<div nz-row [nzGutter]="8">
|
<div nz-col class="gutter-row" [nzSpan]="6">
|
<div class="gutter-box">col-6</div>
|
</div>
|
<div nz-col class="gutter-row" [nzSpan]="6">
|
<div class="gutter-box">col-6</div>
|
</div>
|
<div nz-col class="gutter-row" [nzSpan]="6">
|
<div class="gutter-box">col-6</div>
|
</div>
|
<div nz-col class="gutter-row" [nzSpan]="6">
|
<div class="gutter-box">col-6</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">
|
You can use the <code>gutter</code> property of <code>Row</code> as grid spacing, we recommend set it to <code>(16 + 8n) px</code>.
|
(
|
<code>n</code> stands for natural number.)</p>
|
<h3 class="mt-md">Column offset</h3>
|
<div class="mt-md" id="components-grid-demo-offset">
|
<div class="code-box-demo">
|
<div nz-row>
|
<div nz-col [nzSpan]="8">
|
col-8
|
</div>
|
<div nz-col [nzSpan]="8" [nzOffset]="8">
|
col-8
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="6" [nzOffset]="6">
|
col-6 col-offset-6
|
</div>
|
<div nz-col [nzSpan]="6" [nzOffset]="6">
|
col-6 col-offset-6
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="12" [nzOffset]="6">
|
col-12 col-offset-6
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md"><code>Offset</code> can set the column to the right side. For example, using <code>[nzOffset]="'4'"</code> can set the
|
element shifted to the right four columns width.</p>
|
<h3 class="mt-md">Grid sort</h3>
|
<div class="mt-md" id="components-grid-demo-offset">
|
<div class="code-box-demo">
|
<div nz-row>
|
<div nz-col [nzSpan]="18" [nzPush]="6">
|
col-18 col-push-6
|
</div>
|
<div nz-col [nzSpan]="6" [nzPull]="18">
|
col-6 col-pull-18
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">
|
By using <code>push</code> and <code>pull</code> class you can easily change column order.
|
</p>
|
<h3 class="mt-md">Flex Layout</h3>
|
<div class="mt-md" id="components-grid-demo-flex">
|
<div class="code-box-demo">
|
<p>sub-element align left</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'start'">
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
</div>
|
<p>sub-element align center</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'">
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
</div>
|
<p>sub-element align right</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'end'">
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
</div>
|
<p>sub-element monospaced arrangement</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'space-between'">
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
</div>
|
<p>sub-element align full</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'space-around'">
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
<div nz-col [nzSpan]="4">
|
col-4
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">
|
Use <code>row-flex</code> define <code>flex</code> layout, its child elements depending on the value of the <code>start</code>,<code>center</code>,<code>end</code>,<code>space-between</code>,<code>space-around</code>,
|
which are defined in its parent node layout mode.
|
</p>
|
<h3 class="mt-md">Flex Alignment</h3>
|
<div class="mt-md" id="components-grid-demo-flex-align">
|
<div class="code-box-demo">
|
<p>Align Top</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'top'">
|
<div nz-col [nzSpan]="4">
|
<p class="height-100">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-50">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-120">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-80">col-4</p>
|
</div>
|
</div>
|
<p>Align Center</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
|
<div nz-col [nzSpan]="4">
|
<p class="height-100">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-50">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-120">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-80">col-4</p>
|
</div>
|
</div>
|
<p>Align Bottom</p>
|
<div nz-row [nzType]="'flex'" [nzJustify]="'space-between'" [nzAlign]="'bottom'">
|
<div nz-col [nzSpan]="4">
|
<p class="height-100">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-50">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-120">col-4</p>
|
</div>
|
<div nz-col [nzSpan]="4">
|
<p class="height-80">col-4</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">Flex child elements vertically aligned.</p>
|
<h3 class="mt-md">Flex Order</h3>
|
<div class="mt-md" id="components-grid-demo-flex-order">
|
<div class="code-box-demo">
|
<div nz-row [nzType]="'flex'">
|
<div nz-col [nzSpan]="6" [nzOrder]="order" *ngFor="let order of orderList;index as i">
|
{{i + 1}} col-order-{{order}}
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">To change the element sort by Flex layout order.</p>
|
<h3 class="mt-md">Responsive</h3>
|
<div class="mt-md" id="components-grid-demo-responsive">
|
<div class="code-box-demo">
|
<div nz-row>
|
<div nz-col [nzXs]="2" [nzSm]="4" [nzMd]="6" [nzLg]="8" [nzXl]="10">
|
Col
|
</div>
|
<div nz-col [nzXs]="20" [nzSm]="16" [nzMd]="12" [nzLg]="8" [nzXl]="4">
|
Col
|
</div>
|
<div nz-col [nzXs]="2" [nzSm]="4" [nzMd]="6" [nzLg]="8" [nzXl]="10">
|
Col
|
</div>
|
</div>
|
</div>
|
</div>
|
<p class="mt-md">
|
Referring to the Bootstrap <a href="//getbootstrap.com/css/#grid-media-queries" target="_blank">responsive design</a>,
|
here preset five dimensions: <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code>.
|
</p>
|
<h3 class="mt-md">Playground</h3>
|
<div class="mt-md" id="components-grid-demo-responsive">
|
<div class="code-box-demo">
|
<div style="margin-bottom:16px;">
|
<span style="margin-right: 6px;">Gutter (px): </span>
|
<div style="width: 50%">
|
<nz-slider [nzMarks]="marksGutter" [nzStep]="null" [nzDefaultValue]="16" [nzMax]="48" [(ngModel)]="gutter" (nzOnAfterChange)="generateCode()"></nz-slider>
|
</div>
|
<span style="margin-right: 6px;">Column Count:</span>
|
<div style="width: 50%">
|
<nz-slider [nzMarks]="marksCount" [nzStep]="null" [nzDefaultValue]="4" [nzMax]="12" [(ngModel)]="count" (nzOnAfterChange)="generateCode()"></nz-slider>
|
</div>
|
</div>
|
<div class="gutter-example">
|
<div nz-row [nzGutter]="gutter">
|
<div nz-col class="gutter-row" [nzSpan]="24/count" *ngFor="let i of generateArray(count)">
|
<div class="grid-config">Column</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<pre class="mt-md"><code>{{code}}</code></pre>
|
</div>
|
