mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

docs: replace grid design img (#34771)

Browse Source 
* chore: replace grid design img

* fix: code error
This commit is contained in:
MadCcc 2022-03-29 19:46:16 +08:00 committed by GitHub
parent 0c4281f875
commit ff02a4e265
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/grid/index.en-US.md
View File

@ -11,52 +11,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
## Design concept
<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>
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
</div>
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

47
components/grid/index.zh-CN.md
View File

@ -12,52 +12,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
## 设计理念
<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>
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
</div>
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。