我正在尝试实现以下响应式网格:
https://i.sstatic.net/ARfMpH8J.png
对于桌面,我已经设置了所需的代码:
<Grid container spacing={2}>
<Grid item sm={12} lg={6} order={{ sm: 2, lg: 1 }}>
<Gallery
images={product.images.map((image) => ({
src: image.url,
altText: image.altText
}))}
/>
</Grid>
<Grid item sm={12} lg={6} container direction="column" order={{ sm: 1, lg: 2 }}>
<Grid item>
<ProductDescription product={product} />
</Grid>
<Grid item order={{ sm: 3, lg: 2 }}>
<Typography variant="titolo-1">$99.99</Typography>
</Grid>
</Grid>
</Grid>
我的问题与项目的顺序有关。在移动设备上,不应应用嵌套网格项目容器,从而可以订购附加图像等项目。 是否可以在不隐藏和复制内容的情况下实现?
这是更新的代码。尝试一下,我会等待您的反馈。
import { Grid, Typography } from '@mui/material';
<Grid container spacing={2}>
<Grid item xs={12} lg={6} sx={{ order: { xs: 2, lg: 1 } }}>
<Gallery
images={product.images.map((image) => ({
src: image.url,
altText: image.altText
}))}
/>
</Grid>
<Grid item xs={12} lg={6} sx={{ order: { xs: 1, lg: 2 } }}>
<ProductDescription product={product} />
<Typography variant="titolo-1">$99.99</Typography>
</Grid>
</Grid>