อย่าลืม npm i --force ด้วยครับ มีโหลดpackage

src/app/DPU/common/myportal/portal-create-category/portal-create-category.component.html

-<app-page-header [title]="'รายการอัพโหลดเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการอัพโหลดเอกสาร'"></app-page-header>
+<app-page-header [title]="'รายการอัพโหลดเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการอัพโหลดเอกสาร'"></app-page-header>
 <!-- <div class="row">
   <div class="col-12">
     <div class="card card-body">
@@ -29,27 +30,34 @@
 
 <div class="max-w-7xl mx-auto">
   <div class="box p-4">
-    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการอัพโหลดเอกสาร</h4>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
 
-      <div class="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out"
-        *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+    <!-- Flex แทน Grid -->
+    <div class="flex flex-wrap justify-center gap-6">
+
+      <div
+        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
+        style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
         <div class="p-8 text-center">
           <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
-            <img src="{{ c.img }}" class="" alt="">
+            <img src="{{ c.img }}" class="" alt="" />
           </div>
-          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{c.name}}</h3>
+          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
         </div>
-        <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
-          <div>
-            <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
-          </div>
-          <div>
-            <button
-              class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
-              (click)="openView(c.id)">
-              รายละเอียด
-            </button>
+
+        <!-- Footer -->
+        <div class="mt-auto">
+          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+            <div>
+              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+            </div>
+            <div>
+              <button
+                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+                (click)="openView(c.id)">
+                รายละเอียด
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -102,4 +110,4 @@
 
     </form>
   </div>
-</ng-template> -->
+</ng-template> -->
\ No newline at end of file