Commit e1795fb7c7e for woocommerce

commit e1795fb7c7e126baf98876c5e01ba1c048cb31be
Author: Jill Q. <jill.quek@automattic.com>
Date:   Sun Oct 11 02:22:34 2026 +0800

    Give Summary grids of eleven to fifteen tiles their own column rules (#69224)

    Give eleven to fifteen tile grids their own columns

    getHasItemsClass clamps any count of ten or more to has-10-items, so
    eleven to fifteen tiles all borrow the ten-tile grid. Raise the clamp to
    fifteen so those counts style themselves.

    Rules have to come with it. A tile-count class the stylesheet does not
    define falls through to the bare .woocommerce-summary selector, which is
    a single column, so raising the clamp on its own would stack every tile
    vertically.

    Below 1440px, and for thirteen to fifteen above it, the new rules give
    the same column counts the ten-tile grid already produced. Five columns
    below 1440px leaves roughly 170px per tile, too narrow for labels such as
    Average order value to stay on one line, so an even final row is not
    worth the trade there.

    What changes is eleven and twelve above 1440px, which move from five
    columns to six and so end with one and zero empty cells instead of four
    and three. Counts of ten and below are untouched.

    Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

diff --git a/packages/js/components/changelog/wooa7s-1890-summary-grid-columns b/packages/js/components/changelog/wooa7s-1890-summary-grid-columns
new file mode 100644
index 00000000000..f9d3d0c4747
--- /dev/null
+++ b/packages/js/components/changelog/wooa7s-1890-summary-grid-columns
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use six columns for eleven or twelve Analytics metrics on wide screens, so the tiles fill the row more evenly.
diff --git a/packages/js/components/src/summary/style.scss b/packages/js/components/src/summary/style.scss
index 4919b97adf8..9a376485ac2 100644
--- a/packages/js/components/src/summary/style.scss
+++ b/packages/js/components/src/summary/style.scss
@@ -139,6 +139,20 @@ $border: $gray-200;
 			@include make-cols( 5 );
 			@include wrap-contents;
 		}
+
+		// Eleven and twelve divide into six, thirteen to fifteen into five.
+		&.has-11-items,
+		&.has-12-items {
+			@include make-cols( 6 );
+			@include wrap-contents;
+		}
+
+		&.has-13-items,
+		&.has-14-items,
+		&.has-15-items {
+			@include make-cols( 5 );
+			@include wrap-contents;
+		}
 	}

 	@include breakpoint( "<1440px" ) {
@@ -158,6 +172,17 @@ $border: $gray-200;
 			@include wrap-contents;
 		}

+		// Five columns at this width leaves the labels too narrow to sit on one
+		// line, so counts above ten stay at four as well and accept the gap.
+		&.has-11-items,
+		&.has-12-items,
+		&.has-13-items,
+		&.has-14-items,
+		&.has-15-items {
+			@include make-cols( 4 );
+			@include wrap-contents;
+		}
+
 		&.has-9-items,
 		&.has-10-items {
 			.woocommerce-summary__item-container:nth-of-type(5n)
diff --git a/packages/js/components/src/summary/utils.js b/packages/js/components/src/summary/utils.js
index 08cf97a3ca4..109796d4208 100644
--- a/packages/js/components/src/summary/utils.js
+++ b/packages/js/components/src/summary/utils.js
@@ -5,5 +5,5 @@
  * @return {string} - class name.
  */
 export function getHasItemsClass( count ) {
-	return count < 10 ? `has-${ count }-items` : 'has-10-items';
+	return count < 15 ? `has-${ count }-items` : 'has-15-items';
 }