diff --git a/web_frontend/web_result/order-classes/energy/css/styles.css b/web_frontend/web_result/order-classes/energy/css/styles.css
index 6ab5049c..2c8eeb54 100644
--- a/web_frontend/web_result/order-classes/energy/css/styles.css
+++ b/web_frontend/web_result/order-classes/energy/css/styles.css
@@ -1049,55 +1049,33 @@ body:not(.dark-theme) .visual-divider::before {
     }
 }
 
-/* ========== Bento Grid布局 - 不等大小网格 ========== */
+/* ========== Bento Grid布局 - 3列等宽并排布局 ========== */
 .bento-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-xl);
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-2xl);
     margin-bottom: var(--spacing-xl);
 }
 
-.bento-large {
-    grid-column: span 2;
-    grid-row: span 2;
-}
-
-.bento-medium {
-    grid-column: span 2;
-    grid-row: span 1;
-}
-
+.bento-large,
+.bento-medium,
 .bento-small {
     grid-column: span 1;
     grid-row: span 1;
 }
 
 /* Bento Grid响应式 */
-@media (max-width: 1024px) {
+@media (max-width: 1200px) {
     .bento-grid {
         grid-template-columns: repeat(2, 1fr);
-    }
-
-    .bento-large {
-        grid-column: span 2;
-        grid-row: span 1;
-    }
-
-    .bento-medium {
-        grid-column: span 1;
+        gap: var(--spacing-xl);
     }
 }
 
 @media (max-width: 768px) {
     .bento-grid {
         grid-template-columns: 1fr;
-    }
-
-    .bento-large,
-    .bento-medium,
-    .bento-small {
-        grid-column: span 1;
-        grid-row: span 1;
+        gap: var(--spacing-lg);
     }
 }