frontend/src/views/PersonalView.vue

<script setup>
import List from '@/views/PersonalView/List.vue'
</script>

<template>
  <n-grid
    responsive="screen"
    item-responsive
    cols="24"
    :x-gap="16"
    :y-gap="16"
  >
    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3"/>

    <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
      <n-card class="personal-card"
        bordered title="Personal info">
        <List />
      </n-card>
    </n-gi>

    <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3"/>
  </n-grid>
</template>

<style scoped>
.personal-card {
  margin: 10px auto 0;
}
</style>