How to reset ant.design span to deafult?

user_5067058 0
Viewed 597

I'm using ant.design with React.js, and I've set my column to have a span of 24 when the screen size is less than 768 pixels:

<Col
    xs={{ span: 24 }}
    sm={{ span: 24 }}
    md={{ span: undefined }}
    lg={{ span: default }}
    xl={{ span: none }}
>

But when the screen size is greater than 768 pixels, I don't want to have to define the span (I want the column to take as little space as necessary). If I don't write include md, lg, and xl, they automatically take on the span of sm. I've tried setting span to undefined, default, and none, but none of them work. I looked at the ant.design API, but it just said the default was none.

Any help would be appreciated. :)

antd reactjs
1 Answers

what your asking for is not possible with antd layout the whole idea of the grid system is to split the screen to 24 cols so there is no way to achieve your goal by changing the spans property

you can alternately make the col to be 100% (span 24) of the screen width and inside it use flex/grid on your item

you can choose another path which is to make "div/span" that is not related to the grid not used with col and use col after it

user_94182670
Related