When to Use <Space> component or <Row> and <Col> in Antd V.4?

user_15790489 0
Viewed 561

When to use Space Component ? on the website it says

"Avoid components clinging together and set a unified space."

if by that means, i can use Row and Col components too to achieve the same thing,

ex : i have 3 button in same row (like the basic usage of Space Component on docs)

using Space =>

<Space>
  <Button type="primary">Button1</Button>
  <Button type="primary">Button2</Button>
  <Button type="primary">Button3</Button>
</Space>

using Row and Col Component =>

<Row gutter={8}>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
  <Col span={8}> 
    <Button type="primary">Button 1 </Button>
  </Col>
</Row>

Thanks for everyone that helping this :)

antd reactjs
1 Answers

<Space> and Grid components (<Row> and <Col>) are intended for different purposes.

<Space> is intended to be used in instances where you have a set of elements that need to be laid out inline and you want to have some spacing between them. Using the <Space> component with the different pre-defined size values bring a unified concept of spacing throughout your application.

Grid components are intended for addressing more complex layout requirements. While it is true that you can achieve the same outcome of <Space> component with Grid components, using Grid components for achieving spacing needs does not provide you with a unified concept of spacing throughout your application. And for the example you have given, it is basically an overkill to use the <Row> and <Col> components to just achieve spacing.

user_37818500
Related