Day03：Ant Design 排版好幫手之格線系統

一、Ant Design 的格線系統

就像 Tailwind CSS 裡的 Grid Row Start / End 和 Bootstrap 的 Flex 一樣，一定都有非常方便可以用來快速排版的格線系統，但是有別於前述兩者，Antd 的是以一排24個為基數，使用時只要遵循著以24除得盡的數字去編排就會美觀又整齊。

二、基本使用

基本上是用一個 <Row> tag 包住你所需要的 <Col> ，你可以放置任何東西到 <Col> tag 裡，像是做一些卡片之類的，那我覺得有個很方便的地方可以稍微提一下，數值都可以使用 React 的 state 或 props 去判斷或控制，例如你用 map 跑一個 list 出來，但因為畫面上是用卡片呈現，你想排除沒有圖片的項目，那你可以在屬性的值裡加判斷，像是 span={_.isNil(item.pic)}。那以下先介紹每一格如何使用(也就是 <Col> 的部分)：

使用規則：

屬性名稱	可以使用的值	說明
span	數字	若寫0，則不會顯示
xs	數字	若寫0，則不會顯示
sm	數字	若寫0，則不會顯示
md	數字	若寫0，則不會顯示
lg	數字	若寫0，則不會顯示
xl	數字	若寫0，則不會顯示
xxl	數字	若寫0，則不會顯示

螢幕寬度對應尺寸

{
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
}

範例1：以一排4個為例，那就是在 span 給6啦~


class App extends React.Component {
  render() {
    return (
      <div className="render-area">
        <Row>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
        </Row>
       </div>
    )
  }
}

範例2：桌機尺寸時一排想要呈現4個，但平板想要變成2個、手機只要1個的狀況


class App extends React.Component {
  render() {
    return (
      <div className="render-area">
        <Row>
          <Col xs={24} sm={24} md={12} lg={6} xl={6} xxl={6}>col-6</Col>
          <Col xs={24} sm={24} md={12} lg={6} xl={6} xxl={6}>col-6</Col>
          <Col xs={24} sm={24} md={12} lg={6} xl={6} xxl={6}>col-6</Col>
          <Col xs={24} sm={24} md={12} lg={6} xl={6} xxl={6}>col-6</Col>
        </Row>
       </div>
    )
  }
}

三、延伸應用

與其它框架一樣，你可以在 <Row> tag 裡加上一些需要的參數，呈現對應的效果，因為都很重要所以都列在下方，需要看各種展示或效果可以再到官方 API 文件研究。

使用規則：

屬性名稱	可以使用的值	說明
align	top 或 middle 或 bottom	很直覺，就是垂直對齊的方式，沒有特別設定的話，默認值是 top
justify	start 或 end 或 center 或 space-around 或 space-between 或 space-evenly	水平對齊的方式，默認值也是 top
wrap	true 或 false	默認值是 true
gutter	數字、陣列或物件	可以設定每欄的間距值

附註說明：
因為大部分使用格線系統都會希望它有自動換行效果，但如果你的版型外框有固定寬度，需要用橫向滾軸來呈現的話，也可以用 wrap={false} 將其做變化。
|
|:–:|
| 先前專案元件示意圖|

超級大重點：➜Point!!!
我個人剛使用時，常常沒看懂為何給了 gutter 值卻還是沒有達到我要的效果，google後發現一個很重要的關鍵，這邊直接告訴大家，如果你需要在 Antd 的格線系統裡使用每欄間距，一定要記得在每一個 <Col> tag 裡再包一對 <div></div> ，把你需要呈現的東西放在那對 <div></div> 裡。

四、今天的元件練習

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！

我的 codepen 連結

|
|:–:|
| codepen 練習成果|

一、Ant Design 的 格線系統

二、基本使用

三、延伸應用

四、今天的元件練習

一、Ant Design 的格線系統