原使用Ant Design Vue，如何在Naive UI中实现响应式容器？

Naive UI的栅格系统基于24列布局，和Ant Design Vue的Col/Row逻辑高度匹配，可直接替换实现相同的响应式居中容器效果：

核心实现代码 #

用n-grid替代原a-row，n-grid-item替代原a-col，断点参数完全复用：

<n-grid justify="center">
  <n-grid-item 
    :xs="24" 
    :sm="24" 
    :md="22" 
    :lg="20" 
    :xl="16" 
    :xxl="14"
  >
    <!-- 你的页面内容 -->
  </n-grid-item>
</n-grid>

关键细节说明 #

• n-grid的justify="center"对应原a-row的justify="center"，实现子元素水平居中
• Naive UI的栅格断点（xs/sm/md/lg/xl/xxl）与Ant Design Vue完全一致，无需调整阈值
• 若需要列间距，给n-grid添加gutter参数即可，比如:gutter="16"对应16px间距
• 需在组件中导入对应栅格组件：

  import { NGrid, NGridItem } from 'naive-ui'
  

替代方案：自定义响应式容器 #

如果不需要栅格系统，也可以用原生CSS配合Naive布局组件实现：

<n-layout-content class="responsive-container">
  <!-- 内容 -->
</n-layout-content>

<style scoped>
.responsive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1600px) {
  .responsive-container {
    max-width: calc(14/24 * 100%);
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .responsive-container {
    max-width: calc(16/24 * 100%);
  }
}

/* 其他断点可按需添加 */
</style>

内容的提问来源于stack exchange，提问作者Lawyer Kenny