Grids are a layout system that allow content to be organized into columns and rows.
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" }
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL
}
};
return (
<div style={styles.container}>
<Row
gutter={[
{
xs: token.size,
sm: token.size,
md: token.sizeLG,
lg: token.sizeLG,
xl: token.sizeLG
},
token.sizeLG
]}
>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={24} lg={12} xl={12}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText,
borderRadius: token.borderRadius,
border: `${token.lineWidth}px dashed ${token.colorBorder}`
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" },
{ key: 3, name: "Column 3" },
{ key: 4, name: "Column 4" },
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL,
},
};
return (
<div style={styles.container}>
<Row gutter={[token.lineWidth, token.lineWidth]}>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={12} lg={12} xl={12}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText,
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" },
{ key: 3, name: "Column 3" }
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL
}
};
return (
<div style={styles.container}>
<Row
gutter={[
{
xs: token.size,
sm: token.size,
md: token.sizeLG,
lg: token.sizeLG,
xl: token.sizeLG
},
token.sizeLG
]}
>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={24} lg={8} xl={8}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText,
borderRadius: token.borderRadius,
border: `${token.lineWidth}px dashed ${token.colorBorder}`
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" },
{ key: 3, name: "Column 3" },
{ key: 4, name: "Column 4" },
{ key: 5, name: "Column 5" },
{ key: 6, name: "Column 6" }
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL
}
};
return (
<div style={styles.container}>
<Row gutter={[token.lineWidth, token.lineWidth]}>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={12} lg={8} xl={8}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = Grid.useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" },
{ key: 3, name: "Column 3" },
{ key: 4, name: "Column 4" }
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL
}
};
return (
<div style={styles.container}>
<Row
gutter={[
{
xs: token.size,
sm: token.size,
md: token.sizeLG,
lg: token.sizeLG,
xl: token.sizeLG
},
token.sizeLG
]}
>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={12} lg={6} xl={6}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText,
borderRadius: token.borderRadius,
border: `${token.lineWidth}px dashed ${token.colorBorder}`
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
import React from "react";
import { Col, Grid, Row, theme } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const columnItems = [
{ key: 1, name: "Column 1" },
{ key: 2, name: "Column 2" },
{ key: 3, name: "Column 3" },
{ key: 4, name: "Column 4" },
{ key: 5, name: "Column 5" },
{ key: 6, name: "Column 6" }
];
const styles = {
container: {
margin: "0 auto",
padding: screens.md
? `0px ${token.paddingLG}px`
: `0px ${token.padding}px`,
maxWidth: token.screenXL
}
};
return (
<div style={styles.container}>
<Row
gutter={[
{
xs: token.size,
sm: token.size,
md: token.sizeLG,
lg: token.sizeLG,
xl: token.sizeLG
},
token.sizeLG
]}
>
{columnItems.map((item) => (
<Col key={item.key} xs={24} sm={24} md={12} lg={4} xl={4}>
<div
style={{
backgroundColor: token.colorBgContainer,
padding: token.paddingLG,
textAlign: "center",
color: token.colorText,
borderRadius: token.borderRadius,
border: `${token.lineWidth}px dashed ${token.colorBorder}`
}}
>
{item.name}
</div>
</Col>
))}
</Row>
</div>
);
}
