使用 CSS 的 Flexbox，你可以自动调整卡片的宽度以适应剩余空间。以下是一个简单的例子：

<template>  
  <div class="flex-container">  
    <n-card class="card-item">Content 1</n-card>  
    <n-card class="card-item">Content 2</n-card>  
    <n-card class="card-item">Content 3</n-card>  
    <!-- Add more cards as needed -->  
  </div>  
</template>  
<style scoped>  
.flex-container {  
  display: flex;  
  flex-wrap: wrap; /* Enable wrapping */  
  justify-content: space-around; /* Space out items evenly */  
}  
.card-item {  
  flex: 1 1 auto; /* Grow and shrink as needed based on content and available space */  
  margin: 10px; /* Add some margin */  
  min-width: 200px; /* Set a minimum width for each card */  
}  
</style>  

在上述代码中，.flex-container 设置为 display: flex 和 flex-wrap: wrap，这样就能在容器不够时把卡片换行到下一行，并且通过 justify-content: space-around 对卡片进行均匀分布。

.card-item 则设置了 flex: 1 1 auto，表示卡片可以根据需要扩大或缩小。并且通过设置一个最小宽度 min-width: 200px 来确保每个卡片至少有 200px 宽，防止卡片过于压缩。当然，这个值可以根据你的具体需求调整。

整个效果是，卡片将按照可用空间的大小自动调整其宽度，并且当空间不足时，会换行到下一行。