From 7bcd874e322cb6556f112cb27087c5cc1d02e2d2 Mon Sep 17 00:00:00 2001
From: AgentePotente <agent@openclaw.local>
Date: Wed, 11 Mar 2026 18:47:05 +0100
Subject: [PATCH] feat(css_layout): add grid-by-item-count guidance

- Add .grid-6 class for 6-column layouts
- New section: Grid by Item Count with decision table
- Concrete examples for 2, 4, 6 items
- Anti-pattern warning: avoid 4 items in 3-col grid
- Prevents empty space issues in layouts
---
 .../references/css_layout.md                  | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/agency-shared-references/references/css_layout.md b/agency-shared-references/references/css_layout.md
index 478192b..98b4641 100644
--- a/agency-shared-references/references/css_layout.md
+++ b/agency-shared-references/references/css_layout.md
@@ -537,22 +537,78 @@ h3 {
   grid-template-columns: repeat(4, 1fr);
 }
 
+.grid-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
 /* Responsive grid */
 @media (max-width: 1023px) {
   .grid-4 {
     grid-template-columns: repeat(2, 1fr);
   }
+  .grid-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media (max-width: 767px) {
   .grid-2,
   .grid-3,
-  .grid-4 {
+  .grid-4,
+  .grid-6 {
     grid-template-columns: 1fr;
   }
 }
 ```
 
+### Grid by Item Count — Scegli la Griglia Corretta
+
+**REGOLA: Usa la griglia che ospita perfettamente i tuoi elementi, senza lasciare spazi vuoti.**
+
+| Elementi | Griglia Desktop | Griglia Tablet | Griglia Mobile | Esempio |
+|----------|-----------------|----------------|----------------|---------|
+| **2** | 2 colonne | 2 colonne | 1 colonna | 2 feature, 2 testimonial |
+| **3** | 3 colonne | 1-3 colonne* | 1 colonna | 3 servizi, 3 benefici |
+| **4** | 4 colonne → **o** 2 colonne x 2 righe | 2 colonne x 2 righe | 1 colonna | 4 features, 4 loghi clienti |
+| **5** | 3+2 colonne asimmetrico → **o** 2+3 | 2+3 colonne | 1 colonna | 5 team members, 5 step |
+| **6** | 3 colonne x 2 righe → **o** 6 colonne | 2 colonne x 3 righe | 1 colonna | 6 features, 6 servizi |
+| **7-8** | 4 colonne x 2 righe | 2 colonne | 1 colonna | 8 loghi, 8 features |
+
+\* *Per 3 elementi: usa 3 colonne se il contenuto è corto, 1 colonna se lungo*
+
+**Esempi concreti:**
+
+```html
+<!-- 2 ELEMENTI: Servizi principali -->
+<div class="row">
+  <div class="col-12 col-md-6">Servizio 1</div>
+  <div class="col-12 col-md-6">Servizio 2</div>
+</div>
+
+<!-- 4 ELEMENTI: Feature grid (MEGLIO 2x2 che 3+1) -->
+<div class="row">
+  <div class="col-12 col-md-6 col-lg-3">Feature 1</div>
+  <div class="col-12 col-md-6 col-lg-3">Feature 2</div>
+  <div class="col-12 col-md-6 col-lg-3">Feature 3</div>
+  <div class="col-12 col-md-6 col-lg-3">Feature 4</div>
+</div>
+
+<!-- 6 ELEMENTI: 3x2 grid (NON 3 colonne con riga incompleta) -->
+<div class="row">
+  <div class="col-12 col-md-6 col-lg-4">Item 1</div>
+  <div class="col-12 col-md-6 col-lg-4">Item 2</div>
+  <div class="col-12 col-md-6 col-lg-4">Item 3</div>
+  <div class="col-12 col-md-6 col-lg-4">Item 4</div>
+  <div class="col-12 col-md-6 col-lg-4">Item 5</div>
+  <div class="col-12 col-md-6 col-lg-4">Item 6</div>
+</div>
+```
+
+**Anti-pattern da evitare:**
+- ❌ 4 elementi in griglia 3 colonne (lascia 1 spazio vuoto)
+- ❌ 5 elementi in griglia 4 colonne (lascia 3 spazi vuoti)
+- ✅ Preferisci griglia 2 colonne per 4 elementi (2x2 perfetto)
+
 ### Split Layout
 
 ```css