# ant design css 提煉再提煉

## 讓 card 在同一row 都一樣高

- https://github.com/ant-design/ant-design/issues/9154
- Using flexbox-enabled rows with type="flex" and setting the height to 100% on the column contents worked well for me.

~~~javascript
<Row gutter={[ 8, 8 ]} type="flex">
</Row>
~~~

## 直接來用 craco 了啦! 再繼續 自搞 css 會升天～～～～

- https://ant.design/docs/react/use-with-create-react-app

- https://stackoverflow.com/questions/48620712/how-to-customize-ant-design-styles

- install
- npm add @craco/craco
- npm add craco-less

- 看這份 default.less 改變數！！！

- https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

## grid center component

- https://stackoverflow.com/questions/57552660/how-to-nest-the-ant-design-grid

~~~javascript
const FlexBox = styled.div`
margin: 20px;
padding: 20px;
border: 1px solid palevioletred;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`;

const borderStyle = { border: '1px solid palevioletred' };
const rowStyle = { ...borderStyle, width: '100%', padding: 10 };

export default function App() {
return (
<FlexBox>
<Row type="flex" justify="space-between" style={rowStyle}>
<Col style={borderStyle}>
<Row type="flex" justify="space-between" style={rowStyle}>
<Col style={borderStyle}>Col-3</Col>
<Col style={borderStyle}>Col-3</Col>
</Row>
<Row type="flex" justify="center">
<Col>Target</Col>
</Row>
</Col>
<Col style={borderStyle}>Col-2</Col>
</Row>
</FlexBox>
);
}
~~~