diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
index 7499eedd0..f28c1846c 100644
--- a/scss/_patterns_lists.scss
+++ b/scss/_patterns_lists.scss
@@ -226,14 +226,18 @@ $list-step-bullet-margin: $sph--x-large;
@include vf-list-item-icon-divisor-offset;
@include vf-list-item-horizontal-section;
- grid-column-end: span $grid-8-columns-small;
+ // Only apply custom grid colspans if there is more than one list item.
+ // If there's only one list item, it will span the full row width.
+ &:not(:only-child) {
+ grid-column-end: span $grid-8-columns-small;
- @media (min-width: $threshold-4-6-col) {
- grid-column-end: span $grid-8-columns-medium / 2;
- }
+ @media (min-width: $threshold-4-6-col) {
+ grid-column-end: span $grid-8-columns-medium / 2;
+ }
- @media (min-width: $threshold-6-12-col) {
- grid-column-end: span $grid-8-columns / 4;
+ @media (min-width: $threshold-6-12-col) {
+ grid-column-end: span $grid-8-columns / 4;
+ }
}
}
}
diff --git a/templates/docs/patterns/lists/index.md b/templates/docs/patterns/lists/index.md
index ae4dff941..c18e714f2 100644
--- a/templates/docs/patterns/lists/index.md
+++ b/templates/docs/patterns/lists/index.md
@@ -169,13 +169,19 @@ To display a list of items that flow horizontally in a grid, use `.p-list--horiz
By default, the horizontal splits items 25/25/25/25 on large, 50/50 on medium and 100% on small screens.
+For optimal behaviour, you should make sure you have enough list items to fit at least row on large screen size (4 items).
+
+### 25/75 Horizontal section
+
You can also add the `.is-25-75` modifier to reserve 25% space at the start of the list and place the remaining items in the remaining 75% space.
This is especially effective when a section heading precedes the list.
+For optimal behaviour, you should make sure you have enough list items to fit at least row on large screen size (3 items).
+