# 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> ); } ~~~ ![https://i.stack.imgur.com/cyyni.png](https://i.stack.imgur.com/cyyni.png)