如何调整CSS实现桌面、平板与移动端的响应式Grid布局

完整修复代码 #

<Grid item lg={12} sm={12} xs={12} sx={{ mt: 2 }}>
  <Grid container spacing={2} height="100%">
    {/* 顶部标题 */}
    <Grid 
      item lg={6} sm={6} xs={12} 
      sx={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: { xs: 'flex-start', sm: 'flex-start', lg: 'flex-start' } 
      }}
    >
      <Typography fontSize="20px">Applications</Typography>
    </Grid>
    {/* 顶部新建按钮 */}
    <Grid 
      item lg={6} sm={6} xs={12} 
      sx={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: { xs: 'flex-end', sm: 'flex-end', lg: 'flex-end' } 
      }}
    >
      <Button sx={appStyle.newAppButton}>+ New Application</Button>
    </Grid>
  </Grid>
</Grid>

<Grid item lg={12} sm={12} xs={12}>
  <Grid container spacing={2} height="100%">
    {/* 搜索栏 */}
    <Grid 
      item lg={3} sm={12} xs={12} 
      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
    >
      <TextField
        type="search"
        variant="outlined"
        margin="normal"
        fullWidth
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />
    </Grid>
    {/* Filter按钮与Clear按钮统一容器 */}
    <Grid 
      item lg={9} sm={12} xs={12} 
      sx={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: { lg: 'flex-end', sm: 'flex-end', xs: 'flex-start' },
        flexDirection: { xs: 'column' },
        gap: { lg: 2, sm: 2, xs: 1 }
      }}
    >
      <div sx={{ display: 'flex', gap: 2, flexDirection: { xs: 'column' } }}>
        <FilterButton label="Product" options={productOptions} />
        <FilterButton label="Application Status" options={applicationStatusOptions} />
        <FilterButton label="Ticket Status" options={ticketStatusOptions} />
      </div>
      <Button 
        sx={{ 
          fontSize: "14px", 
          width: { lg: "150px", xs: '100%' }, 
          whiteSpace: "nowrap" 
        }}
      >
        Clear All Filters
      </Button>
    </Grid>
  </Grid>
</Grid>

关键修改说明 #

1. 修正Grid样式写法：将原直接写在Grid item上的display、alignItems等样式移至sx属性内，符合MUI组件规范。
2. 统一Filter与Clear容器：合并原分开的两个Grid项，避免小数列宽（如sm={9.9}）的错误用法，简化跨断点布局控制。
3. 断点精准适配：
   • 桌面端（lg）：搜索栏占3列，Filter+Clear容器占9列，内部横向排布并靠右对齐，保留原有正常效果。
   • 平板端（sm）：搜索栏占满12列（单独一行），Filter+Clear容器同样占满12列并靠右对齐，实现左侧留白的预期布局。
   • 移动端（xs）：Filter+Clear容器改为垂直排列，Filter按钮堆叠显示，Clear按钮占满宽度，完全匹配移动端预期。
4. 顶部栏移动端优化：将标题和按钮的xs列宽设为12，各占一行并分别左/右对齐，避免移动端布局拥挤。
5. 移除无效空列：删除原占位空列，改用容器的justifyContent控制留白，更符合Grid布局逻辑。

效果匹配 #

• 平板端：搜索栏单独占满一行；Filter按钮与Clear按钮横向排列在页面右侧，左侧留白。
• 移动端：搜索栏占满一行；Filter按钮垂直堆叠，Clear按钮位于Filter组下方并占满宽度。

内容的提问来源于stack exchange，提问作者Angela Rubchinksy