React : ant Design {Row, Col} 활용하기

React : ant Design {Row, Col} 활용하기 

Row, Col 을 사용해

import { Row, Col } from 'antd';

Row 로 한 행을 만들고 Col , span을 사용해 한 줄을 균등배분하는것이 가능하다

 

 

 

일반 분배

<Row>
    <Col span = {12} style={colStyle()} />
    <Col span = {12} style={colStyle()} />
</Row>
<Row>
    <Col span = {8} style={colStyle()} />
    <Col span = {8} style={colStyle()} />
</Row>

Row항목 수를 임의대로 조절하고 싶을때 gutter

<Col span = {8} style={colStyle()} /> 에서 span = {여기}는 24분할중에 얼마나 차지할 지에 대한 숫자를 적으면 된다 !

<Row gutter={16}>
    <Col span = {12} />
    <Col span = {12} />
</Row>
<Row gutter={16}>
    <Col span = {8} />
    <Col span = {8} />
    <Col span = {8} />
</Row>

여기서 gutter은 16+8n의 정수를 넣어주면된다
👉 기본적으로 24를 가지고 있는 Row 의 수를 바꿔줄 수 있고, 때문에 비례적으로 열을 나누기 위해 16 + 8n 형식으로 넣어주어야 올바른 열로 표현된다

일정부분만큼 건너띄고 싶을때 offset

<Row gutter={16}>
    <Col span = {12} offset={2}/> //2만큼 오른쪽으로 여백을 준다
    <Col span = {10} />
</Row>
<Row gutter={16}>
    <Col span = {8} />
    <Col span = {8} />
    <Col span = {8} />
</Row>

Row에 flex 속성 쓰기

Row 내부에 justify 로 좌우정렬을 지정해주고 align으로 위아래정렬을 설정해준다

<Row justify="start" align="top"> </Row>