home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-13 23:07:49 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
e514bde0677133a8fa65eeb8060761a74fbceced
ant-design/components/grid/index.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

420 lines
172 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-31540036"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n Solution<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="93"><a href="/components/grid/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="Basic Grid" data-reactid="301"><a href="#components-grid-demo-basic" data-reactid="302">Basic Grid</a></li><li title="Grid Gutter" data-reactid="303"><a href="#components-grid-demo-gutter" data-reactid="304">Grid Gutter</a></li><li title="Column offset" data-reactid="305"><a href="#components-grid-demo-offset" data-reactid="306">Column offset</a></li><li title="Grid sort" data-reactid="307"><a href="#components-grid-demo-sort" data-reactid="308">Grid sort</a></li><li title="Flex Layout" data-reactid="309"><a href="#components-grid-demo-flex" data-reactid="310">Flex Layout</a></li><li title="Flex Alignment" data-reactid="311"><a href="#components-grid-demo-flex-align" data-reactid="312">Flex Alignment</a></li><li title="Flex Order" data-reactid="313"><a href="#components-grid-demo-flex-order" data-reactid="314">Flex Order</a></li><li title="Responsive" data-reactid="315"><a href="#components-grid-demo-reponsive" data-reactid="316">Responsive</a></li><li title="More responsive" data-reactid="317"><a href="#components-grid-demo-reponsive-more" data-reactid="318">More responsive</a></li><li title="Playground" data-reactid="319"><a href="#components-grid-demo-playground" data-reactid="320">Playground</a></li></ul></div></div><section class="markdown" data-reactid="321"><h1 data-reactid="322"><!-- react-text: 323 -->Grid<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/index.en-US.md" data-reactid="324"><i class="anticon anticon-edit" data-reactid="325"></i></a></h1><section class="markdown" data-reactid="326"><p data-reactid="327"><!-- react-text: 328 -->24 Grids System。<!-- /react-text --></p><h2 id="Design-concept" data-reactid="329"><span data-reactid="330"><!-- react-text: 331 -->Design concept<!-- /react-text --></span><a href="#Design-concept" class="anchor" data-reactid="332">#</a></h2><div class="grid-demo" data-reactid="333"><div class="ant-row demo-row" data-reactid="334"><div class="ant-col-24 demo-col demo-col-1" data-reactid="335"><!-- react-text: 336 -->
100%
<!-- /react-text --></div></div><div class="ant-row demo-row" data-reactid="337"><div class="ant-col-6 demo-col demo-col-2" data-reactid="338"><!-- react-text: 339 -->
25%
<!-- /react-text --></div><div class="ant-col-6 demo-col demo-col-3" data-reactid="340"><!-- react-text: 341 -->
25%
<!-- /react-text --></div><div class="ant-col-6 demo-col demo-col-2" data-reactid="342"><!-- react-text: 343 -->
25%
<!-- /react-text --></div><div class="ant-col-6 demo-col demo-col-3" data-reactid="344"><!-- react-text: 345 -->
25%
<!-- /react-text --></div></div><div class="ant-row demo-row" data-reactid="346"><div class="ant-col-8 demo-col demo-col-4" data-reactid="347"><!-- react-text: 348 -->
33.33%
<!-- /react-text --></div><div class="ant-col-8 demo-col demo-col-5" data-reactid="349"><!-- react-text: 350 -->
33.33%
<!-- /react-text --></div><div class="ant-col-8 demo-col demo-col-4" data-reactid="351"><!-- react-text: 352 -->
33.33%
<!-- /react-text --></div></div><div class="ant-row demo-row" data-reactid="353"><div class="ant-col-12 demo-col demo-col-1" data-reactid="354"><!-- react-text: 355 -->
50%
<!-- /react-text --></div><div class="ant-col-12 demo-col demo-col-3" data-reactid="356"><!-- react-text: 357 -->
50%
<!-- /react-text --></div></div><div class="ant-row demo-row" data-reactid="358"><div class="ant-col-16 demo-col demo-col-4" data-reactid="359"><!-- react-text: 360 -->
66.66%
<!-- /react-text --></div><div class="ant-col-8 demo-col demo-col-5" data-reactid="361"><!-- react-text: 362 -->
33.33%
<!-- /react-text --></div></div></div><p data-reactid="363"><!-- react-text: 364 -->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.<!-- /react-text --></p><p data-reactid="365"><!-- react-text: 366 -->We name the divided area as &#x27;box&#x27;.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.<!-- /react-text --></p><h2 id="Outline" data-reactid="367"><span data-reactid="368"><!-- react-text: 369 -->Outline<!-- /react-text --></span><a href="#Outline" class="anchor" data-reactid="370">#</a></h2><p data-reactid="371"><!-- react-text: 372 -->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.<!-- /react-text --></p><p data-reactid="373"><!-- react-text: 374 -->Following is a brief look at how it works:<!-- /react-text --></p><ul data-reactid="375"><li data-reactid="376"><p data-reactid="377"><!-- react-text: 378 -->To establish a set of <!-- /react-text --><code data-reactid="379"><!-- react-text: 380 -->column<!-- /react-text --></code><!-- react-text: 381 --> in the horizontal direction by<!-- /react-text --><code data-reactid="382"><!-- react-text: 383 -->row<!-- /react-text --></code><!-- react-text: 384 --> (abbreviated col)<!-- /react-text --></p></li><li data-reactid="385"><p data-reactid="386"><!-- react-text: 387 -->Direct your content elements should be placed in the <!-- /react-text --><code data-reactid="388"><!-- react-text: 389 -->col<!-- /react-text --></code><!-- react-text: 390 -->, and only<!-- /react-text --><code data-reactid="391"><!-- react-text: 392 -->col<!-- /react-text --></code><!-- react-text: 393 --> as the <!-- /react-text --><code data-reactid="394"><!-- react-text: 395 -->row<!-- /react-text --></code></p></li><li data-reactid="396"><p data-reactid="397"><!-- react-text: 398 -->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 <!-- /react-text --><code data-reactid="399"><!-- react-text: 400 -->.col-8<!-- /react-text --></code><!-- react-text: 401 -->.<!-- /react-text --></p></li><li data-reactid="402"><p data-reactid="403"><!-- react-text: 404 -->If a <!-- /react-text --><code data-reactid="405"><!-- react-text: 406 -->row<!-- /react-text --></code><!-- react-text: 407 --> sum of<!-- /react-text --><code data-reactid="408"><!-- react-text: 409 -->col<!-- /react-text --></code><!-- react-text: 410 --> more than 24, then the extra <!-- /react-text --><code data-reactid="411"><!-- react-text: 412 -->col<!-- /react-text --></code><!-- react-text: 413 --> as a whole will start a new line arrangement.<!-- /react-text --></p></li></ul><h2 id="Flex-layout" data-reactid="414"><span data-reactid="415"><!-- react-text: 416 -->Flex layout<!-- /react-text --></span><a href="#Flex-layout" class="anchor" data-reactid="417">#</a></h2><p data-reactid="418"><!-- react-text: 419 -->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 &#x27;order&#x27;.<!-- /react-text --></p><p data-reactid="420"><!-- react-text: 421 -->Flex layout is based on a grid 24 to define each &quot;box&quot; in width, but not rigidly adhere to the grid layout.<!-- /react-text --></p></section><h2 data-reactid="422"><span data-reactid="423">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="424"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="425"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="426"><section class="code-box" id="components-grid-demo-basic" data-reactid="427"><section class="code-box-demo" data-reactid="428"><div data-reactid="429"><div class="ant-row" data-reactid="430"><div class="ant-col-12" data-reactid="431">col-12</div><div class="ant-col-12" data-reactid="432">col-12</div></div><div class="ant-row" data-reactid="433"><div class="ant-col-8" data-reactid="434">col-8</div><div class="ant-col-8" data-reactid="435">col-8</div><div class="ant-col-8" data-reactid="436">col-8</div></div><div class="ant-row" data-reactid="437"><div class="ant-col-6" data-reactid="438">col-6</div><div class="ant-col-6" data-reactid="439">col-6</div><div class="ant-col-6" data-reactid="440">col-6</div><div class="ant-col-6" data-reactid="441">col-6</div></div></div></section><section class="code-box-meta markdown" data-reactid="442"><div class="code-box-title" data-reactid="443"><a href="#components-grid-demo-basic" data-reactid="444">Basic Grid</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/basic.md" data-reactid="445"><i class="anticon anticon-edit" data-reactid="446"></i></a></div><div data-reactid="447"><p data-reactid="448"><!-- react-text: 449 -->From the stack to the horizontal arrangement.<!-- /react-text --></p><p data-reactid="450"><!-- react-text: 451 -->You can create a basic grid system by using a single set of <!-- /react-text --><code data-reactid="452"><!-- react-text: 453 -->Row<!-- /react-text --></code><!-- react-text: 454 --> and<!-- /react-text --><code data-reactid="455"><!-- react-text: 456 -->Col<!-- /react-text --></code><!-- react-text: 457 --> grid assembly, all of the columns (Col) must be placed in <!-- /react-text --><code data-reactid="458"><!-- react-text: 459 -->Row<!-- /react-text --></code><!-- react-text: 460 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="461"></i></section><section class="highlight-wrapper" data-reactid="462"><div class="highlight" data-reactid="463"><i class="anticon anticon-copy code-box-code-copy" data-reactid="464"></i><pre class="language-jsx" data-reactid="465"><code data-reactid="466"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-12</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-12</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-8</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-8</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-8</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-gutter" data-reactid="467"><section class="code-box-demo" data-reactid="468"><div class="gutter-example" data-reactid="469"><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="470"><div style="padding-left:8px;padding-right:8px;" class="ant-col-6 gutter-row" data-reactid="471"><div class="gutter-box" data-reactid="472">col-6</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6 gutter-row" data-reactid="473"><div class="gutter-box" data-reactid="474">col-6</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6 gutter-row" data-reactid="475"><div class="gutter-box" data-reactid="476">col-6</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6 gutter-row" data-reactid="477"><div class="gutter-box" data-reactid="478">col-6</div></div></div></div><style data-reactid="479">.gutter-example .ant-row > div {
background: transparent;
border: 0;
}
.gutter-box {
background: #00A0E9;
padding: 5px 0;
}</style></section><section class="code-box-meta markdown" data-reactid="480"><div class="code-box-title" data-reactid="481"><a href="#components-grid-demo-gutter" data-reactid="482">Grid Gutter</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/gutter.md" data-reactid="483"><i class="anticon anticon-edit" data-reactid="484"></i></a></div><div data-reactid="485"><p data-reactid="486"><!-- react-text: 487 -->You can use the <!-- /react-text --><code data-reactid="488"><!-- react-text: 489 -->gutter<!-- /react-text --></code><!-- react-text: 490 --> property of <!-- /react-text --><code data-reactid="491"><!-- react-text: 492 -->Row<!-- /react-text --></code><!-- react-text: 493 --> as grid spacing, we recommend set it to <!-- /react-text --><code data-reactid="494"><!-- react-text: 495 -->(16 + 8n) px<!-- /react-text --></code><!-- react-text: 496 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="497"></i></section><section class="highlight-wrapper" data-reactid="498"><div class="highlight" data-reactid="499"><i class="anticon anticon-copy code-box-code-copy" data-reactid="500"></i><pre class="language-jsx" data-reactid="501"><code data-reactid="502"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">gutter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-row<span class="token punctuation">"</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-row<span class="token punctuation">"</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-row<span class="token punctuation">"</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-row<span class="token punctuation">"</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gutter-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="503"><pre data-reactid="504"><code class="css" data-reactid="505"><span class="token selector"><span class="token class">.gutter-example</span> <span class="token class">.ant-row</span> > div </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.gutter-box</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#00A0E9</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-offset" data-reactid="506"><section class="code-box-demo" data-reactid="507"><div data-reactid="508"><div class="ant-row" data-reactid="509"><div class="ant-col-8" data-reactid="510">col-8</div><div class="ant-col-8 ant-col-offset-8" data-reactid="511">col-8</div></div><div class="ant-row" data-reactid="512"><div class="ant-col-6 ant-col-offset-6" data-reactid="513">col-6 col-offset-6</div><div class="ant-col-6 ant-col-offset-6" data-reactid="514">col-6 col-offset-6</div></div><div class="ant-row" data-reactid="515"><div class="ant-col-12 ant-col-offset-6" data-reactid="516">col-12 col-offset-6</div></div></div></section><section class="code-box-meta markdown" data-reactid="517"><div class="code-box-title" data-reactid="518"><a href="#components-grid-demo-offset" data-reactid="519">Column offset</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/offset.md" data-reactid="520"><i class="anticon anticon-edit" data-reactid="521"></i></a></div><div data-reactid="522"><p data-reactid="523"><code data-reactid="524"><!-- react-text: 525 -->Offset<!-- /react-text --></code><!-- react-text: 526 --> can set the column to the right side. For example, using <!-- /react-text --><code data-reactid="527"><!-- react-text: 528 -->offset = {4}<!-- /react-text --></code><!-- react-text: 529 --> can set the element shifted to the right four columns width.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="530"></i></section><section class="highlight-wrapper" data-reactid="531"><div class="highlight" data-reactid="532"><i class="anticon anticon-copy code-box-code-copy" data-reactid="533"></i><pre class="language-jsx" data-reactid="534"><code data-reactid="535"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-8</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-8</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span> col<span class="token operator">-</span>offset<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span> col<span class="token operator">-</span>offset<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-12</span> col<span class="token operator">-</span>offset<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-sort" data-reactid="536"><section class="code-box-demo" data-reactid="537"><div data-reactid="538"><div class="ant-row" data-reactid="539"><div class="ant-col-18 ant-col-push-6" data-reactid="540">col-18 col-push-6</div><div class="ant-col-6 ant-col-pull-18" data-reactid="541">col-6 col-pull-18</div></div></div></section><section class="code-box-meta markdown" data-reactid="542"><div class="code-box-title" data-reactid="543"><a href="#components-grid-demo-sort" data-reactid="544">Grid sort</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/sort.md" data-reactid="545"><i class="anticon anticon-edit" data-reactid="546"></i></a></div><div data-reactid="547"><p data-reactid="548"><!-- react-text: 549 -->By using <!-- /react-text --><code data-reactid="550"><!-- react-text: 551 -->push<!-- /react-text --></code><!-- react-text: 552 --> and<!-- /react-text --><code data-reactid="553"><!-- react-text: 554 -->pull<!-- /react-text --></code><!-- react-text: 555 --> class you can easily change column order.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="556"></i></section><section class="highlight-wrapper" data-reactid="557"><div class="highlight" data-reactid="558"><i class="anticon anticon-copy code-box-code-copy" data-reactid="559"></i><pre class="language-jsx" data-reactid="560"><code data-reactid="561"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">18</span><span class="token punctuation">}</span></span> <span class="token attr-name">push</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-18</span> col<span class="token operator">-</span>push<span class="token number">-6</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">pull</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">18</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-6</span> col<span class="token operator">-</span>pull<span class="token number">-18</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-flex" data-reactid="562"><section class="code-box-demo" data-reactid="563"><div data-reactid="564"><p data-reactid="565">sub-element align left</p><div class="ant-row-flex ant-row-flex-start" data-reactid="566"><div class="ant-col-4" data-reactid="567">col-4</div><div class="ant-col-4" data-reactid="568">col-4</div><div class="ant-col-4" data-reactid="569">col-4</div><div class="ant-col-4" data-reactid="570">col-4</div></div><p data-reactid="571">sub-element align center</p><div class="ant-row-flex ant-row-flex-center" data-reactid="572"><div class="ant-col-4" data-reactid="573">col-4</div><div class="ant-col-4" data-reactid="574">col-4</div><div class="ant-col-4" data-reactid="575">col-4</div><div class="ant-col-4" data-reactid="576">col-4</div></div><p data-reactid="577">sub-element align right</p><div class="ant-row-flex ant-row-flex-end" data-reactid="578"><div class="ant-col-4" data-reactid="579">col-4</div><div class="ant-col-4" data-reactid="580">col-4</div><div class="ant-col-4" data-reactid="581">col-4</div><div class="ant-col-4" data-reactid="582">col-4</div></div><p data-reactid="583">sub-element monospaced arrangement</p><div class="ant-row-flex ant-row-flex-space-between" data-reactid="584"><div class="ant-col-4" data-reactid="585">col-4</div><div class="ant-col-4" data-reactid="586">col-4</div><div class="ant-col-4" data-reactid="587">col-4</div><div class="ant-col-4" data-reactid="588">col-4</div></div><p data-reactid="589">sub-element align full</p><div class="ant-row-flex ant-row-flex-space-around" data-reactid="590"><div class="ant-col-4" data-reactid="591">col-4</div><div class="ant-col-4" data-reactid="592">col-4</div><div class="ant-col-4" data-reactid="593">col-4</div><div class="ant-col-4" data-reactid="594">col-4</div></div></div></section><section class="code-box-meta markdown" data-reactid="595"><div class="code-box-title" data-reactid="596"><a href="#components-grid-demo-flex" data-reactid="597">Flex Layout</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/flex.md" data-reactid="598"><i class="anticon anticon-edit" data-reactid="599"></i></a></div><div data-reactid="600"><p data-reactid="601"><!-- react-text: 602 -->Use <!-- /react-text --><code data-reactid="603"><!-- react-text: 604 -->row-flex<!-- /react-text --></code><!-- react-text: 605 --> define<!-- /react-text --><code data-reactid="606"><!-- react-text: 607 -->flex<!-- /react-text --></code><!-- react-text: 608 --> layout, its child elements depending on the value of the <!-- /react-text --><code data-reactid="609"><!-- react-text: 610 -->start<!-- /react-text --></code><!-- react-text: 611 -->,<!-- /react-text --><code data-reactid="612"><!-- react-text: 613 -->center<!-- /react-text --></code><!-- react-text: 614 -->, <!-- /react-text --><code data-reactid="615"><!-- react-text: 616 -->end<!-- /react-text --></code><!-- react-text: 617 -->,<!-- /react-text --><code data-reactid="618"><!-- react-text: 619 -->space-between<!-- /react-text --></code><!-- react-text: 620 -->, <!-- /react-text --><code data-reactid="621"><!-- react-text: 622 -->space-around<!-- /react-text --></code><!-- react-text: 623 -->, which are defined in its parent node layout mode.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="624"></i></section><section class="highlight-wrapper" data-reactid="625"><div class="highlight" data-reactid="626"><i class="anticon anticon-copy code-box-code-copy" data-reactid="627"></i><pre class="language-jsx" data-reactid="628"><code data-reactid="629"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>sub<span class="token operator">-</span>element align left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>sub<span class="token operator">-</span>element align center<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>sub<span class="token operator">-</span>element align right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>sub<span class="token operator">-</span>element monospaced arrangement<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>sub<span class="token operator">-</span>element align full<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>space-around<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-flex-align" data-reactid="630"><section class="code-box-demo" data-reactid="631"><div data-reactid="632"><p data-reactid="633">Align Top</p><div class="ant-row-flex ant-row-flex-center ant-row-flex-top" data-reactid="634"><div class="ant-col-4" data-reactid="635"><p class="height-100" data-reactid="636">col-4</p></div><div class="ant-col-4" data-reactid="637"><p class="height-50" data-reactid="638">col-4</p></div><div class="ant-col-4" data-reactid="639"><p class="height-120" data-reactid="640">col-4</p></div><div class="ant-col-4" data-reactid="641"><p class="height-80" data-reactid="642">col-4</p></div></div><p data-reactid="643">Align Center</p><div class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle" data-reactid="644"><div class="ant-col-4" data-reactid="645"><p class="height-100" data-reactid="646">col-4</p></div><div class="ant-col-4" data-reactid="647"><p class="height-50" data-reactid="648">col-4</p></div><div class="ant-col-4" data-reactid="649"><p class="height-120" data-reactid="650">col-4</p></div><div class="ant-col-4" data-reactid="651"><p class="height-80" data-reactid="652">col-4</p></div></div><p data-reactid="653">Align Bottom</p><div class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom" data-reactid="654"><div class="ant-col-4" data-reactid="655"><p class="height-100" data-reactid="656">col-4</p></div><div class="ant-col-4" data-reactid="657"><p class="height-50" data-reactid="658">col-4</p></div><div class="ant-col-4" data-reactid="659"><p class="height-120" data-reactid="660">col-4</p></div><div class="ant-col-4" data-reactid="661"><p class="height-80" data-reactid="662">col-4</p></div></div></div></section><section class="code-box-meta markdown" data-reactid="663"><div class="code-box-title" data-reactid="664"><a href="#components-grid-demo-flex-align" data-reactid="665">Flex Alignment</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/flex-align.md" data-reactid="666"><i class="anticon anticon-edit" data-reactid="667"></i></a></div><div data-reactid="668"><p data-reactid="669"><!-- react-text: 670 -->Flex child elements vertically aligned.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="671"></i></section><section class="highlight-wrapper" data-reactid="672"><div class="highlight" data-reactid="673"><i class="anticon anticon-copy code-box-code-copy" data-reactid="674"></i><pre class="language-jsx" data-reactid="675"><code data-reactid="676"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> DemoBox <span class="token operator">=</span> props <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`height-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Align Top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">120</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Align Center<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>space-around<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">120</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Align Bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">120</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DemoBox</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>col<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DemoBox</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-flex-order" data-reactid="677"><section class="code-box-demo" data-reactid="678"><div data-reactid="679"><div class="ant-row-flex" data-reactid="680"><div class="ant-col-6 ant-col-order-4" data-reactid="681">1 col-order-4</div><div class="ant-col-6 ant-col-order-3" data-reactid="682">2 col-order-3</div><div class="ant-col-6 ant-col-order-2" data-reactid="683">3 col-order-2</div><div class="ant-col-6 ant-col-order-1" data-reactid="684">4 col-order-1</div></div></div></section><section class="code-box-meta markdown" data-reactid="685"><div class="code-box-title" data-reactid="686"><a href="#components-grid-demo-flex-order" data-reactid="687">Flex Order</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/flex-order.md" data-reactid="688"><i class="anticon anticon-edit" data-reactid="689"></i></a></div><div data-reactid="690"><p data-reactid="691"><!-- react-text: 692 -->To change the element sort by Flex layout order.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="693"></i></section><section class="highlight-wrapper" data-reactid="694"><div class="highlight" data-reactid="695"><i class="anticon anticon-copy code-box-code-copy" data-reactid="696"></i><pre class="language-jsx" data-reactid="697"><code data-reactid="698"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">order</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token number">1</span> col<span class="token operator">-</span>order<span class="token number">-4</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">order</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token number">2</span> col<span class="token operator">-</span>order<span class="token number">-3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">order</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token number">3</span> col<span class="token operator">-</span>order<span class="token number">-2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">order</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token number">4</span> col<span class="token operator">-</span>order<span class="token number">-1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
mountNode
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-reponsive" data-reactid="699"><section class="code-box-demo" data-reactid="700"><div class="ant-row" data-reactid="701"><div class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10" data-reactid="702">Col</div><div class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4" data-reactid="703">Col</div><div class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10" data-reactid="704">Col</div></div></section><section class="code-box-meta markdown" data-reactid="705"><div class="code-box-title" data-reactid="706"><a href="#components-grid-demo-reponsive" data-reactid="707">Responsive</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/reponsive.md" data-reactid="708"><i class="anticon anticon-edit" data-reactid="709"></i></a></div><div data-reactid="710"><p data-reactid="711"><!-- react-text: 712 -->Referring to the Bootstrap <!-- /react-text --><!-- react-text: 713 -->[responsive design]<!-- /react-text --><!-- react-text: 714 --> (<!-- /react-text --><a href="http://getbootstrap.com/css/#grid-media-queries" data-reactid="715"><!-- react-text: 716 -->http://getbootstrap.com/css/#grid-media-queries<!-- /react-text --></a><!-- react-text: 717 -->), here preset five dimensions: <!-- /react-text --><code data-reactid="718"><!-- react-text: 719 -->xs<!-- /react-text --></code><!-- react-text: 720 --> <!-- /react-text --><code data-reactid="721"><!-- react-text: 722 -->sm<!-- /react-text --></code><!-- react-text: 723 --> <!-- /react-text --><code data-reactid="724"><!-- react-text: 725 -->md<!-- /react-text --></code><!-- react-text: 726 --> <!-- /react-text --><code data-reactid="727"><!-- react-text: 728 -->lg<!-- /react-text --></code><!-- react-text: 729 --> <!-- /react-text --><code data-reactid="730"><!-- react-text: 731 -->xl<!-- /react-text --></code><!-- react-text: 732 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="733"></i></section><section class="highlight-wrapper" data-reactid="734"><div class="highlight" data-reactid="735"><i class="anticon anticon-copy code-box-code-copy" data-reactid="736"></i><pre class="language-jsx" data-reactid="737"><code data-reactid="738"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token attr-name">sm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">md</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">xl</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span></span> <span class="token attr-name">sm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">16</span><span class="token punctuation">}</span></span> <span class="token attr-name">md</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">xl</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token attr-name">sm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">md</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">xl</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-reponsive-more" data-reactid="739"><section class="code-box-demo" data-reactid="740"><div class="ant-row" data-reactid="741"><div class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2" data-reactid="742">Col</div><div class="ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2" data-reactid="743">Col</div><div class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2" data-reactid="744">Col</div></div></section><section class="code-box-meta markdown" data-reactid="745"><div class="code-box-title" data-reactid="746"><a href="#components-grid-demo-reponsive-more" data-reactid="747">More responsive</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/reponsive-more.md" data-reactid="748"><i class="anticon anticon-edit" data-reactid="749"></i></a></div><div data-reactid="750"><p data-reactid="751"><code data-reactid="752"><!-- react-text: 753 -->Span<!-- /react-text --></code><!-- react-text: 754 --> <!-- /react-text --><code data-reactid="755"><!-- react-text: 756 -->pull<!-- /react-text --></code><!-- react-text: 757 --> <!-- /react-text --><code data-reactid="758"><!-- react-text: 759 -->push<!-- /react-text --></code><!-- react-text: 760 --> <!-- /react-text --><code data-reactid="761"><!-- react-text: 762 -->offset<!-- /react-text --></code><!-- react-text: 763 --> <!-- /react-text --><code data-reactid="764"><!-- react-text: 765 -->order<!-- /react-text --></code><!-- react-text: 766 --> property can be embedded into <!-- /react-text --><code data-reactid="767"><!-- react-text: 768 -->xs<!-- /react-text --></code><!-- react-text: 769 --> <!-- /react-text --><code data-reactid="770"><!-- react-text: 771 -->sm<!-- /react-text --></code><!-- react-text: 772 --> <!-- /react-text --><code data-reactid="773"><!-- react-text: 774 -->md<!-- /react-text --></code><!-- react-text: 775 --> <!-- /react-text --><code data-reactid="776"><!-- react-text: 777 -->lg<!-- /react-text --></code><!-- react-text: 778 --> <!-- /react-text --><code data-reactid="779"><!-- react-text: 780 -->xl<!-- /react-text --></code><!-- react-text: 781 --> properties to use,
where <!-- /react-text --><code data-reactid="782"><!-- react-text: 783 -->xs = {6}<!-- /react-text --></code><!-- react-text: 784 --> is equivalent to <!-- /react-text --><code data-reactid="785"><!-- react-text: 786 -->xs = {{span: 6}}<!-- /react-text --></code><!-- react-text: 787 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="788"></i></section><section class="highlight-wrapper" data-reactid="789"><div class="highlight" data-reactid="790"><i class="anticon anticon-copy code-box-code-copy" data-reactid="791"></i><pre class="language-jsx" data-reactid="792"><code data-reactid="793"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">xs</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">lg</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-grid-demo-playground" data-reactid="794"><section class="code-box-demo" data-reactid="795"><div data-reactid="796"><div style="margin-bottom:16px;" data-reactid="797"><span style="margin-right:6px;" data-reactid="798">Gutter (px): </span><div style="width:50%;" data-reactid="799"><div class="ant-slider ant-slider-with-marks" data-reactid="800"><div class="ant-slider-rail" data-reactid="801"></div><div class="ant-slider-track" style="visibility:visible;left:0%;width:20%;" data-reactid="802"></div><div class="ant-slider-step" data-reactid="803"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;" data-reactid="804"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:20%;" data-reactid="805"></span><span class="ant-slider-dot" style="left:40%;" data-reactid="806"></span><span class="ant-slider-dot" style="left:60%;" data-reactid="807"></span><span class="ant-slider-dot" style="left:80%;" data-reactid="808"></span><span class="ant-slider-dot" style="left:100%;" data-reactid="809"></span></div><div class="ant-slider-handle" style="left:20%;" data-reactid="810"></div><div class="ant-slider-mark" data-reactid="811"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:0%;" data-reactid="812">8</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:20%;" data-reactid="813">16</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:40%;" data-reactid="814">24</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:60%;" data-reactid="815">32</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:80%;" data-reactid="816">40</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:100%;" data-reactid="817">48</span></div></div></div><span style="margin-right:6px;" data-reactid="818">Column Count:</span><div style="width:50%;" data-reactid="819"><div class="ant-slider ant-slider-with-marks" data-reactid="820"><div class="ant-slider-rail" data-reactid="821"></div><div class="ant-slider-track" style="visibility:visible;left:0%;width:40%;" data-reactid="822"></div><div class="ant-slider-step" data-reactid="823"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;" data-reactid="824"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:20%;" data-reactid="825"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:40%;" data-reactid="826"></span><span class="ant-slider-dot" style="left:60%;" data-reactid="827"></span><span class="ant-slider-dot" style="left:80%;" data-reactid="828"></span><span class="ant-slider-dot" style="left:100%;" data-reactid="829"></span></div><div class="ant-slider-handle" style="left:40%;" data-reactid="830"></div><div class="ant-slider-mark" data-reactid="831"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:0%;" data-reactid="832">2</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:20%;" data-reactid="833">3</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:40%;" data-reactid="834">4</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:60%;" data-reactid="835">6</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:80%;" data-reactid="836">8</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:100%;" data-reactid="837">12</span></div></div></div></div><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="838"><div style="padding-left:8px;padding-right:8px;" class="ant-col-6" data-reactid="839"><div data-reactid="840">Column</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6" data-reactid="841"><div data-reactid="842">Column</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6" data-reactid="843"><div data-reactid="844">Column</div></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-6" data-reactid="845"><div data-reactid="846">Column</div></div></div><pre data-reactid="847">&lt;Row gutter={16}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;/Row&gt;</pre></div><style data-reactid="848">#components-grid-demo-playground [class^="ant-col-"] {
background: transparent;
border: 0;
}
#components-grid-demo-playground [class^="ant-col-"] > div {
background: #00A0E9;
height: 120px;
line-height: 120px;
font-size: 13px;
}
#components-grid-demo-playground pre {
background: #f9f9f9;
border-radius: 6px;
font-size: 13px;
padding: 8px 16px;
}</style></section><section class="code-box-meta markdown" data-reactid="849"><div class="code-box-title" data-reactid="850"><a href="#components-grid-demo-playground" data-reactid="851">Playground</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/grid/demo/playground.md" data-reactid="852"><i class="anticon anticon-edit" data-reactid="853"></i></a></div><div data-reactid="854"><p data-reactid="855"><!-- react-text: 856 -->A simple playground for column count and gutter.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="857"></i></section><section class="highlight-wrapper" data-reactid="858"><div class="highlight" data-reactid="859"><i class="anticon anticon-copy code-box-code-copy" data-reactid="860"></i><pre class="language-jsx" data-reactid="861"><code data-reactid="862"><span class="token keyword">import</span> <span class="token punctuation">{</span> Row<span class="token punctuation">,</span> Col<span class="token punctuation">,</span> Slider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
gutters <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
colCounts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
gutterKey<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
colCountKey<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>gutters<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colCounts<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onGutterChange <span class="token operator">=</span> <span class="token punctuation">(</span>gutterKey<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> gutterKey <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onColCountChange <span class="token operator">=</span> <span class="token punctuation">(</span>colCountKey<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> colCountKey <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> gutterKey<span class="token punctuation">,</span> colCountKey <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> cols <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> colCount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colCounts<span class="token punctuation">[</span>colCountKey<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> colCode <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> colCount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
cols<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Col</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span> <span class="token operator">/</span> colCount<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
colCode <span class="token operator">+</span><span class="token operator">=</span> <span class="token template-string"><span class="token string">` &lt;Col span={</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">24</span> <span class="token operator">/</span> colCount<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">} />\n`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginRight<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Gutter <span class="token punctuation">(</span>px<span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'50%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Slider</span>
<span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>
<span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>gutters<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">}</span></span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>gutterKey<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onGutterChange<span class="token punctuation">}</span></span>
<span class="token attr-name">marks</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>gutters<span class="token punctuation">}</span></span>
<span class="token attr-name">step</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">null</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginRight<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Column Count<span class="token punctuation">:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'50%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Slider</span>
<span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>
<span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>colCounts<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">}</span></span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>colCountKey<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onColCountChange<span class="token punctuation">}</span></span>
<span class="token attr-name">marks</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>colCounts<span class="token punctuation">}</span></span>
<span class="token attr-name">step</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">null</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span> <span class="token attr-name">gutter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>gutters<span class="token punctuation">[</span>gutterKey<span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>cols<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`&lt;Row gutter={</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>gutters<span class="token punctuation">[</span>gutterKey<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">}>\n</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>colCode<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/Row>`</span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="863"><pre data-reactid="864"><code class="css" data-reactid="865"><span class="token selector"><span class="token id">#components-grid-demo-playground</span> <span class="token attribute">[class^="ant-col-"]</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#components-grid-demo-playground</span> <span class="token attribute">[class^="ant-col-"]</span> > div </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#00A0E9</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">13</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#components-grid-demo-playground</span> pre </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#f9f9f9</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">6</span>px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">13</span>px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">8</span>px <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="866"><h2 id="API" data-reactid="867"><span data-reactid="868"><!-- react-text: 869 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="870">#</a></h2><p data-reactid="871"><!-- react-text: 872 -->Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community:<!-- /react-text --></p><ul data-reactid="873"><li data-reactid="874"><p data-reactid="875"><a href="http://roylee0704.github.io/react-flexbox-grid/" data-reactid="876"><!-- react-text: 877 -->react-flexbox-grid<!-- /react-text --></a></p></li><li data-reactid="878"><p data-reactid="879"><a href="http://whoisandie.github.io/react-blocks/" data-reactid="880"><!-- react-text: 881 -->react-blocks<!-- /react-text --></a></p></li></ul><h3 id="Row" data-reactid="882"><span data-reactid="883"><!-- react-text: 884 -->Row<!-- /react-text --></span><a href="#Row" class="anchor" data-reactid="885">#</a></h3><table data-reactid="886"><thead data-reactid="887"><tr data-reactid="888"><th data-reactid="889"><!-- react-text: 890 -->Property<!-- /react-text --></th><th data-reactid="891"><!-- react-text: 892 -->Description<!-- /react-text --></th><th data-reactid="893"><!-- react-text: 894 -->Type<!-- /react-text --></th><th data-reactid="895"><!-- react-text: 896 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="897"><tr data-reactid="898"><td data-reactid="899"><!-- react-text: 900 -->gutter<!-- /react-text --></td><td data-reactid="901"><!-- react-text: 902 -->grid spacing<!-- /react-text --></td><td data-reactid="903"><!-- react-text: 904 -->number<!-- /react-text --></td><td data-reactid="905"><!-- react-text: 906 -->0<!-- /react-text --></td></tr><tr data-reactid="907"><td data-reactid="908"><!-- react-text: 909 -->type<!-- /react-text --></td><td data-reactid="910"><!-- react-text: 911 -->layout mode, the optional <!-- /react-text --><code data-reactid="912"><!-- react-text: 913 -->flex<!-- /react-text --></code><!-- react-text: 914 -->, <!-- /react-text --><a href="http://caniuse.com/#search=flex" data-reactid="915"><!-- react-text: 916 -->effective modern browser<!-- /react-text --></a></td><td data-reactid="917"><!-- react-text: 918 -->string<!-- /react-text --></td><td data-reactid="919"></td></tr><tr data-reactid="920"><td data-reactid="921"><!-- react-text: 922 -->align<!-- /react-text --></td><td data-reactid="923"><!-- react-text: 924 -->the vertical alignment of the layout of flex: <!-- /react-text --><code data-reactid="925"><!-- react-text: 926 -->top<!-- /react-text --></code><!-- react-text: 927 --> <!-- /react-text --><code data-reactid="928"><!-- react-text: 929 -->middle<!-- /react-text --></code><!-- react-text: 930 --> <!-- /react-text --><code data-reactid="931"><!-- react-text: 932 -->bottom<!-- /react-text --></code></td><td data-reactid="933"><!-- react-text: 934 -->string<!-- /react-text --></td><td data-reactid="935"><code data-reactid="936"><!-- react-text: 937 -->top<!-- /react-text --></code></td></tr><tr data-reactid="938"><td data-reactid="939"><!-- react-text: 940 -->justify<!-- /react-text --></td><td data-reactid="941"><!-- react-text: 942 -->horizontal arrangement of the layout of flex: <!-- /react-text --><code data-reactid="943"><!-- react-text: 944 -->start<!-- /react-text --></code><!-- react-text: 945 --> <!-- /react-text --><code data-reactid="946"><!-- react-text: 947 -->end<!-- /react-text --></code><!-- react-text: 948 --> <!-- /react-text --><code data-reactid="949"><!-- react-text: 950 -->center<!-- /react-text --></code><!-- react-text: 951 --> <!-- /react-text --><code data-reactid="952"><!-- react-text: 953 -->space-around<!-- /react-text --></code><!-- react-text: 954 --> <!-- /react-text --><code data-reactid="955"><!-- react-text: 956 -->space-between<!-- /react-text --></code></td><td data-reactid="957"><!-- react-text: 958 -->string<!-- /react-text --></td><td data-reactid="959"><code data-reactid="960"><!-- react-text: 961 -->start<!-- /react-text --></code></td></tr></tbody></table><h3 id="Col" data-reactid="962"><span data-reactid="963"><!-- react-text: 964 -->Col<!-- /react-text --></span><a href="#Col" class="anchor" data-reactid="965">#</a></h3><table data-reactid="966"><thead data-reactid="967"><tr data-reactid="968"><th data-reactid="969"><!-- react-text: 970 -->Property<!-- /react-text --></th><th data-reactid="971"><!-- react-text: 972 -->Description<!-- /react-text --></th><th data-reactid="973"><!-- react-text: 974 -->Type<!-- /react-text --></th><th data-reactid="975"><!-- react-text: 976 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="977"><tr data-reactid="978"><td data-reactid="979"><!-- react-text: 980 -->span<!-- /react-text --></td><td data-reactid="981"><!-- react-text: 982 -->raster occupying the number of cells,0 corresponds to <!-- /react-text --><code data-reactid="983"><!-- react-text: 984 -->display: none<!-- /react-text --></code></td><td data-reactid="985"><!-- react-text: 986 -->number<!-- /react-text --></td><td data-reactid="987"><!-- react-text: 988 -->none<!-- /react-text --></td></tr><tr data-reactid="989"><td data-reactid="990"><!-- react-text: 991 -->order<!-- /react-text --></td><td data-reactid="992"><!-- react-text: 993 -->raster order, under <!-- /react-text --><code data-reactid="994"><!-- react-text: 995 -->flex<!-- /react-text --></code><!-- react-text: 996 --> effective layout mode<!-- /react-text --></td><td data-reactid="997"><!-- react-text: 998 -->number<!-- /react-text --></td><td data-reactid="999"><!-- react-text: 1000 -->0<!-- /react-text --></td></tr><tr data-reactid="1001"><td data-reactid="1002"><!-- react-text: 1003 -->offset<!-- /react-text --></td><td data-reactid="1004"><!-- react-text: 1005 -->the number of cells to the left of the grid spacing, no cell in grid spacing<!-- /react-text --></td><td data-reactid="1006"><!-- react-text: 1007 -->number<!-- /react-text --></td><td data-reactid="1008"><!-- react-text: 1009 -->0<!-- /react-text --></td></tr><tr data-reactid="1010"><td data-reactid="1011"><!-- react-text: 1012 -->push<!-- /react-text --></td><td data-reactid="1013"><!-- react-text: 1014 -->the number of cells that raster move to the right<!-- /react-text --></td><td data-reactid="1015"><!-- react-text: 1016 -->number<!-- /react-text --></td><td data-reactid="1017"><!-- react-text: 1018 -->0<!-- /react-text --></td></tr><tr data-reactid="1019"><td data-reactid="1020"><!-- react-text: 1021 -->pull<!-- /react-text --></td><td data-reactid="1022"><!-- react-text: 1023 -->the number of cells that raster move to the left<!-- /react-text --></td><td data-reactid="1024"><!-- react-text: 1025 -->number<!-- /react-text --></td><td data-reactid="1026"><!-- react-text: 1027 -->0<!-- /react-text --></td></tr><tr data-reactid="1028"><td data-reactid="1029"><!-- react-text: 1030 -->xs<!-- /react-text --></td><td data-reactid="1031"><code data-reactid="1032"><!-- react-text: 1033 -->&lt;768px<!-- /react-text --></code><!-- react-text: 1034 --> and also default setting, could be a <!-- /react-text --><code data-reactid="1035"><!-- react-text: 1036 -->span<!-- /react-text --></code><!-- react-text: 1037 --> value or a object contain above props<!-- /react-text --></td><td data-reactid="1038"><!-- react-text: 1039 -->number<!-- /react-text --><!-- react-text: 1040 -->|<!-- /react-text --><!-- react-text: 1041 -->object<!-- /react-text --></td><td data-reactid="1042"><!-- react-text: 1043 -->-<!-- /react-text --></td></tr><tr data-reactid="1044"><td data-reactid="1045"><!-- react-text: 1046 -->sm<!-- /react-text --></td><td data-reactid="1047"><code data-reactid="1048"><!-- react-text: 1049 -->≥768px<!-- /react-text --></code><!-- react-text: 1050 -->, could be a <!-- /react-text --><code data-reactid="1051"><!-- react-text: 1052 -->span<!-- /react-text --></code><!-- react-text: 1053 --> value or a object contain above props<!-- /react-text --></td><td data-reactid="1054"><!-- react-text: 1055 -->number<!-- /react-text --><!-- react-text: 1056 -->|<!-- /react-text --><!-- react-text: 1057 -->object<!-- /react-text --></td><td data-reactid="1058"><!-- react-text: 1059 -->-<!-- /react-text --></td></tr><tr data-reactid="1060"><td data-reactid="1061"><!-- react-text: 1062 -->md<!-- /react-text --></td><td data-reactid="1063"><code data-reactid="1064"><!-- react-text: 1065 -->≥992px<!-- /react-text --></code><!-- react-text: 1066 -->, could be a <!-- /react-text --><code data-reactid="1067"><!-- react-text: 1068 -->span<!-- /react-text --></code><!-- react-text: 1069 --> value or a object contain above props<!-- /react-text --></td><td data-reactid="1070"><!-- react-text: 1071 -->number<!-- /react-text --><!-- react-text: 1072 -->|<!-- /react-text --><!-- react-text: 1073 -->object<!-- /react-text --></td><td data-reactid="1074"><!-- react-text: 1075 -->-<!-- /react-text --></td></tr><tr data-reactid="1076"><td data-reactid="1077"><!-- react-text: 1078 -->lg<!-- /react-text --></td><td data-reactid="1079"><code data-reactid="1080"><!-- react-text: 1081 -->≥1200px<!-- /react-text --></code><!-- react-text: 1082 -->, could be a <!-- /react-text --><code data-reactid="1083"><!-- react-text: 1084 -->span<!-- /react-text --></code><!-- react-text: 1085 --> value or a object contain above props<!-- /react-text --></td><td data-reactid="1086"><!-- react-text: 1087 -->number<!-- /react-text --><!-- react-text: 1088 -->|<!-- /react-text --><!-- react-text: 1089 -->object<!-- /react-text --></td><td data-reactid="1090"><!-- react-text: 1091 -->-<!-- /react-text --></td></tr><tr data-reactid="1092"><td data-reactid="1093"><!-- react-text: 1094 -->xl<!-- /react-text --></td><td data-reactid="1095"><code data-reactid="1096"><!-- react-text: 1097 -->≥1600px<!-- /react-text --></code><!-- react-text: 1098 -->, could be a <!-- /react-text --><code data-reactid="1099"><!-- react-text: 1100 -->span<!-- /react-text --></code><!-- react-text: 1101 --> value or a object contain above props<!-- /react-text --></td><td data-reactid="1102"><!-- react-text: 1103 -->number<!-- /react-text --><!-- react-text: 1104 -->|<!-- /react-text --><!-- react-text: 1105 -->object<!-- /react-text --></td><td data-reactid="1106"><!-- react-text: 1107 -->-<!-- /react-text --></td></tr></tbody></table><p data-reactid="1108"><!-- react-text: 1109 -->The breakpoints of responsive grid follow <!-- /react-text --><a href="http://getbootstrap.com/css/#grid-media-queries" data-reactid="1110"><!-- react-text: 1111 -->BootStrap 3 media queries rules<!-- /react-text --></a><!-- react-text: 1112 -->(not contain <!-- /react-text --><code data-reactid="1113"><!-- react-text: 1114 -->occasionally part<!-- /react-text --></code><!-- react-text: 1115 -->).<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="1116"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="1117"><section class="prev-next-nav" data-reactid="1118"><a class="prev-page" href="/components/icon/" data-reactid="1119"><span data-reactid="1120">Icon</span><span class="chinese" data-reactid="1121"></span></a><a class="next-page" href="/components/layout/" data-reactid="1122"><span data-reactid="1123">Layout</span><span class="chinese" data-reactid="1124"></span></a></section></div></div></div><footer id="footer" data-reactid="1125"><ul data-reactid="1126"><li data-reactid="1127"><h2 data-reactid="1128"><i class="anticon anticon-github" data-reactid="1129"></i><!-- react-text: 1130 --> GitHub<!-- /react-text --></h2><div data-reactid="1131"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="1132"><span data-reactid="1133">Repository</span></a></div><div data-reactid="1134"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="1135"><span data-reactid="1136">Customize Theme</span></a></div><div data-reactid="1137"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="1138"><span data-reactid="1139">Awesome Ant Design</span></a></div></li><li data-reactid="1140"><h2 data-reactid="1141"><i class="anticon anticon-link" data-reactid="1142"></i><!-- react-text: 1143 --> <!-- /react-text --><span data-reactid="1144">Links</span></h2><div data-reactid="1145"><a href="http://mobile.ant.design" data-reactid="1146">Ant Design Mobile</a><span data-reactid="1147"> - </span><span data-reactid="1148">Mobile UI</span></div><div data-reactid="1149"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="1150">dva</a><!-- react-text: 1151 --> - <!-- /react-text --><span data-reactid="1152">Framework</span></div><div data-reactid="1153"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="1154">dva-cli</a><!-- react-text: 1155 --> -<!-- /react-text --><span data-reactid="1156">Developer Tools</span></div><div data-reactid="1157"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="1158">Egg</a><span data-reactid="1159"> - </span><span data-reactid="1160">Enterprise Node Framework</span></div><div data-reactid="1161"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="1162">AntV</a><span data-reactid="1163"> - </span><span data-reactid="1164">Data Visualization</span></div><div data-reactid="1165"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="1166">Ant Motion</a><span data-reactid="1167"> - </span><span data-reactid="1168">Motion Soluction</span></div><div data-reactid="1169"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="1170">AntD Library</a><span data-reactid="1171"> - </span><span data-reactid="1172">Axure library</span></div><div data-reactid="1173"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="1174">Ant UX</a><span data-reactid="1175"> - </span><span data-reactid="1176">Sitemap Template</span></div></li><li data-reactid="1177"><h2 data-reactid="1178"><i class="anticon anticon-customer-service" data-reactid="1179"></i><!-- react-text: 1180 --> <!-- /react-text --><span data-reactid="1181">Community</span></h2><div data-reactid="1182"><a href="/changelog" data-reactid="1183"><span data-reactid="1184">Change Log</span></a></div><div data-reactid="1185"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="1186"><span data-reactid="1187">FAQ</span></a></div><div data-reactid="1188"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="1189"><span data-reactid="1190">Chat Room</span></a></div><div data-reactid="1191"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="1192"><span data-reactid="1193">Bug Report</span></a></div><div data-reactid="1194"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="1195"><span data-reactid="1196">StackOverflow</span></a></div><div data-reactid="1197"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="1198"><span data-reactid="1199">SegmentFault</span></a></div></li><li data-reactid="1200"><h2 data-reactid="1201"><!-- react-text: 1202 -->Copyright © <!-- /react-text --><!-- react-text: 1203 -->2017<!-- /react-text --></h2><div data-reactid="1204"><span data-reactid="1205">Created by Ant UED</span></div><div data-reactid="1206"><!-- react-text: 1207 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="1208">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink