Menu
Into
Do i have to use css insted of default components?
925
Building a Responsive Grid-View First ensure that all HTML elements have the box-sizing property set to border-box . This makes sure that the padding and border are included in the total width and height of the elements. Read more about the box-sizing property in our CSS Box Sizing chapter.
You can make use of the responsive property on the column that you want to control for screen sizes. Just add a From To column with a custom render function, and set the responsive property on that column to only show on xs screens. The From and To columns will have the responsive property set to show on md and above.
Ant Design, referred to as Antd in this context, is a pretty great library. It contains all the components I could need in nice wrapper components that makes developing a UI very simple. One major omission, however, is a responsive mobile header.
Following is a brief look at how it works: Establish a set of column in the horizontal space defined by row (abbreviated col). Your content elements should be placed directly in the col , and only col should be placed directly in row . The column grid system is a value of 1-24 to represent its range spans.
Use this code:
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
<Row>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
</Row>
or:
<div className="ant-row">
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
