From 5bf8ac261fe91b69e457472c560c020445e0a79d Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 25 Feb 2026 16:33:03 +0000
Subject: [PATCH 01/27] Rough implementation for mobile view

---
 .../src/layouts/StandardLayout.tsx            | 362 +++---------------
 1 file changed, 55 insertions(+), 307 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 65ebfbc5994..18711289bb0 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -27,7 +27,6 @@ import { DiscussionLayout } from '../components/DiscussionLayout';
 import { FootballMatchHeaderWrapper } from '../components/FootballMatchHeaderWrapper.island';
 import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island';
 import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
 import { GuardianLabsLines } from '../components/GuardianLabsLines';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
@@ -39,13 +38,13 @@ import { MostViewedFooterData } from '../components/MostViewedFooterData.island'
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
 import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island';
 import { OnwardsUpper } from '../components/OnwardsUpper.island';
-import { RightColumn } from '../components/RightColumn';
 import { Section } from '../components/Section';
 import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
 import { Standfirst } from '../components/Standfirst';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.island';
+import { grid } from '../grid';
 import {
 	ArticleDesign,
 	type ArticleFormat,
@@ -63,239 +62,6 @@ import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
-const StandardGrid = ({
-	children,
-	isMatchReport,
-	isMedia,
-}: {
-	children: React.ReactNode;
-	isMatchReport: boolean;
-	isMedia: boolean;
-}) => (
-	<div
-		css={css`
-			/* IE Fallback */
-			display: flex;
-			flex-direction: column;
-			${until.leftCol} {
-				margin-left: 0px;
-			}
-			${from.leftCol} {
-				margin-left: 151px;
-			}
-			${from.wide} {
-				margin-left: 230px;
-			}
-
-			@supports (display: grid) {
-				display: grid;
-				width: 100%;
-				margin-left: 0;
-				grid-column-gap: 10px;
-
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column (220 - 1px border)
-					Vertical grey border
-					Main content
-					Right Column
-				*/
-				${from.wide} {
-					grid-template-columns: 219px 1px 620px 80px 300px;
-
-					${isMatchReport
-						? css`
-								grid-template-areas:
-									'title  border  headline   . right-column'
-									'.      border  standfirst . right-column'
-									'meta   border  media      . right-column'
-									'meta   border  body       . right-column'
-									'.      border  .          . right-column';
-						  `
-						: isMedia
-						? css`
-								grid-template-areas:
-									'title  border  headline   headline   .'
-									'.      border  disclaimer disclaimer right-column'
-									'meta   border  media      media      right-column'
-									'meta   border  standfirst standfirst right-column'
-									'.      border  body       body       right-column'
-									'.      border  .          .          right-column';
-						  `
-						: css`
-								grid-template-areas:
-									'title  border  headline   . right-column'
-									'.      border  standfirst . right-column'
-									'meta   border  media      . right-column'
-									'meta   border  body       . right-column'
-									'.      border  .          . right-column';
-						  `}
-				}
-			}
-
-			/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column
-					Vertical grey border
-					Main content
-					Right Column
-				*/
-			${until.wide} {
-				grid-template-columns: 140px 1px 620px 300px;
-
-				${isMatchReport
-					? css`
-							grid-template-areas:
-								'title  border  headline     right-column'
-								'.      border  standfirst   right-column'
-								'meta   border  media        right-column'
-								'meta   border  body         right-column'
-								'.      border  .            right-column';
-					  `
-					: isMedia
-					? css`
-							grid-template-areas:
-								'title  border  headline     .'
-								'.      border  disclaimer   right-column'
-								'meta   border  media        right-column'
-								'meta   border  standfirst   right-column'
-								'meta   border  body         right-column'
-								'.      border  .            right-column';
-					  `
-					: css`
-							grid-template-areas:
-								'title  border  headline     right-column'
-								'.      border  standfirst   right-column'
-								'.      border  disclaimer   right-column'
-								'meta   border  media        right-column'
-								'meta   border  body         right-column'
-								'.      border  .            right-column';
-					  `}
-			}
-
-			/*
-					Explanation of each unit of grid-template-columns
-
-					Main content
-					Right Column
-				*/
-			${until.leftCol} {
-				grid-template-columns: 620px 300px;
-				${isMatchReport
-					? css`
-							grid-template-areas:
-								'title         right-column'
-								'headline      right-column'
-								'standfirst    right-column'
-								'media         right-column'
-								'meta          right-column'
-								'body          right-column'
-								'.             right-column';
-					  `
-					: isMedia
-					? css`
-							grid-template-areas:
-								'title         .'
-								'headline      .'
-								'disclaimer    right-column'
-								'media         right-column'
-								'standfirst    right-column'
-								'meta          right-column'
-								'body          right-column'
-								'.             right-column';
-					  `
-					: css`
-							grid-template-areas:
-								'title         right-column'
-								'headline      right-column'
-								'standfirst    right-column'
-								'disclaimer    right-column'
-								'media         right-column'
-								'meta          right-column'
-								'body          right-column'
-								'.             right-column';
-					  `}
-			}
-
-			${until.desktop} {
-				grid-template-columns: 100%; /* Main content */
-				${isMatchReport
-					? css`
-							grid-template-areas:
-								'title'
-								'headline'
-								'standfirst'
-								'media'
-								'meta'
-								'body';
-					  `
-					: isMedia
-					? css`
-							grid-template-areas:
-								'title'
-								'headline'
-								'disclaimer'
-								'media'
-								'standfirst'
-								'meta'
-								'body';
-					  `
-					: css`
-							grid-template-areas:
-								'title'
-								'headline'
-								'standfirst'
-								'disclaimer'
-								'media'
-								'meta'
-								'body';
-					  `}
-			}
-
-			${until.tablet} {
-				grid-column-gap: 0px;
-
-				grid-template-columns: 100%; /* Main content */
-				${isMatchReport
-					? css`
-							grid-template-areas:
-								'media'
-								'title'
-								'headline'
-								'standfirst'
-								'meta'
-								'body';
-					  `
-					: isMedia
-					? css`
-							grid-template-areas:
-								'title'
-								'headline'
-								'disclaimer'
-								'media'
-								'standfirst'
-								'meta'
-								'body';
-					  `
-					: css`
-							grid-template-areas:
-								'media'
-								'title'
-								'headline'
-								'standfirst'
-								'disclaimer'
-								'meta'
-								'body';
-					  `}
-			}
-		`}
-	>
-		{children}
-	</div>
-);
-
 const maxWidth = css`
 	${from.desktop} {
 		max-width: 620px;
@@ -459,21 +225,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageId={article.pageId}
 					pageTags={article.tags}
 				/>
-				<Section
-					fullWidth={true}
-					showTopBorder={false}
-					backgroundColour={themePalette('--article-background')}
-					borderColour={themePalette('--article-border')}
-					innerBackgroundColour={themePalette(
-						'--article-inner-background',
-					)}
-					element="article"
-				>
-					<StandardGrid
-						isMatchReport={isMatchReport}
-						isMedia={isMedia}
-					>
-						<GridItem area="media">
+				<article>
+					<div css={css(grid.container)}>
+						<div css={css(grid.column.centre)}>
 							<div css={!isMedia && maxWidth}>
 								<MainMedia
 									format={format}
@@ -493,8 +247,13 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									contentLayout="StandardLayout"
 								/>
 							</div>
-						</GridItem>
-						<GridItem area="title" element="aside">
+						</div>
+						<aside
+							css={{
+								'&': css(grid.column.centre),
+								[from.desktop]: css(grid.column.left),
+							}}
+						>
 							<ArticleTitle
 								format={format}
 								tags={article.tags}
@@ -503,16 +262,16 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								guardianBaseURL={article.guardianBaseURL}
 								isMatch={!!footballMatchUrl}
 							/>
-						</GridItem>
+						</aside>
 
-						<GridItem area="border">
+						<div css={css(grid.column.centre)}>
 							{format.theme === ArticleSpecial.Labs ? (
 								<></>
 							) : (
 								<Border />
 							)}
-						</GridItem>
-						<GridItem area="headline">
+						</div>
+						<div css={css(grid.column.centre)}>
 							<div css={maxWidth}>
 								<ArticleHeadline
 									format={format}
@@ -525,14 +284,19 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									starRating={article.starRating}
 								/>
 							</div>
-						</GridItem>
-						<GridItem area="standfirst">
+						</div>
+						<div css={css(grid.column.centre)}>
 							<Standfirst
 								format={format}
 								standfirst={article.standfirst}
 							/>
-						</GridItem>
-						<GridItem area="meta" element="aside">
+						</div>
+						<aside
+							css={{
+								'&': css(grid.column.centre),
+								[from.desktop]: css(grid.column.left),
+							}}
+						>
 							<div css={maxWidth}>
 								<div css={stretchLines}>
 									{isWeb &&
@@ -644,8 +408,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									)}
 								</div>
 							)}
-						</GridItem>
-						<GridItem area="body">
+						</aside>
+						<div css={css(grid.column.centre)}>
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
 								<Hide until="leftCol">
@@ -781,53 +545,37 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									}
 								/>
 							</ArticleContainer>
-						</GridItem>
-						<GridItem area="right-column">
-							<div
-								css={css`
-									padding-top: ${isMedia ? 0 : 6}px;
-									height: 100%;
-									${from.desktop} {
-										/* above 980 */
-										margin-left: 20px;
-										margin-right: -20px;
-										padding-bottom: ${isMedia ? 41 : 0}px;
+						</div>
+						<div
+							css={{
+								'&': css(grid.column.centre),
+								[from.desktop]: css(grid.column.right),
+							}}
+						>
+							<Island
+								priority="feature"
+								defer={{
+									until: 'visible',
+									// Provide a much higher value for the top margin for the intersection observer
+									// This is because the most viewed would otherwise only be lazy loaded when the
+									// bottom of the container intersects with the viewport
+									rootMargin: '700px 100px',
+								}}
+							>
+								<MostViewedRightWithAd
+									format={format}
+									isPaidContent={
+										article.pageType.isPaidContent
 									}
-									${from.leftCol} {
-										/* above 1140 */
-										margin-left: 0px;
-										margin-right: 0px;
+									renderAds={isWeb && renderAds}
+									shouldHideReaderRevenue={
+										!!article.config.shouldHideReaderRevenue
 									}
-								`}
-							>
-								<RightColumn>
-									<Island
-										priority="feature"
-										defer={{
-											until: 'visible',
-											// Provide a much higher value for the top margin for the intersection observer
-											// This is because the most viewed would otherwise only be lazy loaded when the
-											// bottom of the container intersects with the viewport
-											rootMargin: '700px 100px',
-										}}
-									>
-										<MostViewedRightWithAd
-											format={format}
-											isPaidContent={
-												article.pageType.isPaidContent
-											}
-											renderAds={isWeb && renderAds}
-											shouldHideReaderRevenue={
-												!!article.config
-													.shouldHideReaderRevenue
-											}
-										/>
-									</Island>
-								</RightColumn>
-							</div>
-						</GridItem>
-					</StandardGrid>
-				</Section>
+								/>
+							</Island>
+						</div>
+					</div>
+				</article>
 
 				{isWeb && renderAds && !isLabs && (
 					<Section

From 409801e49e9964dad85578ffa40ef8fab702a24b Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 27 Feb 2026 13:57:33 +0000
Subject: [PATCH 02/27] Desktop layout

---
 .../src/layouts/StandardLayout.tsx            | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 18711289bb0..d8863ed19ba 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -79,6 +79,12 @@ const stretchLines = css`
 	}
 `;
 
+const desktopRow = (row: number) => css`
+	${from.desktop} {
+		grid-row: ${row};
+	}
+`;
+
 interface Props {
 	article: ArticleDeprecated;
 	format: ArticleFormat;
@@ -271,7 +277,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								<Border />
 							)}
 						</div>
-						<div css={css(grid.column.centre)}>
+						<div css={css([grid.column.centre, desktopRow(1)])}>
 							<div css={maxWidth}>
 								<ArticleHeadline
 									format={format}
@@ -285,17 +291,23 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								/>
 							</div>
 						</div>
-						<div css={css(grid.column.centre)}>
+						<div css={css([grid.column.centre, desktopRow(2)])}>
 							<Standfirst
 								format={format}
 								standfirst={article.standfirst}
 							/>
 						</div>
 						<aside
-							css={{
-								'&': css(grid.column.centre),
-								[from.desktop]: css(grid.column.left),
-							}}
+							css={[
+								css(grid.column.centre),
+								css`
+									${from.desktop} {
+										${grid.column.left};
+										grid-row: 3;
+										align-self: start;
+									}
+								`,
+							]}
 						>
 							<div css={maxWidth}>
 								<div css={stretchLines}>
@@ -547,10 +559,16 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							</ArticleContainer>
 						</div>
 						<div
-							css={{
-								'&': css(grid.column.centre),
-								[from.desktop]: css(grid.column.right),
-							}}
+							css={[
+								css(grid.column.centre),
+								css`
+									${from.desktop} {
+										${grid.column.right};
+										grid-row: 1;
+										align-self: start;
+									}
+								`,
+							]}
 						>
 							<Island
 								priority="feature"

From 5f472909eae1bc91fae1732741935feecdaffa09 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 27 Feb 2026 16:59:21 +0000
Subject: [PATCH 03/27] Add vertical rules to grid module

---
 dotcom-rendering/src/grid.ts                  | 80 +++++++++++++++----
 .../src/layouts/StandardLayout.tsx            | 28 +++++--
 2 files changed, 89 insertions(+), 19 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index ad089db43e1..07a2be844d5 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -151,22 +151,74 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
 // ----- API ----- //
 
 /**
- * Ask the element to span all grid columns between two grid lines. The lines
- * can be specified either by `Line` name or by number.
- * @param from The grid line to start from, either a `Line` name or a number.
- * @param to The grid line to end at, either a `Line` name or a number.
- * @returns {string} CSS to place the element on the grid.
- *
- * @example <caption>Will place the element in the centre column.</caption>
- * const styles = css`
- *   ${grid.between('centre-column-start', 'centre-column-end')}
- * `;
+ * Optional vertical grid rules.
  *
- * @example <caption>Will place the element between lines 3 and 5.</caption>
- * const styles = css`
- *   ${grid.between(3, 5)}
- * `;
+ * Usage:
+ * <div css={css`${grid.container} ${grid.verticalRules}`}>
+ *   <div className="grid-rule rule-left" />
+ *   <div className="grid-rule rule-centre" />
+ *   <div className="grid-rule rule-right" />
+ *   ...
+ * </div>
  */
+const verticalRules = `
+  ${fromBreakpoint.tablet} {
+    position: relative;
+	--centre-transform: translateX(-${columnGap});
+
+	${fromBreakpoint.leftCol} {
+		--centre-transform: translateX(calc(${columnGap} / -2));
+	}
+
+    .grid-rule {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 1px;
+		background-color: ${themePalette('--article-border')};
+		pointer-events: none;
+	}
+
+    /* LEFT OUTER RULE — where the left column starts */
+    .rule-left {
+      grid-column: left-column-start;
+      justify-self: start;
+	  transform: translateX(-${columnGap});
+    }
+
+    /* CENTRE RULE — start of centre column */
+    .rule-centre {
+      grid-column: centre-column-start;
+      justify-self: start;
+      transform: var(--centre-transform); /* centre it in gap */
+    }
+
+    /* RIGHT OUTER RULE — end of right column */
+    .rule-right {
+      grid-column: right-column-end;
+      justify-self: start;
+	  transform: translateX(-1px);
+	  ${betweenBreakpoint.tablet.and.desktop} {
+		grid-column: centre-column-end;
+	  }
+    }
+  }
+
+  ${fromBreakpoint.leftCol} {
+    .rule-left {
+      grid-column: left-column-start;
+    }
+  }
+
+  ${fromBreakpoint.wide} {
+    .rule-right {
+      grid-column: right-column-end;
+    }
+  }
+`;
+
+// ----- API ----- //
+
 const between = (from: Line | number, to: Line | number): string => `
     grid-column: ${from} / ${to};
 `;
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index d8863ed19ba..aed6330697e 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -79,8 +79,14 @@ const stretchLines = css`
 	}
 `;
 
-const desktopRow = (row: number) => css`
-	${from.desktop} {
+const tabletRow = (row: number) => css`
+	${from.tablet} {
+		grid-row: ${row};
+	}
+`;
+
+const leftColRow = (row: number) => css`
+	${from.leftCol} {
 		grid-row: ${row};
 	}
 `;
@@ -277,7 +283,13 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								<Border />
 							)}
 						</div>
-						<div css={css([grid.column.centre, desktopRow(1)])}>
+						<div
+							css={css([
+								grid.column.centre,
+								tabletRow(2),
+								leftColRow(1),
+							])}
+						>
 							<div css={maxWidth}>
 								<ArticleHeadline
 									format={format}
@@ -291,7 +303,13 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								/>
 							</div>
 						</div>
-						<div css={css([grid.column.centre, desktopRow(2)])}>
+						<div
+							css={css([
+								grid.column.centre,
+								tabletRow(3),
+								leftColRow(2),
+							])}
+						>
 							<Standfirst
 								format={format}
 								standfirst={article.standfirst}
@@ -301,7 +319,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							css={[
 								css(grid.column.centre),
 								css`
-									${from.desktop} {
+									${from.leftCol} {
 										${grid.column.left};
 										grid-row: 3;
 										align-self: start;

From dfd2eda677ff06da632ea98dda1046e51f94a9da Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 3 Mar 2026 14:31:18 +0000
Subject: [PATCH 04/27] Fix  not appearing

---
 dotcom-rendering/src/components/RightColumn.tsx | 4 ----
 dotcom-rendering/src/layouts/StandardLayout.tsx | 6 ++++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/dotcom-rendering/src/components/RightColumn.tsx b/dotcom-rendering/src/components/RightColumn.tsx
index 764a38d82ff..47bde5b8cdc 100644
--- a/dotcom-rendering/src/components/RightColumn.tsx
+++ b/dotcom-rendering/src/components/RightColumn.tsx
@@ -8,11 +8,7 @@ const hideBelow = (showFrom: Breakpoint) => css`
 	}
 
 	${from[showFrom]} {
-		height: 100%;
 		display: block;
-		flex-basis: 300px;
-		flex-grow: 0;
-		flex-shrink: 0;
 	}
 `;
 
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index aed6330697e..5cf364dbacd 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -580,10 +580,12 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							css={[
 								css(grid.column.centre),
 								css`
+									display: none;
 									${from.desktop} {
+										display: block;
+										padding-top: 6px;
 										${grid.column.right};
-										grid-row: 1;
-										align-self: start;
+										grid-row: 1 / span 999;
 									}
 								`,
 							]}

From 62d8c6ab66e6e1cdf96a98931b2ab02d71c3a4ba Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 4 Mar 2026 14:41:11 +0000
Subject: [PATCH 05/27] Roll back RightColumn changes

---
 dotcom-rendering/src/components/RightColumn.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/dotcom-rendering/src/components/RightColumn.tsx b/dotcom-rendering/src/components/RightColumn.tsx
index 47bde5b8cdc..764a38d82ff 100644
--- a/dotcom-rendering/src/components/RightColumn.tsx
+++ b/dotcom-rendering/src/components/RightColumn.tsx
@@ -8,7 +8,11 @@ const hideBelow = (showFrom: Breakpoint) => css`
 	}
 
 	${from[showFrom]} {
+		height: 100%;
 		display: block;
+		flex-basis: 300px;
+		flex-grow: 0;
+		flex-shrink: 0;
 	}
 `;
 

From e25598091b24d818a116289390e016b00e8444db Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 4 Mar 2026 17:17:13 +0000
Subject: [PATCH 06/27] Abstract area placement depending on layout

---
 .../src/layouts/StandardLayout.tsx            | 242 ++++++++++++++----
 1 file changed, 189 insertions(+), 53 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 5cf364dbacd..e5f2e5272e5 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 import { log } from '@guardian/libs';
 import {
 	from,
@@ -79,17 +79,150 @@ const stretchLines = css`
 	}
 `;
 
-const tabletRow = (row: number) => css`
-	${from.tablet} {
-		grid-row: ${row};
-	}
-`;
+type LayoutType = 'standard' | 'matchReport' | 'media' | 'labs';
 
-const leftColRow = (row: number) => css`
-	${from.leftCol} {
-		grid-row: ${row};
-	}
-`;
+type Area =
+	| 'title'
+	| 'headline'
+	| 'standfirst'
+	| 'main-media'
+	| 'meta'
+	| 'body'
+	| 'right-column'
+	| 'match-nav'
+	| 'match-tabs';
+
+type LayoutRows = Partial<
+	Record<
+		Area,
+		{ mobile?: number; tablet?: number; leftCol?: number; desktop?: number }
+	>
+>;
+
+const rowMaps: Record<LayoutType, LayoutRows> = {
+	standard: {
+		title: { tablet: 1 },
+		headline: { tablet: 2, leftCol: 1 },
+		standfirst: { tablet: 3, leftCol: 2 },
+		'main-media': { tablet: 4, leftCol: 3 },
+		meta: { tablet: 5, leftCol: 3 },
+	},
+	matchReport: {
+		'match-nav': { tablet: 1 },
+		'match-tabs': { tablet: 2 },
+		title: { tablet: 3, leftCol: 1 },
+		headline: { tablet: 4, leftCol: 3 },
+		standfirst: { tablet: 5, leftCol: 4 },
+		'main-media': { tablet: 6, leftCol: 5 },
+		meta: { tablet: 7, leftCol: 5 },
+	},
+	media: {
+		title: { mobile: 1, tablet: 1 },
+		headline: { mobile: 2, tablet: 2, leftCol: 1 },
+		'main-media': { mobile: 3, tablet: 3, leftCol: 2 },
+		standfirst: { mobile: 4, tablet: 4, leftCol: 3 },
+		meta: { mobile: 5, tablet: 5, leftCol: 2 },
+	},
+	labs: {
+		title: { tablet: 1 },
+		headline: { tablet: 2, leftCol: 1 },
+		standfirst: { tablet: 3, leftCol: 2 },
+		'main-media': { tablet: 3 },
+		meta: { tablet: 4, leftCol: 3 },
+		'match-nav': { tablet: 1 },
+		'match-tabs': { tablet: 1 },
+	},
+};
+
+const rowCss = (area: Area, layoutType: LayoutType) => {
+	const rows = rowMaps[layoutType][area] ?? {};
+
+	return css([
+		rows.mobile != null &&
+			css`
+				${until.tablet} {
+					grid-row: ${rows.mobile};
+				}
+			`,
+		rows.tablet != null &&
+			css`
+				${from.tablet} {
+					grid-row: ${rows.tablet};
+				}
+			`,
+		rows.leftCol != null &&
+			css`
+				${from.leftCol} {
+					grid-row: ${rows.leftCol};
+				}
+			`,
+		rows.desktop != null &&
+			css`
+				${from.desktop} {
+					grid-row: ${rows.desktop};
+				}
+			`,
+	]);
+};
+interface GridItemProps {
+	area: Area;
+	layoutType: LayoutType;
+	columns?: {
+		tablet?: 'left' | 'centre' | 'right';
+		desktop?: 'left' | 'centre' | 'right';
+		leftCol?: 'left' | 'centre' | 'right';
+	};
+	element?: 'div' | 'article' | 'main' | 'aside' | 'section';
+	customCss?: SerializedStyles;
+	children: React.ReactNode;
+}
+
+const GridItem = ({
+	area,
+	layoutType,
+	columns,
+	element: Element = 'div',
+	customCss,
+	children,
+}: GridItemProps) => {
+	const mobileCol = 'centre';
+	const tabletCol = columns?.tablet ?? mobileCol;
+	const leftColCol = columns?.leftCol ?? mobileCol;
+	const desktopCol = columns?.desktop ?? mobileCol;
+
+	return (
+		<Element
+			data-gu-name={area}
+			css={css([
+				grid.column[mobileCol],
+				rowCss(area, layoutType),
+				customCss,
+
+				// Override column at breakpoints if specified
+				columns?.tablet &&
+					css`
+						${from.tablet} {
+							${grid.column[tabletCol]};
+						}
+					`,
+				columns?.desktop &&
+					css`
+						${from.desktop} {
+							${grid.column[desktopCol]};
+						}
+					`,
+				columns?.leftCol &&
+					css`
+						${from.leftCol} {
+							${grid.column[leftColCol]};
+						}
+					`,
+			])}
+		>
+			{children}
+		</Element>
+	);
+};
 
 interface Props {
 	article: ArticleDeprecated;
@@ -163,6 +296,14 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = canRenderAds(article);
 
+	const layoutType: LayoutType = isLabs
+		? 'labs'
+		: isMatchReport
+		? 'matchReport'
+		: isMedia
+		? 'media'
+		: 'standard';
+
 	return (
 		<>
 			{isWeb && (
@@ -283,12 +424,10 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								<Border />
 							)}
 						</div>
-						<div
-							css={css([
-								grid.column.centre,
-								tabletRow(2),
-								leftColRow(1),
-							])}
+						<GridItem
+							area="headline"
+							layoutType={layoutType}
+							element="div"
 						>
 							<div css={maxWidth}>
 								<ArticleHeadline
@@ -302,30 +441,22 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									starRating={article.starRating}
 								/>
 							</div>
-						</div>
-						<div
-							css={css([
-								grid.column.centre,
-								tabletRow(3),
-								leftColRow(2),
-							])}
+						</GridItem>
+						<GridItem
+							area="standfirst"
+							layoutType={layoutType}
+							element="div"
 						>
 							<Standfirst
 								format={format}
 								standfirst={article.standfirst}
 							/>
-						</div>
-						<aside
-							css={[
-								css(grid.column.centre),
-								css`
-									${from.leftCol} {
-										${grid.column.left};
-										grid-row: 3;
-										align-self: start;
-									}
-								`,
-							]}
+						</GridItem>
+						<GridItem
+							area="meta"
+							layoutType={layoutType}
+							columns={{ leftCol: 'left' }}
+							element="aside"
 						>
 							<div css={maxWidth}>
 								<div css={stretchLines}>
@@ -438,8 +569,12 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									)}
 								</div>
 							)}
-						</aside>
-						<div css={css(grid.column.centre)}>
+						</GridItem>
+						<GridItem
+							area="body"
+							layoutType={layoutType}
+							element="div"
+						>
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
 								<Hide until="leftCol">
@@ -575,20 +710,21 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									}
 								/>
 							</ArticleContainer>
-						</div>
-						<div
-							css={[
-								css(grid.column.centre),
-								css`
-									display: none;
-									${from.desktop} {
-										display: block;
-										padding-top: 6px;
-										${grid.column.right};
-										grid-row: 1 / span 999;
-									}
-								`,
-							]}
+						</GridItem>
+						<GridItem
+							area="right-column"
+							layoutType={layoutType}
+							columns={{ desktop: 'right' }}
+							customCss={css`
+								display: none;
+								${from.desktop} {
+									display: block;
+									padding-top: 6px;
+									${grid.column.right};
+									grid-row: 1 / span 999;
+								}
+							`}
+							element="aside"
 						>
 							<Island
 								priority="feature"
@@ -611,7 +747,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									}
 								/>
 							</Island>
-						</div>
+						</GridItem>
 					</div>
 				</article>
 

From 9505e179efbda9d58b40b78eed879c85e6602dea Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 5 Mar 2026 14:54:12 +0000
Subject: [PATCH 07/27] Human readable furniture row configuration

---
 .../src/layouts/StandardLayout.tsx            |  86 +---------
 .../src/layouts/lib/furnitureLayouts.ts       | 159 ++++++++++++++++++
 2 files changed, 160 insertions(+), 85 deletions(-)
 create mode 100644 dotcom-rendering/src/layouts/lib/furnitureLayouts.ts

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index e5f2e5272e5..cadc3c9a1b2 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -60,6 +60,7 @@ import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
+import { type Area, type LayoutType, rowCss } from './lib/furnitureLayouts';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
 const maxWidth = css`
@@ -79,91 +80,6 @@ const stretchLines = css`
 	}
 `;
 
-type LayoutType = 'standard' | 'matchReport' | 'media' | 'labs';
-
-type Area =
-	| 'title'
-	| 'headline'
-	| 'standfirst'
-	| 'main-media'
-	| 'meta'
-	| 'body'
-	| 'right-column'
-	| 'match-nav'
-	| 'match-tabs';
-
-type LayoutRows = Partial<
-	Record<
-		Area,
-		{ mobile?: number; tablet?: number; leftCol?: number; desktop?: number }
-	>
->;
-
-const rowMaps: Record<LayoutType, LayoutRows> = {
-	standard: {
-		title: { tablet: 1 },
-		headline: { tablet: 2, leftCol: 1 },
-		standfirst: { tablet: 3, leftCol: 2 },
-		'main-media': { tablet: 4, leftCol: 3 },
-		meta: { tablet: 5, leftCol: 3 },
-	},
-	matchReport: {
-		'match-nav': { tablet: 1 },
-		'match-tabs': { tablet: 2 },
-		title: { tablet: 3, leftCol: 1 },
-		headline: { tablet: 4, leftCol: 3 },
-		standfirst: { tablet: 5, leftCol: 4 },
-		'main-media': { tablet: 6, leftCol: 5 },
-		meta: { tablet: 7, leftCol: 5 },
-	},
-	media: {
-		title: { mobile: 1, tablet: 1 },
-		headline: { mobile: 2, tablet: 2, leftCol: 1 },
-		'main-media': { mobile: 3, tablet: 3, leftCol: 2 },
-		standfirst: { mobile: 4, tablet: 4, leftCol: 3 },
-		meta: { mobile: 5, tablet: 5, leftCol: 2 },
-	},
-	labs: {
-		title: { tablet: 1 },
-		headline: { tablet: 2, leftCol: 1 },
-		standfirst: { tablet: 3, leftCol: 2 },
-		'main-media': { tablet: 3 },
-		meta: { tablet: 4, leftCol: 3 },
-		'match-nav': { tablet: 1 },
-		'match-tabs': { tablet: 1 },
-	},
-};
-
-const rowCss = (area: Area, layoutType: LayoutType) => {
-	const rows = rowMaps[layoutType][area] ?? {};
-
-	return css([
-		rows.mobile != null &&
-			css`
-				${until.tablet} {
-					grid-row: ${rows.mobile};
-				}
-			`,
-		rows.tablet != null &&
-			css`
-				${from.tablet} {
-					grid-row: ${rows.tablet};
-				}
-			`,
-		rows.leftCol != null &&
-			css`
-				${from.leftCol} {
-					grid-row: ${rows.leftCol};
-				}
-			`,
-		rows.desktop != null &&
-			css`
-				${from.desktop} {
-					grid-row: ${rows.desktop};
-				}
-			`,
-	]);
-};
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
new file mode 100644
index 00000000000..c13ba4f337d
--- /dev/null
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -0,0 +1,159 @@
+import { css, type SerializedStyles } from '@emotion/react';
+import { from, until } from '@guardian/source/foundations';
+
+export type LayoutType = 'standard' | 'matchReport' | 'media' | 'labs';
+
+export type Area =
+	// Common areas
+	| 'title'
+	| 'headline'
+	| 'standfirst'
+	| 'main-media'
+	| 'meta'
+	| 'body'
+	| 'right-column'
+	// Match report specific areas
+	| 'match-nav'
+	| 'match-tabs';
+
+type LayoutRows = Partial<
+	Record<
+		Area,
+		{ mobile?: number; tablet?: number; leftCol?: number; desktop?: number }
+	>
+>;
+
+type BreakpointRows = Area[][];
+
+type LayoutDefinition = {
+	mobile?: BreakpointRows;
+	tablet?: BreakpointRows;
+	leftCol?: BreakpointRows;
+};
+
+const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
+	standard: {
+		tablet: [
+			['title'],
+			['headline'],
+			['standfirst'],
+			['main-media'],
+			['meta'],
+		],
+
+		leftCol: [
+			['title', 'headline'],
+			['standfirst'],
+			['meta', 'main-media'],
+		],
+	},
+	matchReport: {
+		tablet: [
+			['match-nav'],
+			['match-tabs'],
+			['title'],
+			['headline'],
+			['standfirst'],
+			['main-media'],
+			['meta'],
+		],
+		leftCol: [
+			['title', 'match-nav'],
+			['match-tabs'],
+			['headline'],
+			['meta', 'main-media'],
+		],
+	},
+	media: {
+		mobile: [
+			['title'],
+			['headline'],
+			['main-media'],
+			['standfirst'],
+			['meta'],
+		],
+		tablet: [
+			['title'],
+			['headline'],
+			['main-media'],
+			['standfirst'],
+			['meta'],
+		],
+		leftCol: [
+			['title', 'headline'],
+			['meta', 'main-media'],
+			['standfirst'],
+		],
+	},
+	labs: {
+		tablet: [
+			['title'],
+			['headline'],
+			['standfirst'],
+			['main-media'],
+			['meta'],
+		],
+		leftCol: [
+			['title', 'headline'],
+			['standfirst'],
+			['meta', 'main-media'],
+		],
+	},
+};
+
+const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
+	const map: LayoutRows = {} as LayoutRows;
+
+	const apply = (
+		rows: Area[][] | undefined,
+		breakpoint: 'mobile' | 'tablet' | 'leftCol',
+	) => {
+		if (!rows) return;
+
+		for (const [index, areas] of rows.entries()) {
+			const row = index + 1;
+
+			for (const area of areas) {
+				map[area] ??= {};
+				map[area][breakpoint] = row;
+			}
+		}
+	};
+
+	apply(layout.mobile, 'mobile');
+	apply(layout.tablet, 'tablet');
+	apply(layout.leftCol, 'leftCol');
+
+	return map;
+};
+
+const rowMaps = Object.fromEntries(
+	Object.entries(furnitureRowLayouts).map(([name, layout]) => [
+		name,
+		buildRowMap(layout),
+	]),
+) as Record<LayoutType, LayoutRows>;
+
+const breakpointQueries = {
+	mobile: until.tablet,
+	tablet: from.tablet,
+	leftCol: from.leftCol,
+	desktop: from.desktop,
+} as const;
+
+export const rowCss = (
+	area: Area,
+	layoutType: LayoutType,
+): SerializedStyles => {
+	const rows = rowMaps[layoutType][area] ?? {};
+
+	return css(
+		Object.entries(rows).map(
+			([bp, row]) => css`
+				${breakpointQueries[bp as keyof typeof breakpointQueries]} {
+					grid-row: ${row};
+				}
+			`,
+		),
+	);
+};

From 963f1086d189cd1939ae37dc59d39326493ad7c7 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 6 Mar 2026 12:52:55 +0000
Subject: [PATCH 08/27] Review polishes and refactors

---
 dotcom-rendering/src/grid.ts                  | 89 ++++++++++---------
 .../src/layouts/StandardLayout.tsx            | 51 ++++-------
 .../src/layouts/lib/furnitureLayouts.ts       | 25 +-----
 3 files changed, 67 insertions(+), 98 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 07a2be844d5..2d2d2f586e6 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -151,69 +151,70 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
 // ----- API ----- //
 
 /**
- * Optional vertical grid rules.
+ * Render Guardian grid vertical rules.
+ *
+ * Left and right rules are always present.
+ * A centre rule can optionally be enabled.
  *
  * Usage:
- * <div css={css`${grid.container} ${grid.verticalRules}`}>
- *   <div className="grid-rule rule-left" />
- *   <div className="grid-rule rule-centre" />
- *   <div className="grid-rule rule-right" />
- *   ...
- * </div>
+ * css([grid.container, grid.verticalRules()])
+ * css([grid.container, grid.verticalRules({ centre: true })])
  */
-const verticalRules = `
+const verticalRules = (options: VerticalRuleOptions = {}): string => `
   ${fromBreakpoint.tablet} {
     position: relative;
-	--centre-transform: translateX(-${columnGap});
 
-	${fromBreakpoint.leftCol} {
-		--centre-transform: translateX(calc(${columnGap} / -2));
-	}
+    --centre-transform: translateX(-${columnGap});
 
-    .grid-rule {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 1px;
-		background-color: ${themePalette('--article-border')};
-		pointer-events: none;
-	}
+    ${fromBreakpoint.leftCol} {
+      --centre-transform: translateX(calc(${columnGap} / -2));
+    }
 
-    /* LEFT OUTER RULE — where the left column starts */
-    .rule-left {
-      grid-column: left-column-start;
-      justify-self: start;
-	  transform: translateX(-${columnGap});
+    &::before,
+    &::after
+    ${options.centre ? ', & > *:first-child::before' : ''} {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: ${themePalette('--article-border')};
+      pointer-events: none;
+      content: '';
     }
 
-    /* CENTRE RULE — start of centre column */
-    .rule-centre {
+    /* LEFT OUTER RULE */
+    &::before {
       grid-column: centre-column-start;
       justify-self: start;
-      transform: var(--centre-transform); /* centre it in gap */
+      transform: translateX(-${columnGap});
+
+      ${fromBreakpoint.leftCol} {
+        grid-column: left-column-start;
+      }
     }
 
-    /* RIGHT OUTER RULE — end of right column */
-    .rule-right {
+    /* RIGHT OUTER RULE */
+    &::after {
       grid-column: right-column-end;
       justify-self: start;
-	  transform: translateX(-1px);
-	  ${betweenBreakpoint.tablet.and.desktop} {
-		grid-column: centre-column-end;
-	  }
-    }
-  }
+      transform: translateX(-1px);
 
-  ${fromBreakpoint.leftCol} {
-    .rule-left {
-      grid-column: left-column-start;
+      ${betweenBreakpoint.tablet.and.desktop} {
+        grid-column: centre-column-end;
+      }
     }
-  }
 
-  ${fromBreakpoint.wide} {
-    .rule-right {
-      grid-column: right-column-end;
-    }
+    ${
+		options.centre
+			? `
+    /* CENTRE RULE */
+    & > *:first-child::before {
+      grid-column: centre-column-start;
+      justify-self: start;
+      transform: var(--centre-transform);
+    }`
+			: ''
+	}
   }
 `;
 
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index cadc3c9a1b2..a98662b8dcd 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -101,39 +101,27 @@ const GridItem = ({
 	customCss,
 	children,
 }: GridItemProps) => {
-	const mobileCol = 'centre';
-	const tabletCol = columns?.tablet ?? mobileCol;
-	const leftColCol = columns?.leftCol ?? mobileCol;
-	const desktopCol = columns?.desktop ?? mobileCol;
+	const columnCss = (columnsConfig?: GridItemProps['columns']) => [
+		grid.column.centre,
+		Object.entries({
+			tablet: columnsConfig?.tablet,
+			desktop: columnsConfig?.desktop,
+			leftCol: columnsConfig?.leftCol,
+		})
+			.filter(([, value]) => value != null)
+			.map(
+				([bp, col]) => css`
+					${from[bp as keyof typeof from]} {
+						${grid.column[col!]};
+					}
+				`,
+			),
+	];
 
 	return (
 		<Element
 			data-gu-name={area}
-			css={css([
-				grid.column[mobileCol],
-				rowCss(area, layoutType),
-				customCss,
-
-				// Override column at breakpoints if specified
-				columns?.tablet &&
-					css`
-						${from.tablet} {
-							${grid.column[tabletCol]};
-						}
-					`,
-				columns?.desktop &&
-					css`
-						${from.desktop} {
-							${grid.column[desktopCol]};
-						}
-					`,
-				columns?.leftCol &&
-					css`
-						${from.leftCol} {
-							${grid.column[leftColCol]};
-						}
-					`,
-			])}
+			css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
 		>
 			{children}
 		</Element>
@@ -212,9 +200,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = canRenderAds(article);
 
-	const layoutType: LayoutType = isLabs
-		? 'labs'
-		: isMatchReport
+	const layoutType: LayoutType = isMatchReport
 		? 'matchReport'
 		: isMedia
 		? 'media'
@@ -636,7 +622,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								${from.desktop} {
 									display: block;
 									padding-top: 6px;
-									${grid.column.right};
 									grid-row: 1 / span 999;
 								}
 							`}
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index c13ba4f337d..2bab7eecc63 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -1,7 +1,7 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
 
-export type LayoutType = 'standard' | 'matchReport' | 'media' | 'labs';
+export type LayoutType = 'standard' | 'matchReport' | 'media';
 
 export type Area =
 	// Common areas
@@ -13,8 +13,7 @@ export type Area =
 	| 'body'
 	| 'right-column'
 	// Match report specific areas
-	| 'match-nav'
-	| 'match-tabs';
+	| 'match-summary';
 
 type LayoutRows = Partial<
 	Record<
@@ -49,8 +48,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 	matchReport: {
 		tablet: [
-			['match-nav'],
-			['match-tabs'],
+			['match-summary'],
 			['title'],
 			['headline'],
 			['standfirst'],
@@ -58,8 +56,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['meta'],
 		],
 		leftCol: [
-			['title', 'match-nav'],
-			['match-tabs'],
+			['title', 'match-summary'],
 			['headline'],
 			['meta', 'main-media'],
 		],
@@ -85,20 +82,6 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['standfirst'],
 		],
 	},
-	labs: {
-		tablet: [
-			['title'],
-			['headline'],
-			['standfirst'],
-			['main-media'],
-			['meta'],
-		],
-		leftCol: [
-			['title', 'headline'],
-			['standfirst'],
-			['meta', 'main-media'],
-		],
-	},
 };
 
 const buildRowMap = (layout: LayoutDefinition): LayoutRows => {

From 4a57d9170fadf6b55395b11f0d89e9a6d1e388da Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 10 Mar 2026 10:13:16 +0000
Subject: [PATCH 09/27] Adjust media furniture layout

---
 .../src/layouts/StandardLayout.tsx            | 93 ++++++++++++-------
 .../src/layouts/lib/furnitureLayouts.ts       |  2 +-
 2 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index a98662b8dcd..cea5b43947f 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -80,6 +80,26 @@ const stretchLines = css`
 	}
 `;
 
+const spanCentreToRightColumnFromDesktop = css`
+	${from.desktop} {
+		${grid.between('centre-column-start', 'right-column-start')};
+	}
+`;
+
+const rightColumnCss = (isMedia: boolean) => css`
+	display: none;
+
+	${from.desktop} {
+		display: block;
+		padding-top: 6px;
+		grid-row: ${isMedia ? 3 : 1} / span 999;
+	}
+
+	${from.leftCol} {
+		grid-row: ${isMedia ? 2 : 1} / span 999;
+	}
+`;
+
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
@@ -88,11 +108,28 @@ interface GridItemProps {
 		desktop?: 'left' | 'centre' | 'right';
 		leftCol?: 'left' | 'centre' | 'right';
 	};
-	element?: 'div' | 'article' | 'main' | 'aside' | 'section';
+	element?: 'div' | 'aside';
 	customCss?: SerializedStyles;
 	children: React.ReactNode;
 }
 
+const columnCss = (columnsConfig?: GridItemProps['columns']) => [
+	grid.column.centre,
+	Object.entries({
+		tablet: columnsConfig?.tablet,
+		desktop: columnsConfig?.desktop,
+		leftCol: columnsConfig?.leftCol,
+	})
+		.filter(([, value]) => value != null)
+		.map(
+			([bp, col]) => css`
+				${from[bp as keyof typeof from]} {
+					${grid.column[col!]};
+				}
+			`,
+		),
+];
+
 const GridItem = ({
 	area,
 	layoutType,
@@ -100,33 +137,14 @@ const GridItem = ({
 	element: Element = 'div',
 	customCss,
 	children,
-}: GridItemProps) => {
-	const columnCss = (columnsConfig?: GridItemProps['columns']) => [
-		grid.column.centre,
-		Object.entries({
-			tablet: columnsConfig?.tablet,
-			desktop: columnsConfig?.desktop,
-			leftCol: columnsConfig?.leftCol,
-		})
-			.filter(([, value]) => value != null)
-			.map(
-				([bp, col]) => css`
-					${from[bp as keyof typeof from]} {
-						${grid.column[col!]};
-					}
-				`,
-			),
-	];
-
-	return (
-		<Element
-			data-gu-name={area}
-			css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
-		>
-			{children}
-		</Element>
-	);
-};
+}: GridItemProps) => (
+	<Element
+		data-gu-name={area}
+		css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
+	>
+		{children}
+	</Element>
+);
 
 interface Props {
 	article: ArticleDeprecated;
@@ -348,6 +366,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="standfirst"
 							layoutType={layoutType}
 							element="div"
+							customCss={
+								isMedia
+									? spanCentreToRightColumnFromDesktop
+									: undefined
+							}
 						>
 							<Standfirst
 								format={format}
@@ -476,6 +499,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="body"
 							layoutType={layoutType}
 							element="div"
+							customCss={
+								isMedia
+									? spanCentreToRightColumnFromDesktop
+									: undefined
+							}
 						>
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
@@ -617,14 +645,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="right-column"
 							layoutType={layoutType}
 							columns={{ desktop: 'right' }}
-							customCss={css`
-								display: none;
-								${from.desktop} {
-									display: block;
-									padding-top: 6px;
-									grid-row: 1 / span 999;
-								}
-							`}
+							customCss={rightColumnCss(isMedia)}
 							element="aside"
 						>
 							<Island
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 2bab7eecc63..45d7781a2a3 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -12,7 +12,7 @@ export type Area =
 	| 'meta'
 	| 'body'
 	| 'right-column'
-	// Match report specific areas
+	// Match report specific area
 	| 'match-summary';
 
 type LayoutRows = Partial<

From d9e262999ab934c9f44f383260bb8677a0abee22 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 10 Mar 2026 17:00:44 +0000
Subject: [PATCH 10/27] More consistent row and column grid styling abstraction

---
 dotcom-rendering/src/grid.ts                  |  2 +-
 .../src/layouts/StandardLayout.tsx            | 39 +----------
 .../src/layouts/lib/furnitureLayouts.ts       | 64 +++++++++++++++++--
 3 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 2d2d2f586e6..32efd6fe57a 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -13,7 +13,7 @@ import { palette } from './palette';
  * Named CSS grid lines, based on the three columns commonly used for Guardian
  * layouts.
  */
-type Line =
+export type Line =
 	| 'grid-start'
 	| 'left-column-start'
 	| 'left-column-end'
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index cea5b43947f..504fc2e7908 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -60,7 +60,7 @@ import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { type Area, type LayoutType, rowCss } from './lib/furnitureLayouts';
+import { type Area, gridCss, type LayoutType } from './lib/furnitureLayouts';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
 const maxWidth = css`
@@ -80,21 +80,13 @@ const stretchLines = css`
 	}
 `;
 
-const spanCentreToRightColumnFromDesktop = css`
-	${from.desktop} {
-		${grid.between('centre-column-start', 'right-column-start')};
-	}
-`;
-
 const rightColumnCss = (isMedia: boolean) => css`
 	display: none;
-
 	${from.desktop} {
 		display: block;
 		padding-top: 6px;
 		grid-row: ${isMedia ? 3 : 1} / span 999;
 	}
-
 	${from.leftCol} {
 		grid-row: ${isMedia ? 2 : 1} / span 999;
 	}
@@ -113,23 +105,6 @@ interface GridItemProps {
 	children: React.ReactNode;
 }
 
-const columnCss = (columnsConfig?: GridItemProps['columns']) => [
-	grid.column.centre,
-	Object.entries({
-		tablet: columnsConfig?.tablet,
-		desktop: columnsConfig?.desktop,
-		leftCol: columnsConfig?.leftCol,
-	})
-		.filter(([, value]) => value != null)
-		.map(
-			([bp, col]) => css`
-				${from[bp as keyof typeof from]} {
-					${grid.column[col!]};
-				}
-			`,
-		),
-];
-
 const GridItem = ({
 	area,
 	layoutType,
@@ -140,7 +115,7 @@ const GridItem = ({
 }: GridItemProps) => (
 	<Element
 		data-gu-name={area}
-		css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
+		css={css([gridCss(area, layoutType, columns), customCss])}
 	>
 		{children}
 	</Element>
@@ -366,11 +341,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="standfirst"
 							layoutType={layoutType}
 							element="div"
-							customCss={
-								isMedia
-									? spanCentreToRightColumnFromDesktop
-									: undefined
-							}
 						>
 							<Standfirst
 								format={format}
@@ -499,11 +469,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="body"
 							layoutType={layoutType}
 							element="div"
-							customCss={
-								isMedia
-									? spanCentreToRightColumnFromDesktop
-									: undefined
-							}
 						>
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 45d7781a2a3..119afea1876 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -1,5 +1,6 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
+import { grid, type Line } from '../../grid';
 
 export type LayoutType = 'standard' | 'matchReport' | 'media';
 
@@ -18,7 +19,7 @@ export type Area =
 type LayoutRows = Partial<
 	Record<
 		Area,
-		{ mobile?: number; tablet?: number; leftCol?: number; desktop?: number }
+		{ mobile?: number; tablet?: number; desktop?: number; leftCol?: number }
 	>
 >;
 
@@ -27,6 +28,7 @@ type BreakpointRows = Area[][];
 type LayoutDefinition = {
 	mobile?: BreakpointRows;
 	tablet?: BreakpointRows;
+	desktop?: BreakpointRows;
 	leftCol?: BreakpointRows;
 };
 
@@ -84,12 +86,37 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 };
 
+type BreakpointColumns = Partial<
+	Record<
+		'mobile' | 'tablet' | 'desktop' | 'leftCol',
+		Column | [Line | number, Line | number]
+	>
+>;
+
+type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
+
+const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
+	standard: {},
+	media: {
+		'main-media': {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
+		standfirst: {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
+		body: {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
+	},
+	matchReport: {},
+};
+
 const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
 	const map: LayoutRows = {} as LayoutRows;
 
 	const apply = (
 		rows: Area[][] | undefined,
-		breakpoint: 'mobile' | 'tablet' | 'leftCol',
+		breakpoint: 'mobile' | 'tablet' | 'desktop' | 'leftCol',
 	) => {
 		if (!rows) return;
 
@@ -105,6 +132,7 @@ const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
 
 	apply(layout.mobile, 'mobile');
 	apply(layout.tablet, 'tablet');
+	apply(layout.desktop, 'desktop');
 	apply(layout.leftCol, 'leftCol');
 
 	return map;
@@ -124,13 +152,20 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
-export const rowCss = (
+type Column = 'left' | 'centre' | 'right';
+
+type ColumnConfig = Partial<Record<'tablet' | 'desktop' | 'leftCol', Column>>;
+
+export const gridCss = (
 	area: Area,
 	layoutType: LayoutType,
+	columnsOverride?: ColumnConfig,
 ): SerializedStyles => {
 	const rows = rowMaps[layoutType][area] ?? {};
+	const columns = furnitureColumnLayouts[layoutType][area] ?? {};
 
-	return css(
+	return css([
+		grid.column.centre, // default
 		Object.entries(rows).map(
 			([bp, row]) => css`
 				${breakpointQueries[bp as keyof typeof breakpointQueries]} {
@@ -138,5 +173,24 @@ export const rowCss = (
 				}
 			`,
 		),
-	);
+		Object.entries(columns).map(([bp, colOrSpan]) => {
+			const colStyle = Array.isArray(colOrSpan)
+				? grid.between(colOrSpan[0], colOrSpan[1])
+				: grid.column[colOrSpan as keyof typeof grid.column];
+
+			return css`
+				${from[bp as keyof typeof from]} {
+					${colStyle};
+				}
+			`;
+		}),
+		columnsOverride &&
+			Object.entries(columnsOverride).map(
+				([bp, col]) => css`
+					${from[bp as keyof typeof from]} {
+						${grid.column[col as keyof typeof grid.column]};
+					}
+				`,
+			),
+	]);
 };

From eb4a46aa3f7460bbd4d9ee0a94c8d4d9a177e7c9 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 11 Mar 2026 10:02:20 +0000
Subject: [PATCH 11/27] Dom review polishes

---
 dotcom-rendering/src/grid.ts                  |  59 +-
 .../src/layouts/StandardLayout.tsx            | 619 ++++++++++--------
 2 files changed, 355 insertions(+), 323 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 32efd6fe57a..62f9d244a9c 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -13,7 +13,7 @@ import { palette } from './palette';
  * Named CSS grid lines, based on the three columns commonly used for Guardian
  * layouts.
  */
-export type Line =
+type Line =
 	| 'grid-start'
 	| 'left-column-start'
 	| 'left-column-end'
@@ -110,44 +110,6 @@ const optionalCentreRule = `/* CENTRE RULE */
 	  }
     }`;
 
-const verticalRules = (options: VerticalRuleOptions = {}): string => `
-  ${fromBreakpoint.tablet} {
-    position: relative;
-
-    &::before,
-    &::after
-    ${options.centre ? ', & > *:first-child::before' : ''} {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 1px;
-      background-color: ${palette('--article-border')};
-      content: '';
-    }
-
-    /* LEFT OUTER RULE */
-    &::before {
-      grid-column: centre-column-start;
-      transform: translateX(-${columnGap});
-
-      ${fromBreakpoint.leftCol} {
-        grid-column: left-column-start;
-      }
-    }
-
-    /* RIGHT OUTER RULE */
-    &::after {
-      grid-column: right-column-end;
-      transform: translateX(-1px);
-
-      ${betweenBreakpoint.tablet.and.desktop} {
-        grid-column: centre-column-end;
-      }
-    }
-
-    ${options.centre ? optionalCentreRule : ''}
-`;
-
 // ----- API ----- //
 
 /**
@@ -167,7 +129,7 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
     --centre-transform: translateX(-${columnGap});
 
     ${fromBreakpoint.leftCol} {
-      --centre-transform: translateX(calc(${columnGap} / -2));
+      --centre-transform: translateX(calc(-${columnGap} / 2));
     }
 
     &::before,
@@ -177,7 +139,7 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
       top: 0;
       bottom: 0;
       width: 1px;
-      background-color: ${themePalette('--article-border')};
+      background-color: ${palette('--article-border')};
       pointer-events: none;
       content: '';
     }
@@ -204,18 +166,7 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
       }
     }
 
-    ${
-		options.centre
-			? `
-    /* CENTRE RULE */
-    & > *:first-child::before {
-      grid-column: centre-column-start;
-      justify-self: start;
-      transform: var(--centre-transform);
-    }`
-			: ''
-	}
-  }
+    ${options.centre ? optionalCentreRule : ''}
 `;
 
 // ----- API ----- //
@@ -304,6 +255,8 @@ const grid = {
 	verticalRules,
 } as const;
 
+export type { Line };
+
 // ----- Exports ----- //
 
 export { grid };
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 504fc2e7908..2de882e4a55 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -325,209 +325,219 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							element="div"
 						>
 							<div css={maxWidth}>
-								<ArticleHeadline
-									format={format}
-									headlineString={article.headline}
-									tags={article.tags}
-									byline={article.byline}
-									webPublicationDateDeprecated={
-										article.webPublicationDateDeprecated
-									}
-									starRating={article.starRating}
-								/>
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<GetMatchNav
+										matchUrl={footballMatchUrl}
+										format={format}
+										headlineString={article.headline}
+										tags={article.tags}
+										webPublicationDateDeprecated={
+											article.webPublicationDateDeprecated
+										}
+									/>
+								</Island>
+							</div>
+							<div css={maxWidth}>
+								<Island
+									priority="critical"
+									defer={{ until: 'visible' }}
+								>
+									<GetMatchTabs
+										matchUrl={footballMatchUrl}
+										format={format}
+									/>
+								</Island>
 							</div>
 						</GridItem>
-						<GridItem
-							area="standfirst"
-							layoutType={layoutType}
-							element="div"
-						>
-							<Standfirst
+					)}
+					<GridItem
+						area="main-media"
+						layoutType={layoutType}
+						element="div"
+					>
+						<div css={!isMedia && maxWidth}>
+							<MainMedia
 								format={format}
-								standfirst={article.standfirst}
+								elements={article.mainMediaElements}
+								host={host}
+								pageId={article.pageId}
+								webTitle={article.webTitle}
+								ajaxUrl={article.config.ajaxUrl}
+								abTests={article.config.abTests}
+								switches={article.config.switches}
+								isAdFreeUser={article.isAdFreeUser}
+								isSensitive={article.config.isSensitive}
+								editionId={article.editionId}
+								hideCaption={isMedia}
+								shouldHideAds={article.shouldHideAds}
+								contentType={article.contentType}
+								contentLayout="StandardLayout"
 							/>
-						</GridItem>
+						</div>
+					</GridItem>
+					{!applyFootballRedesign && (
 						<GridItem
-							area="meta"
+							area="title"
 							layoutType={layoutType}
 							columns={{ leftCol: 'left' }}
 							element="aside"
 						>
-							<div css={maxWidth}>
-								<div css={stretchLines}>
-									{isWeb &&
-									format.theme === ArticleSpecial.Labs &&
-									format.design !== ArticleDesign.Video ? (
-										<GuardianLabsLines />
-									) : (
-										<DecideLines
-											format={format}
-											color={themePalette(
-												'--article-border',
-											)}
-										/>
-									)}
-								</div>
-							</div>
-							{isApps ? (
-								<>
-									<Hide from="leftCol">
-										<div css={maxWidth}>
-											<ArticleMetaApps
-												branding={branding}
-												format={format}
-												byline={article.byline}
-												tags={article.tags}
-												primaryDateline={
-													article.webPublicationDateDisplay
-												}
-												secondaryDateline={
-													article.webPublicationSecondaryDateDisplay
-												}
-												isCommentable={
-													article.isCommentable
-												}
-												discussionApiUrl={
-													article.config
-														.discussionApiUrl
-												}
-												shortUrlId={
-													article.config.shortUrlId
-												}
-												pageId={article.config.pageId}
-											></ArticleMetaApps>
-										</div>
-									</Hide>
-									<Hide until="leftCol">
-										<div css={maxWidth}>
-											<ArticleMeta
-												branding={branding}
-												format={format}
-												pageId={article.pageId}
-												webTitle={article.webTitle}
-												byline={article.byline}
-												source={article.config.source}
-												tags={article.tags}
-												primaryDateline={
-													article.webPublicationDateDisplay
-												}
-												secondaryDateline={
-													article.webPublicationSecondaryDateDisplay
-												}
-												isCommentable={
-													article.isCommentable
-												}
-												discussionApiUrl={
-													article.config
-														.discussionApiUrl
-												}
-												shortUrlId={
-													article.config.shortUrlId
-												}
-												mainMediaElements={
-													article.mainMediaElements
-												}
-											/>
-										</div>
-										{!!article.affiliateLinksDisclaimer && (
-											<AffiliateDisclaimer />
-										)}
-									</Hide>
-								</>
-							) : (
-								<div css={maxWidth}>
-									<ArticleMeta
-										branding={branding}
+							<ArticleTitle
+								format={format}
+								tags={article.tags}
+								sectionLabel={article.sectionLabel}
+								sectionUrl={article.sectionUrl}
+								guardianBaseURL={article.guardianBaseURL}
+								isMatch={!!footballMatchUrl}
+							/>
+						</GridItem>
+					)}
+
+					<div css={css(grid.column.centre)}>
+						{format.theme === ArticleSpecial.Labs ? (
+							<></>
+						) : (
+							<Border />
+						)}
+					</div>
+					<GridItem
+						area="headline"
+						layoutType={layoutType}
+						element="div"
+					>
+						<div css={maxWidth}>
+							<ArticleHeadline
+								format={format}
+								headlineString={article.headline}
+								tags={article.tags}
+								byline={article.byline}
+								webPublicationDateDeprecated={
+									article.webPublicationDateDeprecated
+								}
+								starRating={article.starRating}
+							/>
+						</div>
+					</GridItem>
+					<GridItem
+						area="standfirst"
+						layoutType={layoutType}
+						element="div"
+					>
+						<Standfirst
+							format={format}
+							standfirst={article.standfirst}
+						/>
+					</GridItem>
+					<GridItem
+						area="meta"
+						layoutType={layoutType}
+						columns={{ leftCol: 'left' }}
+						element="aside"
+					>
+						<div css={maxWidth}>
+							<div css={stretchLines}>
+								{isWeb &&
+								format.theme === ArticleSpecial.Labs &&
+								format.design !== ArticleDesign.Video ? (
+									<GuardianLabsLines />
+								) : (
+									<DecideLines
 										format={format}
-										pageId={article.pageId}
-										webTitle={article.webTitle}
-										byline={article.byline}
-										source={article.config.source}
-										tags={article.tags}
-										primaryDateline={
-											article.webPublicationDateDisplay
-										}
-										secondaryDateline={
-											article.webPublicationSecondaryDateDisplay
-										}
-										isCommentable={article.isCommentable}
-										discussionApiUrl={
-											article.config.discussionApiUrl
-										}
-										shortUrlId={article.config.shortUrlId}
-										mainMediaElements={
-											article.mainMediaElements
-										}
+										color={themePalette('--article-border')}
 									/>
+								)}
+							</div>
+						</div>
+						{isApps ? (
+							<>
+								<Hide from="leftCol">
+									<div css={maxWidth}>
+										<ArticleMetaApps
+											branding={branding}
+											format={format}
+											byline={article.byline}
+											tags={article.tags}
+											primaryDateline={
+												article.webPublicationDateDisplay
+											}
+											secondaryDateline={
+												article.webPublicationSecondaryDateDisplay
+											}
+											isCommentable={
+												article.isCommentable
+											}
+											discussionApiUrl={
+												article.config.discussionApiUrl
+											}
+											shortUrlId={
+												article.config.shortUrlId
+											}
+											pageId={article.config.pageId}
+										></ArticleMetaApps>
+									</div>
+								</Hide>
+								<Hide until="leftCol">
+									<div css={maxWidth}>
+										<ArticleMeta
+											branding={branding}
+											format={format}
+											pageId={article.pageId}
+											webTitle={article.webTitle}
+											byline={article.byline}
+											source={article.config.source}
+											tags={article.tags}
+											primaryDateline={
+												article.webPublicationDateDisplay
+											}
+											secondaryDateline={
+												article.webPublicationSecondaryDateDisplay
+											}
+											isCommentable={
+												article.isCommentable
+											}
+											discussionApiUrl={
+												article.config.discussionApiUrl
+											}
+											shortUrlId={
+												article.config.shortUrlId
+											}
+											mainMediaElements={
+												article.mainMediaElements
+											}
+										/>
+									</div>
 									{!!article.affiliateLinksDisclaimer && (
 										<AffiliateDisclaimer />
 									)}
-								</div>
-							)}
-						</GridItem>
-						<GridItem
-							area="body"
-							layoutType={layoutType}
-							element="div"
-						>
-							{/* Only show Listen to Article button on App landscape views */}
-							{isApps && (
-								<Hide until="leftCol">
-									{!isVideo && (
-										<div
-											css={css`
-												margin-top: ${space[2]}px;
-											`}
-										>
-											<Island
-												priority="feature"
-												defer={{ until: 'visible' }}
-											>
-												<ListenToArticle
-													articleId={article.pageId}
-												/>
-											</Island>
-										</div>
-									)}
 								</Hide>
-							)}
-							<ArticleContainer format={format}>
-								<ArticleBody
+							</>
+						) : (
+							<div css={maxWidth}>
+								<ArticleMeta
+									branding={branding}
 									format={format}
-									blocks={article.blocks}
-									pinnedPost={article.pinnedPost}
-									host={host}
 									pageId={article.pageId}
 									webTitle={article.webTitle}
-									ajaxUrl={article.config.ajaxUrl}
-									switches={article.config.switches}
-									isSensitive={article.config.isSensitive}
-									isAdFreeUser={article.isAdFreeUser}
-									sectionId={article.config.section}
-									shouldHideReaderRevenue={
-										article.shouldHideReaderRevenue
-									}
+									byline={article.byline}
+									source={article.config.source}
 									tags={article.tags}
-									isPaidContent={
-										!!article.config.isPaidContent
+									primaryDateline={
+										article.webPublicationDateDisplay
 									}
-									contributionsServiceUrl={
-										contributionsServiceUrl
+									secondaryDateline={
+										article.webPublicationSecondaryDateDisplay
 									}
-									contentType={article.contentType}
-									isPreview={article.config.isPreview}
-									idUrl={article.config.idUrl ?? ''}
-									isDev={!!article.config.isDev}
-									keywordIds={article.config.keywordIds}
-									abTests={article.config.abTests}
-									tableOfContents={article.tableOfContents}
-									lang={article.lang}
-									isRightToLeftLang={
-										article.isRightToLeftLang
+									isCommentable={article.isCommentable}
+									discussionApiUrl={
+										article.config.discussionApiUrl
+									}
+									shortUrlId={article.config.shortUrlId}
+									mainMediaElements={
+										article.mainMediaElements
 									}
-									editionId={article.editionId}
-									shouldHideAds={article.shouldHideAds}
-									idApiUrl={article.config.idApiUrl}
 								/>
 								<MatchInfoContainer
 									isMatchReport={isMatchReport}
@@ -544,98 +554,167 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 										<AppsEpic />
 									</Island>
 								)}
-
-								{showBodyEndSlot && (
-									<Island
-										priority="feature"
-										defer={{ until: 'visible' }}
+							</div>
+						)}
+					</GridItem>
+					<GridItem area="body" layoutType={layoutType} element="div">
+						{/* Only show Listen to Article button on App landscape views */}
+						{isApps && (
+							<Hide until="leftCol">
+								{!isVideo && (
+									<div
+										css={css`
+											margin-top: ${space[2]}px;
+										`}
 									>
-										<SlotBodyEnd
-											contentType={article.contentType}
-											contributionsServiceUrl={
-												contributionsServiceUrl
-											}
-											idApiUrl={article.config.idApiUrl}
-											isMinuteArticle={
-												article.pageType.isMinuteArticle
-											}
-											isPaidContent={
-												article.pageType.isPaidContent
-											}
-											pageId={article.pageId}
-											sectionId={article.config.section}
-											shouldHideReaderRevenue={
-												article.shouldHideReaderRevenue
-											}
-											tags={article.tags}
-											renderAds={renderAds}
-											isLabs={isLabs}
-											articleEndSlot={
-												!!article.config.switches
-													.articleEndSlot
-											}
-											isSensitive={
-												article.config.isSensitive
-											}
-										/>
-									</Island>
+										<Island
+											priority="feature"
+											defer={{ until: 'visible' }}
+										>
+											<ListenToArticle
+												articleId={article.pageId}
+											/>
+										</Island>
+									</div>
 								)}
-								<StraightLines
-									data-print-layout="hide"
-									count={4}
-									cssOverrides={css`
-										display: block;
-									`}
-									color={themePalette('--straight-lines')}
-								/>
-								<SubMeta
-									format={format}
-									subMetaKeywordLinks={
-										article.subMetaKeywordLinks
-									}
-									subMetaSectionLinks={
-										article.subMetaSectionLinks
-									}
-									pageId={article.pageId}
-									webUrl={article.webURL}
-									webTitle={article.webTitle}
-									showBottomSocialButtons={
-										article.showBottomSocialButtons &&
-										renderingTarget === 'Web'
-									}
-								/>
-							</ArticleContainer>
-						</GridItem>
-						<GridItem
-							area="right-column"
-							layoutType={layoutType}
-							columns={{ desktop: 'right' }}
-							customCss={rightColumnCss(isMedia)}
-							element="aside"
+							</Hide>
+						)}
+						<ArticleContainer format={format}>
+							<ArticleBody
+								format={format}
+								blocks={article.blocks}
+								pinnedPost={article.pinnedPost}
+								host={host}
+								pageId={article.pageId}
+								webTitle={article.webTitle}
+								ajaxUrl={article.config.ajaxUrl}
+								switches={article.config.switches}
+								isSensitive={article.config.isSensitive}
+								isAdFreeUser={article.isAdFreeUser}
+								sectionId={article.config.section}
+								shouldHideReaderRevenue={
+									article.shouldHideReaderRevenue
+								}
+								tags={article.tags}
+								isPaidContent={!!article.config.isPaidContent}
+								contributionsServiceUrl={
+									contributionsServiceUrl
+								}
+								contentType={article.contentType}
+								isPreview={article.config.isPreview}
+								idUrl={article.config.idUrl ?? ''}
+								isDev={!!article.config.isDev}
+								keywordIds={article.config.keywordIds}
+								abTests={article.config.abTests}
+								tableOfContents={article.tableOfContents}
+								lang={article.lang}
+								isRightToLeftLang={article.isRightToLeftLang}
+								editionId={article.editionId}
+								shouldHideAds={article.shouldHideAds}
+								idApiUrl={article.config.idApiUrl}
+							/>
+							<MatchInfoContainer
+								isMatchReport={isMatchReport}
+								isInVariantGroup={applyFootballRedesign}
+								footballMatchUrl={footballMatchUrl}
+								footballMatchStatsUrl={footballMatchStatsUrl}
+								format={format}
+							/>
+
+							{isApps && (
+								<Island
+									priority="critical"
+									defer={{ until: 'visible' }}
+								>
+									<AppsEpic />
+								</Island>
+							)}
+
+							{showBodyEndSlot && (
+								<Island
+									priority="feature"
+									defer={{ until: 'visible' }}
+								>
+									<SlotBodyEnd
+										contentType={article.contentType}
+										contributionsServiceUrl={
+											contributionsServiceUrl
+										}
+										idApiUrl={article.config.idApiUrl}
+										isMinuteArticle={
+											article.pageType.isMinuteArticle
+										}
+										isPaidContent={
+											article.pageType.isPaidContent
+										}
+										pageId={article.pageId}
+										sectionId={article.config.section}
+										shouldHideReaderRevenue={
+											article.shouldHideReaderRevenue
+										}
+										tags={article.tags}
+										renderAds={renderAds}
+										isLabs={isLabs}
+										articleEndSlot={
+											!!article.config.switches
+												.articleEndSlot
+										}
+									/>
+								</Island>
+							)}
+							<StraightLines
+								data-print-layout="hide"
+								count={4}
+								cssOverrides={css`
+									display: block;
+								`}
+								color={themePalette('--straight-lines')}
+							/>
+							<SubMeta
+								format={format}
+								subMetaKeywordLinks={
+									article.subMetaKeywordLinks
+								}
+								subMetaSectionLinks={
+									article.subMetaSectionLinks
+								}
+								pageId={article.pageId}
+								webUrl={article.webURL}
+								webTitle={article.webTitle}
+								showBottomSocialButtons={
+									article.showBottomSocialButtons &&
+									renderingTarget === 'Web'
+								}
+							/>
+						</ArticleContainer>
+					</GridItem>
+					<GridItem
+						area="right-column"
+						layoutType={layoutType}
+						columns={{ desktop: 'right' }}
+						customCss={rightColumnCss(isMedia)}
+						element="aside"
+					>
+						<Island
+							priority="feature"
+							defer={{
+								until: 'visible',
+								// Provide a much higher value for the top margin for the intersection observer
+								// This is because the most viewed would otherwise only be lazy loaded when the
+								// bottom of the container intersects with the viewport
+								rootMargin: '700px 100px',
+							}}
 						>
-							<Island
-								priority="feature"
-								defer={{
-									until: 'visible',
-									// Provide a much higher value for the top margin for the intersection observer
-									// This is because the most viewed would otherwise only be lazy loaded when the
-									// bottom of the container intersects with the viewport
-									rootMargin: '700px 100px',
-								}}
-							>
-								<MostViewedRightWithAd
-									format={format}
-									isPaidContent={
-										article.pageType.isPaidContent
-									}
-									renderAds={isWeb && renderAds}
-									shouldHideReaderRevenue={
-										!!article.config.shouldHideReaderRevenue
-									}
-								/>
-							</Island>
-						</GridItem>
-					</div>
+							<MostViewedRightWithAd
+								format={format}
+								isPaidContent={article.pageType.isPaidContent}
+								renderAds={isWeb && renderAds}
+								shouldHideReaderRevenue={
+									!!article.config.shouldHideReaderRevenue
+								}
+							/>
+						</Island>
+					</GridItem>
 				</article>
 
 				{isWeb && renderAds && !isLabs && (

From 3487781d52bc20eda22e6d4d692f4fb55aef6c3f Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 11 Mar 2026 12:25:39 +0000
Subject: [PATCH 12/27] Incorporate grid rows into furniture layout config

---
 .../src/layouts/StandardLayout.tsx            |  58 ++++-----
 .../src/layouts/lib/furnitureLayouts.ts       | 121 ++++++++++++------
 2 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 2de882e4a55..00d51de73c1 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -80,18 +80,6 @@ const stretchLines = css`
 	}
 `;
 
-const rightColumnCss = (isMedia: boolean) => css`
-	display: none;
-	${from.desktop} {
-		display: block;
-		padding-top: 6px;
-		grid-row: ${isMedia ? 3 : 1} / span 999;
-	}
-	${from.leftCol} {
-		grid-row: ${isMedia ? 2 : 1} / span 999;
-	}
-`;
-
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
@@ -692,28 +680,34 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						area="right-column"
 						layoutType={layoutType}
 						columns={{ desktop: 'right' }}
-						customCss={rightColumnCss(isMedia)}
+						customCss={css`
+							padding-top: 6px;
+						`}
 						element="aside"
 					>
-						<Island
-							priority="feature"
-							defer={{
-								until: 'visible',
-								// Provide a much higher value for the top margin for the intersection observer
-								// This is because the most viewed would otherwise only be lazy loaded when the
-								// bottom of the container intersects with the viewport
-								rootMargin: '700px 100px',
-							}}
-						>
-							<MostViewedRightWithAd
-								format={format}
-								isPaidContent={article.pageType.isPaidContent}
-								renderAds={isWeb && renderAds}
-								shouldHideReaderRevenue={
-									!!article.config.shouldHideReaderRevenue
-								}
-							/>
-						</Island>
+						<Hide until="desktop">
+							<Island
+								priority="feature"
+								defer={{
+									until: 'visible',
+									// Provide a much higher value for the top margin for the intersection observer
+									// This is because the most viewed would otherwise only be lazy loaded when the
+									// bottom of the container intersects with the viewport
+									rootMargin: '700px 100px',
+								}}
+							>
+								<MostViewedRightWithAd
+									format={format}
+									isPaidContent={
+										article.pageType.isPaidContent
+									}
+									renderAds={isWeb && renderAds}
+									shouldHideReaderRevenue={
+										!!article.config.shouldHideReaderRevenue
+									}
+								/>
+							</Island>
+						</Hide>
 					</GridItem>
 				</article>
 
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 119afea1876..35c30d531d8 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -16,11 +16,15 @@ export type Area =
 	// Match report specific area
 	| 'match-summary';
 
+type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
+
+type RowPlacement = {
+	start: number;
+	span?: number;
+};
+
 type LayoutRows = Partial<
-	Record<
-		Area,
-		{ mobile?: number; tablet?: number; desktop?: number; leftCol?: number }
-	>
+	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
 >;
 
 type BreakpointRows = Area[][];
@@ -32,37 +36,44 @@ type LayoutDefinition = {
 	leftCol?: BreakpointRows;
 };
 
+const tabletVanillaRows: BreakpointRows = [
+	['title'],
+	['headline'],
+	['standfirst'],
+	['main-media'],
+	['meta'],
+	['body'],
+];
+
 const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	standard: {
-		tablet: [
-			['title'],
-			['headline'],
-			['standfirst'],
-			['main-media'],
-			['meta'],
+		tablet: tabletVanillaRows,
+		desktop: [
+			['title', 'right-column'],
+			['headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['main-media', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
 		],
-
 		leftCol: [
-			['title', 'headline'],
-			['standfirst'],
-			['meta', 'main-media'],
+			['title', 'headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'main-media', 'right-column'],
+			['body', 'right-column'],
 		],
 	},
+
 	matchReport: {
-		tablet: [
-			['match-summary'],
-			['title'],
-			['headline'],
-			['standfirst'],
-			['main-media'],
-			['meta'],
-		],
+		tablet: [['match-summary'], ...tabletVanillaRows],
 		leftCol: [
 			['title', 'match-summary'],
 			['headline'],
 			['meta', 'main-media'],
+			['body', 'right-column'],
 		],
 	},
+
 	media: {
 		mobile: [
 			['title'],
@@ -70,6 +81,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['main-media'],
 			['standfirst'],
 			['meta'],
+			['body'],
 		],
 		tablet: [
 			['title'],
@@ -77,20 +89,29 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['main-media'],
 			['standfirst'],
 			['meta'],
+			['body'],
+		],
+		desktop: [
+			['title'],
+			['headline'],
+			['main-media', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
 		],
 		leftCol: [
 			['title', 'headline'],
-			['meta', 'main-media'],
-			['standfirst'],
+			['meta', 'main-media', 'right-column'],
+			['meta', 'standfirst', 'right-column'],
+			['body', 'right-column'],
 		],
 	},
 };
 
+type Column = 'left' | 'centre' | 'right';
+
 type BreakpointColumns = Partial<
-	Record<
-		'mobile' | 'tablet' | 'desktop' | 'leftCol',
-		Column | [Line | number, Line | number]
-	>
+	Record<Breakpoint, Column | [Line | number, Line | number]>
 >;
 
 type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
@@ -112,22 +133,37 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 };
 
 const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
-	const map: LayoutRows = {} as LayoutRows;
+	const map: LayoutRows = {};
 
 	const apply = (
-		rows: Area[][] | undefined,
-		breakpoint: 'mobile' | 'tablet' | 'desktop' | 'leftCol',
+		rows: BreakpointRows | undefined,
+		breakpoint: Breakpoint,
 	) => {
 		if (!rows) return;
 
+		const areaRows: Record<string, number[]> = {};
+
 		for (const [index, areas] of rows.entries()) {
 			const row = index + 1;
 
 			for (const area of areas) {
-				map[area] ??= {};
-				map[area][breakpoint] = row;
+				areaRows[area] ??= [];
+				areaRows[area].push(row);
 			}
 		}
+
+		for (const [area, rowList] of Object.entries(areaRows) as [
+			Area,
+			number[],
+		][]) {
+			const start = rowList[0];
+			const span = rowList.length > 1 ? rowList.length : undefined;
+
+			if (start == null) continue;
+
+			map[area] ??= {};
+			map[area][breakpoint] = { start, span };
+		}
 	};
 
 	apply(layout.mobile, 'mobile');
@@ -152,8 +188,6 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
-type Column = 'left' | 'centre' | 'right';
-
 type ColumnConfig = Partial<Record<'tablet' | 'desktop' | 'leftCol', Column>>;
 
 export const gridCss = (
@@ -166,13 +200,18 @@ export const gridCss = (
 
 	return css([
 		grid.column.centre, // default
-		Object.entries(rows).map(
-			([bp, row]) => css`
-				${breakpointQueries[bp as keyof typeof breakpointQueries]} {
-					grid-row: ${row};
+		Object.entries(rows).map(([bp, placement]) => {
+			const rowValue =
+				placement.span != null
+					? `${placement.start} / span ${placement.span}`
+					: placement.start;
+
+			return css`
+				${breakpointQueries[bp as Breakpoint]} {
+					grid-row: ${rowValue};
 				}
-			`,
-		),
+			`;
+		}),
 		Object.entries(columns).map(([bp, colOrSpan]) => {
 			const colStyle = Array.isArray(colOrSpan)
 				? grid.between(colOrSpan[0], colOrSpan[1])

From 1b0fc04052a72a076e7cebb84eab8b797e5dca06 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 11 Mar 2026 12:44:55 +0000
Subject: [PATCH 13/27] Type tidying

---
 dotcom-rendering/src/grid.ts                  |   4 +-
 .../src/layouts/StandardLayout.tsx            | 138 +++---------------
 .../src/layouts/lib/furnitureLayouts.ts       |  12 +-
 3 files changed, 29 insertions(+), 125 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 62f9d244a9c..527168942e1 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -255,8 +255,10 @@ const grid = {
 	verticalRules,
 } as const;
 
-export type { Line };
+// ----- Types ----- //
+type ColumnPreset = keyof typeof grid.column;
 
 // ----- Exports ----- //
 
+export type { Line, ColumnPreset };
 export { grid };
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 00d51de73c1..12f8c8d1699 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -44,7 +44,7 @@ import { Standfirst } from '../components/Standfirst';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.island';
-import { grid } from '../grid';
+import { type ColumnPreset, grid } from '../grid';
 import {
 	ArticleDesign,
 	type ArticleFormat,
@@ -84,9 +84,9 @@ interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
 	columns?: {
-		tablet?: 'left' | 'centre' | 'right';
-		desktop?: 'left' | 'centre' | 'right';
-		leftCol?: 'left' | 'centre' | 'right';
+		tablet?: ColumnPreset;
+		desktop?: ColumnPreset;
+		leftCol?: ColumnPreset;
 	};
 	element?: 'div' | 'aside';
 	customCss?: SerializedStyles;
@@ -261,91 +261,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageId={article.pageId}
 					pageTags={article.tags}
 				/>
-				<article>
-					<div css={css(grid.container)}>
-						<div css={css(grid.column.centre)}>
-							<div css={!isMedia && maxWidth}>
-								<MainMedia
-									format={format}
-									elements={article.mainMediaElements}
-									host={host}
-									pageId={article.pageId}
-									webTitle={article.webTitle}
-									ajaxUrl={article.config.ajaxUrl}
-									abTests={article.config.abTests}
-									switches={article.config.switches}
-									isAdFreeUser={article.isAdFreeUser}
-									isSensitive={article.config.isSensitive}
-									editionId={article.editionId}
-									hideCaption={isMedia}
-									shouldHideAds={article.shouldHideAds}
-									contentType={article.contentType}
-									contentLayout="StandardLayout"
-								/>
-							</div>
-						</div>
-						<aside
-							css={{
-								'&': css(grid.column.centre),
-								[from.desktop]: css(grid.column.left),
-							}}
-						>
-							<ArticleTitle
-								format={format}
-								tags={article.tags}
-								sectionLabel={article.sectionLabel}
-								sectionUrl={article.sectionUrl}
-								guardianBaseURL={article.guardianBaseURL}
-								isMatch={!!footballMatchUrl}
-							/>
-						</aside>
-
-						<div css={css(grid.column.centre)}>
-							{format.theme === ArticleSpecial.Labs ? (
-								<></>
-							) : (
-								<Border />
-							)}
-						</div>
-						<GridItem
-							area="headline"
-							layoutType={layoutType}
-							element="div"
-						>
-							<div css={maxWidth}>
-								<Island
-									priority="feature"
-									defer={{ until: 'visible' }}
-								>
-									<GetMatchNav
-										matchUrl={footballMatchUrl}
-										format={format}
-										headlineString={article.headline}
-										tags={article.tags}
-										webPublicationDateDeprecated={
-											article.webPublicationDateDeprecated
-										}
-									/>
-								</Island>
-							</div>
-							<div css={maxWidth}>
-								<Island
-									priority="critical"
-									defer={{ until: 'visible' }}
-								>
-									<GetMatchTabs
-										matchUrl={footballMatchUrl}
-										format={format}
-									/>
-								</Island>
-							</div>
-						</GridItem>
-					)}
-					<GridItem
-						area="main-media"
-						layoutType={layoutType}
-						element="div"
-					>
+				<article css={css(grid.container)}>
+					<div css={css(grid.column.centre)}>
 						<div css={!isMedia && maxWidth}>
 							<MainMedia
 								format={format}
@@ -365,32 +282,22 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								contentLayout="StandardLayout"
 							/>
 						</div>
-					</GridItem>
-					{!applyFootballRedesign && (
-						<GridItem
-							area="title"
-							layoutType={layoutType}
-							columns={{ leftCol: 'left' }}
-							element="aside"
-						>
-							<ArticleTitle
-								format={format}
-								tags={article.tags}
-								sectionLabel={article.sectionLabel}
-								sectionUrl={article.sectionUrl}
-								guardianBaseURL={article.guardianBaseURL}
-								isMatch={!!footballMatchUrl}
-							/>
-						</GridItem>
-					)}
-
-					<div css={css(grid.column.centre)}>
-						{format.theme === ArticleSpecial.Labs ? (
-							<></>
-						) : (
-							<Border />
-						)}
 					</div>
+					<GridItem
+						area="title"
+						layoutType={layoutType}
+						columns={{ leftCol: 'left' }}
+						element="aside"
+					>
+						<ArticleTitle
+							format={format}
+							tags={article.tags}
+							sectionLabel={article.sectionLabel}
+							sectionUrl={article.sectionUrl}
+							guardianBaseURL={article.guardianBaseURL}
+							isMatch={!!footballMatchUrl}
+						/>
+					</GridItem>
 					<GridItem
 						area="headline"
 						layoutType={layoutType}
@@ -603,10 +510,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							/>
 							<MatchInfoContainer
 								isMatchReport={isMatchReport}
-								isInVariantGroup={applyFootballRedesign}
-								footballMatchUrl={footballMatchUrl}
 								footballMatchStatsUrl={footballMatchStatsUrl}
-								format={format}
 							/>
 
 							{isApps && (
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 35c30d531d8..584592cf8df 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -1,6 +1,6 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
-import { grid, type Line } from '../../grid';
+import { type ColumnPreset, grid, type Line } from '../../grid';
 
 export type LayoutType = 'standard' | 'matchReport' | 'media';
 
@@ -108,10 +108,8 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 };
 
-type Column = 'left' | 'centre' | 'right';
-
 type BreakpointColumns = Partial<
-	Record<Breakpoint, Column | [Line | number, Line | number]>
+	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
 >;
 
 type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
@@ -188,7 +186,7 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
-type ColumnConfig = Partial<Record<'tablet' | 'desktop' | 'leftCol', Column>>;
+type ColumnConfig = Partial<Record<Breakpoint, ColumnPreset>>;
 
 export const gridCss = (
 	area: Area,
@@ -215,7 +213,7 @@ export const gridCss = (
 		Object.entries(columns).map(([bp, colOrSpan]) => {
 			const colStyle = Array.isArray(colOrSpan)
 				? grid.between(colOrSpan[0], colOrSpan[1])
-				: grid.column[colOrSpan as keyof typeof grid.column];
+				: grid.column[colOrSpan];
 
 			return css`
 				${from[bp as keyof typeof from]} {
@@ -227,7 +225,7 @@ export const gridCss = (
 			Object.entries(columnsOverride).map(
 				([bp, col]) => css`
 					${from[bp as keyof typeof from]} {
-						${grid.column[col as keyof typeof grid.column]};
+						${grid.column[col]};
 					}
 				`,
 			),

From f0116525e1a1c1b6e7223ee143b1c2eed70252c4 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 11 Mar 2026 13:00:05 +0000
Subject: [PATCH 14/27] Move all column settings into layout config

---
 .../src/layouts/StandardLayout.tsx            | 23 +++++++---------
 .../src/layouts/lib/furnitureLayouts.ts       | 26 +++++++++++++++----
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 12f8c8d1699..060fab78b29 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -19,7 +19,6 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
-import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.island';
 import { DecideLines } from '../components/DecideLines';
 import { DirectoryPageNav } from '../components/DirectoryPageNav';
@@ -44,7 +43,7 @@ import { Standfirst } from '../components/Standfirst';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.island';
-import { type ColumnPreset, grid } from '../grid';
+import { grid } from '../grid';
 import {
 	ArticleDesign,
 	type ArticleFormat,
@@ -62,6 +61,7 @@ import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { type Area, gridCss, type LayoutType } from './lib/furnitureLayouts';
 import { BannerWrapper, Stuck } from './lib/stickiness';
+import { Grid } from 'src/components/Masthead/Titlepiece/Grid';
 
 const maxWidth = css`
 	${from.desktop} {
@@ -83,11 +83,6 @@ const stretchLines = css`
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
-	columns?: {
-		tablet?: ColumnPreset;
-		desktop?: ColumnPreset;
-		leftCol?: ColumnPreset;
-	};
 	element?: 'div' | 'aside';
 	customCss?: SerializedStyles;
 	children: React.ReactNode;
@@ -96,14 +91,13 @@ interface GridItemProps {
 const GridItem = ({
 	area,
 	layoutType,
-	columns,
 	element: Element = 'div',
 	customCss,
 	children,
 }: GridItemProps) => (
 	<Element
 		data-gu-name={area}
-		css={css([gridCss(area, layoutType, columns), customCss])}
+		css={css([gridCss(area, layoutType), customCss])}
 	>
 		{children}
 	</Element>
@@ -262,7 +256,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageTags={article.tags}
 				/>
 				<article css={css(grid.container)}>
-					<div css={css(grid.column.centre)}>
+					<GridItem
+						area="main-media"
+						layoutType={layoutType}
+						element="div"
+					>
 						<div css={!isMedia && maxWidth}>
 							<MainMedia
 								format={format}
@@ -282,11 +280,10 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								contentLayout="StandardLayout"
 							/>
 						</div>
-					</div>
+					</GridItem>
 					<GridItem
 						area="title"
 						layoutType={layoutType}
-						columns={{ leftCol: 'left' }}
 						element="aside"
 					>
 						<ArticleTitle
@@ -329,7 +326,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					<GridItem
 						area="meta"
 						layoutType={layoutType}
-						columns={{ leftCol: 'left' }}
 						element="aside"
 					>
 						<div css={maxWidth}>
@@ -583,7 +579,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					<GridItem
 						area="right-column"
 						layoutType={layoutType}
-						columns={{ desktop: 'right' }}
 						customCss={css`
 							padding-top: 6px;
 						`}
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 584592cf8df..65d1f049443 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -66,10 +66,19 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 
 	matchReport: {
 		tablet: [['match-summary'], ...tabletVanillaRows],
+		desktop: [
+			['match-summary', 'right-column'],
+			['title', 'right-column'],
+			['headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['main-media', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
+		],
 		leftCol: [
-			['title', 'match-summary'],
-			['headline'],
-			['meta', 'main-media'],
+			['title', 'match-summary', 'right-column'],
+			['headline', 'right-column'],
+			['meta', 'main-media', 'right-column'],
 			['body', 'right-column'],
 		],
 	},
@@ -114,9 +123,16 @@ type BreakpointColumns = Partial<
 
 type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
 
+const furnitureColumnDefaults: ColumnLayoutMap = {
+	title: { leftCol: 'left' },
+	meta: { leftCol: 'left' },
+	['right-column']: { desktop: 'right' },
+};
+
 const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
-	standard: {},
+	standard: furnitureColumnDefaults,
 	media: {
+		...furnitureColumnDefaults,
 		'main-media': {
 			desktop: ['centre-column-start', 'right-column-start'],
 		},
@@ -127,7 +143,7 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 			desktop: ['centre-column-start', 'right-column-start'],
 		},
 	},
-	matchReport: {},
+	matchReport: furnitureColumnDefaults,
 };
 
 const buildRowMap = (layout: LayoutDefinition): LayoutRows => {

From a3f6d758638d45c00697ca396a92eda8dc277670 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 11 Mar 2026 14:39:49 +0000
Subject: [PATCH 15/27] Remove maxWidth wrapper divs

---
 .../src/layouts/StandardLayout.tsx            | 187 ++++++++----------
 1 file changed, 81 insertions(+), 106 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 060fab78b29..d8a2e522800 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -1,7 +1,6 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { log } from '@guardian/libs';
 import {
-	from,
 	palette as sourcePalette,
 	space,
 	until,
@@ -63,12 +62,6 @@ import { type Area, gridCss, type LayoutType } from './lib/furnitureLayouts';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 import { Grid } from 'src/components/Masthead/Titlepiece/Grid';
 
-const maxWidth = css`
-	${from.desktop} {
-		max-width: 620px;
-	}
-`;
-
 const stretchLines = css`
 	${until.phablet} {
 		margin-left: -20px;
@@ -261,25 +254,23 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						layoutType={layoutType}
 						element="div"
 					>
-						<div css={!isMedia && maxWidth}>
-							<MainMedia
-								format={format}
-								elements={article.mainMediaElements}
-								host={host}
-								pageId={article.pageId}
-								webTitle={article.webTitle}
-								ajaxUrl={article.config.ajaxUrl}
-								abTests={article.config.abTests}
-								switches={article.config.switches}
-								isAdFreeUser={article.isAdFreeUser}
-								isSensitive={article.config.isSensitive}
-								editionId={article.editionId}
-								hideCaption={isMedia}
-								shouldHideAds={article.shouldHideAds}
-								contentType={article.contentType}
-								contentLayout="StandardLayout"
-							/>
-						</div>
+						<MainMedia
+							format={format}
+							elements={article.mainMediaElements}
+							host={host}
+							pageId={article.pageId}
+							webTitle={article.webTitle}
+							ajaxUrl={article.config.ajaxUrl}
+							abTests={article.config.abTests}
+							switches={article.config.switches}
+							isAdFreeUser={article.isAdFreeUser}
+							isSensitive={article.config.isSensitive}
+							editionId={article.editionId}
+							hideCaption={isMedia}
+							shouldHideAds={article.shouldHideAds}
+							contentType={article.contentType}
+							contentLayout="StandardLayout"
+						/>
 					</GridItem>
 					<GridItem
 						area="title"
@@ -300,18 +291,16 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						layoutType={layoutType}
 						element="div"
 					>
-						<div css={maxWidth}>
-							<ArticleHeadline
-								format={format}
-								headlineString={article.headline}
-								tags={article.tags}
-								byline={article.byline}
-								webPublicationDateDeprecated={
-									article.webPublicationDateDeprecated
-								}
-								starRating={article.starRating}
-							/>
-						</div>
+						<ArticleHeadline
+							format={format}
+							headlineString={article.headline}
+							tags={article.tags}
+							byline={article.byline}
+							webPublicationDateDeprecated={
+								article.webPublicationDateDeprecated
+							}
+							starRating={article.starRating}
+						/>
 					</GridItem>
 					<GridItem
 						area="standfirst"
@@ -328,85 +317,71 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						layoutType={layoutType}
 						element="aside"
 					>
-						<div css={maxWidth}>
-							<div css={stretchLines}>
-								{isWeb &&
-								format.theme === ArticleSpecial.Labs &&
-								format.design !== ArticleDesign.Video ? (
-									<GuardianLabsLines />
-								) : (
-									<DecideLines
-										format={format}
-										color={themePalette('--article-border')}
-									/>
-								)}
-							</div>
+						<div css={stretchLines}>
+							{isWeb &&
+							format.theme === ArticleSpecial.Labs &&
+							format.design !== ArticleDesign.Video ? (
+								<GuardianLabsLines />
+							) : (
+								<DecideLines
+									format={format}
+									color={themePalette('--article-border')}
+								/>
+							)}
 						</div>
 						{isApps ? (
 							<>
 								<Hide from="leftCol">
-									<div css={maxWidth}>
-										<ArticleMetaApps
-											branding={branding}
-											format={format}
-											byline={article.byline}
-											tags={article.tags}
-											primaryDateline={
-												article.webPublicationDateDisplay
-											}
-											secondaryDateline={
-												article.webPublicationSecondaryDateDisplay
-											}
-											isCommentable={
-												article.isCommentable
-											}
-											discussionApiUrl={
-												article.config.discussionApiUrl
-											}
-											shortUrlId={
-												article.config.shortUrlId
-											}
-											pageId={article.config.pageId}
-										></ArticleMetaApps>
-									</div>
+									<ArticleMetaApps
+										branding={branding}
+										format={format}
+										byline={article.byline}
+										tags={article.tags}
+										primaryDateline={
+											article.webPublicationDateDisplay
+										}
+										secondaryDateline={
+											article.webPublicationSecondaryDateDisplay
+										}
+										isCommentable={article.isCommentable}
+										discussionApiUrl={
+											article.config.discussionApiUrl
+										}
+										shortUrlId={article.config.shortUrlId}
+										pageId={article.config.pageId}
+									></ArticleMetaApps>
 								</Hide>
 								<Hide until="leftCol">
-									<div css={maxWidth}>
-										<ArticleMeta
-											branding={branding}
-											format={format}
-											pageId={article.pageId}
-											webTitle={article.webTitle}
-											byline={article.byline}
-											source={article.config.source}
-											tags={article.tags}
-											primaryDateline={
-												article.webPublicationDateDisplay
-											}
-											secondaryDateline={
-												article.webPublicationSecondaryDateDisplay
-											}
-											isCommentable={
-												article.isCommentable
-											}
-											discussionApiUrl={
-												article.config.discussionApiUrl
-											}
-											shortUrlId={
-												article.config.shortUrlId
-											}
-											mainMediaElements={
-												article.mainMediaElements
-											}
-										/>
-									</div>
+									<ArticleMeta
+										branding={branding}
+										format={format}
+										pageId={article.pageId}
+										webTitle={article.webTitle}
+										byline={article.byline}
+										source={article.config.source}
+										tags={article.tags}
+										primaryDateline={
+											article.webPublicationDateDisplay
+										}
+										secondaryDateline={
+											article.webPublicationSecondaryDateDisplay
+										}
+										isCommentable={article.isCommentable}
+										discussionApiUrl={
+											article.config.discussionApiUrl
+										}
+										shortUrlId={article.config.shortUrlId}
+										mainMediaElements={
+											article.mainMediaElements
+										}
+									/>
 									{!!article.affiliateLinksDisclaimer && (
 										<AffiliateDisclaimer />
 									)}
 								</Hide>
 							</>
 						) : (
-							<div css={maxWidth}>
+							<>
 								<ArticleMeta
 									branding={branding}
 									format={format}
@@ -445,7 +420,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 										<AppsEpic />
 									</Island>
 								)}
-							</div>
+							</>
 						)}
 					</GridItem>
 					<GridItem area="body" layoutType={layoutType} element="div">

From 3db66f1d03c701ec0638bd6cc1e13b58b0511b8f Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 12 Mar 2026 10:39:02 +0000
Subject: [PATCH 16/27] Deduplicate config

---
 .../src/layouts/lib/furnitureLayouts.ts       | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 65d1f049443..27e3d575a37 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -45,17 +45,19 @@ const tabletVanillaRows: BreakpointRows = [
 	['body'],
 ];
 
+const desktopVanillaRows: BreakpointRows = [
+	['title', 'right-column'],
+	['headline', 'right-column'],
+	['standfirst', 'right-column'],
+	['main-media', 'right-column'],
+	['meta', 'right-column'],
+	['body', 'right-column'],
+];
+
 const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	standard: {
 		tablet: tabletVanillaRows,
-		desktop: [
-			['title', 'right-column'],
-			['headline', 'right-column'],
-			['standfirst', 'right-column'],
-			['main-media', 'right-column'],
-			['meta', 'right-column'],
-			['body', 'right-column'],
-		],
+		desktop: desktopVanillaRows,
 		leftCol: [
 			['title', 'headline', 'right-column'],
 			['standfirst', 'right-column'],
@@ -66,15 +68,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 
 	matchReport: {
 		tablet: [['match-summary'], ...tabletVanillaRows],
-		desktop: [
-			['match-summary', 'right-column'],
-			['title', 'right-column'],
-			['headline', 'right-column'],
-			['standfirst', 'right-column'],
-			['main-media', 'right-column'],
-			['meta', 'right-column'],
-			['body', 'right-column'],
-		],
+		desktop: [['match-summary', 'right-column'], ...desktopVanillaRows],
 		leftCol: [
 			['title', 'match-summary', 'right-column'],
 			['headline', 'right-column'],

From e937707e9a422637f6bd37c2f980cc35db366ac0 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 12 Mar 2026 17:08:23 +0000
Subject: [PATCH 17/27] Adjust standard layout to sit properly when there's no
 featured image

---
 dotcom-rendering/src/layouts/lib/furnitureLayouts.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 27e3d575a37..0bd27a45516 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -62,7 +62,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['title', 'headline', 'right-column'],
 			['standfirst', 'right-column'],
 			['meta', 'main-media', 'right-column'],
-			['body', 'right-column'],
+			['meta', 'body', 'right-column'],
 		],
 	},
 
@@ -73,7 +73,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['title', 'match-summary', 'right-column'],
 			['headline', 'right-column'],
 			['meta', 'main-media', 'right-column'],
-			['body', 'right-column'],
+			['meta', 'body', 'right-column'],
 		],
 	},
 
@@ -106,7 +106,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['title', 'headline'],
 			['meta', 'main-media', 'right-column'],
 			['meta', 'standfirst', 'right-column'],
-			['body', 'right-column'],
+			['meta', 'body', 'right-column'],
 		],
 	},
 };

From a9eb20343e2ed520691ea0080b2d9bee43f469cb Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 17 Mar 2026 17:04:09 +0000
Subject: [PATCH 18/27] Tidying

---
 .../src/layouts/lib/furnitureLayouts.ts       | 98 +++++++++----------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 0bd27a45516..9d949881595 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -18,25 +18,8 @@ export type Area =
 
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
-type RowPlacement = {
-	start: number;
-	span?: number;
-};
-
-type LayoutRows = Partial<
-	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
->;
-
-type BreakpointRows = Area[][];
-
-type LayoutDefinition = {
-	mobile?: BreakpointRows;
-	tablet?: BreakpointRows;
-	desktop?: BreakpointRows;
-	leftCol?: BreakpointRows;
-};
-
-const tabletVanillaRows: BreakpointRows = [
+// Rows config
+const tabletVanillaRows: Rows = [
 	['title'],
 	['headline'],
 	['standfirst'],
@@ -45,7 +28,7 @@ const tabletVanillaRows: BreakpointRows = [
 	['body'],
 ];
 
-const desktopVanillaRows: BreakpointRows = [
+const desktopVanillaRows: Rows = [
 	['title', 'right-column'],
 	['headline', 'right-column'],
 	['standfirst', 'right-column'],
@@ -54,6 +37,15 @@ const desktopVanillaRows: BreakpointRows = [
 	['body', 'right-column'],
 ];
 
+const mediaRowsUntilDesktop: Rows = [
+	['title'],
+	['headline'],
+	['main-media'],
+	['standfirst'],
+	['meta'],
+	['body'],
+];
+
 const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	standard: {
 		tablet: tabletVanillaRows,
@@ -78,22 +70,8 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 
 	media: {
-		mobile: [
-			['title'],
-			['headline'],
-			['main-media'],
-			['standfirst'],
-			['meta'],
-			['body'],
-		],
-		tablet: [
-			['title'],
-			['headline'],
-			['main-media'],
-			['standfirst'],
-			['meta'],
-			['body'],
-		],
+		mobile: mediaRowsUntilDesktop,
+		tablet: mediaRowsUntilDesktop,
 		desktop: [
 			['title'],
 			['headline'],
@@ -111,12 +89,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 };
 
-type BreakpointColumns = Partial<
-	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
->;
-
-type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
-
+// Columns config
 const furnitureColumnDefaults: ColumnLayoutMap = {
 	title: { leftCol: 'left' },
 	meta: { leftCol: 'left' },
@@ -140,13 +113,36 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 	matchReport: furnitureColumnDefaults,
 };
 
-const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
-	const map: LayoutRows = {};
+// Types
+type RowPlacement = {
+	start: number;
+	span?: number;
+};
+
+type CompiledLayout = Partial<
+	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
+>;
 
-	const apply = (
-		rows: BreakpointRows | undefined,
-		breakpoint: Breakpoint,
-	) => {
+type Rows = Area[][];
+
+type LayoutDefinition = {
+	mobile?: Rows;
+	tablet?: Rows;
+	desktop?: Rows;
+	leftCol?: Rows;
+};
+
+type BreakpointColumns = Partial<
+	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
+>;
+
+type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
+
+// Guardian Grid CSS generation
+const buildRowMap = (layout: LayoutDefinition): CompiledLayout => {
+	const map: CompiledLayout = {};
+
+	const apply = (rows: Rows | undefined, breakpoint: Breakpoint) => {
 		if (!rows) return;
 
 		const areaRows: Record<string, number[]> = {};
@@ -187,7 +183,7 @@ const rowMaps = Object.fromEntries(
 		name,
 		buildRowMap(layout),
 	]),
-) as Record<LayoutType, LayoutRows>;
+) as Record<LayoutType, CompiledLayout>;
 
 const breakpointQueries = {
 	mobile: until.tablet,
@@ -203,11 +199,13 @@ export const gridCss = (
 	layoutType: LayoutType,
 	columnsOverride?: ColumnConfig,
 ): SerializedStyles => {
+	const defaultColumn = grid.column.centre;
+
 	const rows = rowMaps[layoutType][area] ?? {};
 	const columns = furnitureColumnLayouts[layoutType][area] ?? {};
 
 	return css([
-		grid.column.centre, // default
+		defaultColumn,
 		Object.entries(rows).map(([bp, placement]) => {
 			const rowValue =
 				placement.span != null

From 0c2fb5cd76cf41c67c2dc8e79ee3025e952025dc Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 18 Mar 2026 14:32:21 +0000
Subject: [PATCH 19/27] Reflect existing conditional padding on right-column
 area

---
 dotcom-rendering/src/layouts/StandardLayout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index d8a2e522800..b7719af22d6 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -555,7 +555,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						area="right-column"
 						layoutType={layoutType}
 						customCss={css`
-							padding-top: 6px;
+							padding-top: ${isMedia ? 0 : 6}px;
+							padding-bottom: ${isMedia ? 41 : 0}px;
 						`}
 						element="aside"
 					>

From a6c5a929fefcfe6161ece7930a48bf96d4957149 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 18 Mar 2026 16:49:17 +0000
Subject: [PATCH 20/27] Rebase tidy

---
 .../src/layouts/StandardLayout.tsx            | 57 +++++++------------
 .../src/layouts/lib/furnitureLayouts.ts       | 20 +------
 2 files changed, 21 insertions(+), 56 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index b7719af22d6..6e418527983 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -60,7 +60,6 @@ import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { type Area, gridCss, type LayoutType } from './lib/furnitureLayouts';
 import { BannerWrapper, Stuck } from './lib/stickiness';
-import { Grid } from 'src/components/Masthead/Titlepiece/Grid';
 
 const stretchLines = css`
 	${until.phablet} {
@@ -168,11 +167,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = canRenderAds(article);
 
-	const layoutType: LayoutType = isMatchReport
-		? 'matchReport'
-		: isMedia
-		? 'media'
-		: 'standard';
+	const layoutType: LayoutType = isMedia ? 'media' : 'standard';
 
 	return (
 		<>
@@ -248,12 +243,20 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageId={article.pageId}
 					pageTags={article.tags}
 				/>
-				<article css={css(grid.container)}>
-					<GridItem
-						area="main-media"
-						layoutType={layoutType}
-						element="div"
-					>
+				<article
+					css={css([
+						css`
+							background-color: ${themePalette(
+								'--article-background',
+							)};
+						`,
+						grid.container,
+						grid.verticalRules({
+							centre: isLabs ? false : true,
+						}),
+					])}
+				>
+					<GridItem area="main-media" layoutType={layoutType}>
 						<MainMedia
 							format={format}
 							elements={article.mainMediaElements}
@@ -286,11 +289,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							isMatch={!!footballMatchUrl}
 						/>
 					</GridItem>
-					<GridItem
-						area="headline"
-						layoutType={layoutType}
-						element="div"
-					>
+					<GridItem area="headline" layoutType={layoutType}>
 						<ArticleHeadline
 							format={format}
 							headlineString={article.headline}
@@ -302,11 +301,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							starRating={article.starRating}
 						/>
 					</GridItem>
-					<GridItem
-						area="standfirst"
-						layoutType={layoutType}
-						element="div"
-					>
+					<GridItem area="standfirst" layoutType={layoutType}>
 						<Standfirst
 							format={format}
 							standfirst={article.standfirst}
@@ -405,25 +400,10 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 										article.mainMediaElements
 									}
 								/>
-								<MatchInfoContainer
-									isMatchReport={isMatchReport}
-									footballMatchStatsUrl={
-										footballMatchStatsUrl
-									}
-								/>
-
-								{isApps && (
-									<Island
-										priority="critical"
-										defer={{ until: 'visible' }}
-									>
-										<AppsEpic />
-									</Island>
-								)}
 							</>
 						)}
 					</GridItem>
-					<GridItem area="body" layoutType={layoutType} element="div">
+					<GridItem area="body" layoutType={layoutType}>
 						{/* Only show Listen to Article button on App landscape views */}
 						{isApps && (
 							<Hide until="leftCol">
@@ -522,6 +502,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 											!!article.config.switches
 												.articleEndSlot
 										}
+										isSensitive={article.config.isSensitive}
 									/>
 								</Island>
 							)}
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
index 9d949881595..49ce382b395 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
@@ -2,19 +2,16 @@ import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
 import { type ColumnPreset, grid, type Line } from '../../grid';
 
-export type LayoutType = 'standard' | 'matchReport' | 'media';
+export type LayoutType = 'standard' | 'media';
 
 export type Area =
-	// Common areas
 	| 'title'
 	| 'headline'
 	| 'standfirst'
 	| 'main-media'
 	| 'meta'
 	| 'body'
-	| 'right-column'
-	// Match report specific area
-	| 'match-summary';
+	| 'right-column';
 
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
@@ -57,18 +54,6 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 			['meta', 'body', 'right-column'],
 		],
 	},
-
-	matchReport: {
-		tablet: [['match-summary'], ...tabletVanillaRows],
-		desktop: [['match-summary', 'right-column'], ...desktopVanillaRows],
-		leftCol: [
-			['title', 'match-summary', 'right-column'],
-			['headline', 'right-column'],
-			['meta', 'main-media', 'right-column'],
-			['meta', 'body', 'right-column'],
-		],
-	},
-
 	media: {
 		mobile: mediaRowsUntilDesktop,
 		tablet: mediaRowsUntilDesktop,
@@ -110,7 +95,6 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 			desktop: ['centre-column-start', 'right-column-start'],
 		},
 	},
-	matchReport: furnitureColumnDefaults,
 };
 
 // Types

From 1f696586829bee2743d0a71a4466dab8804660a6 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 15 Apr 2026 17:14:36 +0100
Subject: [PATCH 21/27] Rename furnitureLayouts to furnitureArrangements

---
 dotcom-rendering/src/layouts/StandardLayout.tsx             | 6 +++++-
 .../lib/{furnitureLayouts.ts => furnitureArrangements.ts}   | 0
 2 files changed, 5 insertions(+), 1 deletion(-)
 rename dotcom-rendering/src/layouts/lib/{furnitureLayouts.ts => furnitureArrangements.ts} (100%)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 6e418527983..816c13e8896 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -58,7 +58,11 @@ import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { type Area, gridCss, type LayoutType } from './lib/furnitureLayouts';
+import {
+	type Area,
+	gridCss,
+	type LayoutType,
+} from './lib/furnitureArrangements';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
 const stretchLines = css`
diff --git a/dotcom-rendering/src/layouts/lib/furnitureLayouts.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
similarity index 100%
rename from dotcom-rendering/src/layouts/lib/furnitureLayouts.ts
rename to dotcom-rendering/src/layouts/lib/furnitureArrangements.ts

From 45cd5cbdb1e468c792825e302afff9a431fe4095 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 21 Apr 2026 12:23:14 +0100
Subject: [PATCH 22/27] Review suggestions

Co-Authored-By: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
---
 dotcom-rendering/src/grid.ts                  |  8 ---
 .../src/layouts/StandardLayout.tsx            | 56 ++++++++-----------
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 527168942e1..d01413a35ae 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -126,12 +126,6 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
   ${fromBreakpoint.tablet} {
     position: relative;
 
-    --centre-transform: translateX(-${columnGap});
-
-    ${fromBreakpoint.leftCol} {
-      --centre-transform: translateX(calc(-${columnGap} / 2));
-    }
-
     &::before,
     &::after
     ${options.centre ? ', & > *:first-child::before' : ''} {
@@ -147,7 +141,6 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
     /* LEFT OUTER RULE */
     &::before {
       grid-column: centre-column-start;
-      justify-self: start;
       transform: translateX(-${columnGap});
 
       ${fromBreakpoint.leftCol} {
@@ -158,7 +151,6 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
     /* RIGHT OUTER RULE */
     &::after {
       grid-column: right-column-end;
-      justify-self: start;
       transform: translateX(-1px);
 
       ${betweenBreakpoint.tablet.and.desktop} {
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 816c13e8896..c3f2ad21dc3 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -91,10 +91,7 @@ const GridItem = ({
 	customCss,
 	children,
 }: GridItemProps) => (
-	<Element
-		data-gu-name={area}
-		css={css([gridCss(area, layoutType), customCss])}
-	>
+	<Element data-gu-name={area} css={[gridCss(area, layoutType), customCss]}>
 		{children}
 	</Element>
 );
@@ -248,7 +245,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageTags={article.tags}
 				/>
 				<article
-					css={css([
+					css={[
 						css`
 							background-color: ${themePalette(
 								'--article-background',
@@ -258,7 +255,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						grid.verticalRules({
 							centre: isLabs ? false : true,
 						}),
-					])}
+					]}
 				>
 					<GridItem area="main-media" layoutType={layoutType}>
 						<MainMedia
@@ -380,31 +377,27 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								</Hide>
 							</>
 						) : (
-							<>
-								<ArticleMeta
-									branding={branding}
-									format={format}
-									pageId={article.pageId}
-									webTitle={article.webTitle}
-									byline={article.byline}
-									source={article.config.source}
-									tags={article.tags}
-									primaryDateline={
-										article.webPublicationDateDisplay
-									}
-									secondaryDateline={
-										article.webPublicationSecondaryDateDisplay
-									}
-									isCommentable={article.isCommentable}
-									discussionApiUrl={
-										article.config.discussionApiUrl
-									}
-									shortUrlId={article.config.shortUrlId}
-									mainMediaElements={
-										article.mainMediaElements
-									}
-								/>
-							</>
+							<ArticleMeta
+								branding={branding}
+								format={format}
+								pageId={article.pageId}
+								webTitle={article.webTitle}
+								byline={article.byline}
+								source={article.config.source}
+								tags={article.tags}
+								primaryDateline={
+									article.webPublicationDateDisplay
+								}
+								secondaryDateline={
+									article.webPublicationSecondaryDateDisplay
+								}
+								isCommentable={article.isCommentable}
+								discussionApiUrl={
+									article.config.discussionApiUrl
+								}
+								shortUrlId={article.config.shortUrlId}
+								mainMediaElements={article.mainMediaElements}
+							/>
 						)}
 					</GridItem>
 					<GridItem area="body" layoutType={layoutType}>
@@ -543,7 +536,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							padding-top: ${isMedia ? 0 : 6}px;
 							padding-bottom: ${isMedia ? 41 : 0}px;
 						`}
-						element="aside"
 					>
 						<Hide until="desktop">
 							<Island

From 0d6d6540a0b0b0953c4974949fe6ffbafedb4ce5 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 22 Apr 2026 13:35:29 +0100
Subject: [PATCH 23/27] Readability improvements

---
 .../src/layouts/StandardLayout.tsx            |   7 +-
 .../src/layouts/lib/furnitureArrangements.ts  | 105 +++++++++---------
 2 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index c3f2ad21dc3..d9b2a72b11a 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -60,7 +60,7 @@ import type { ArticleDeprecated } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import {
 	type Area,
-	gridCss,
+	gridItemCss,
 	type LayoutType,
 } from './lib/furnitureArrangements';
 import { BannerWrapper, Stuck } from './lib/stickiness';
@@ -91,7 +91,10 @@ const GridItem = ({
 	customCss,
 	children,
 }: GridItemProps) => (
-	<Element data-gu-name={area} css={[gridCss(area, layoutType), customCss]}>
+	<Element
+		data-gu-name={area}
+		css={[gridItemCss(area, layoutType), customCss]}
+	>
 		{children}
 	</Element>
 );
diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
index 49ce382b395..6ab827df7ab 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
@@ -16,7 +16,7 @@ export type Area =
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
 // Rows config
-const tabletVanillaRows: Rows = [
+const tabletStandardRows: Rows = [
 	['title'],
 	['headline'],
 	['standfirst'],
@@ -25,7 +25,7 @@ const tabletVanillaRows: Rows = [
 	['body'],
 ];
 
-const desktopVanillaRows: Rows = [
+const desktopStandardRows: Rows = [
 	['title', 'right-column'],
 	['headline', 'right-column'],
 	['standfirst', 'right-column'],
@@ -43,10 +43,10 @@ const mediaRowsUntilDesktop: Rows = [
 	['body'],
 ];
 
-const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
+const furnitureRowArrangements: Record<LayoutType, ArrangementDefinition> = {
 	standard: {
-		tablet: tabletVanillaRows,
-		desktop: desktopVanillaRows,
+		tablet: tabletStandardRows,
+		desktop: desktopStandardRows,
 		leftCol: [
 			['title', 'headline', 'right-column'],
 			['standfirst', 'right-column'],
@@ -75,13 +75,13 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 };
 
 // Columns config
-const furnitureColumnDefaults: ColumnLayoutMap = {
+const furnitureColumnDefaults: ColumnArrangementMap = {
 	title: { leftCol: 'left' },
 	meta: { leftCol: 'left' },
 	['right-column']: { desktop: 'right' },
 };
 
-const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
+const furnitureColumnArrangements: Record<LayoutType, ColumnArrangementMap> = {
 	standard: furnitureColumnDefaults,
 	media: {
 		...furnitureColumnDefaults,
@@ -103,13 +103,13 @@ type RowPlacement = {
 	span?: number;
 };
 
-type CompiledLayout = Partial<
+type CompiledArrangement = Partial<
 	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
 >;
 
 type Rows = Area[][];
 
-type LayoutDefinition = {
+type ArrangementDefinition = {
 	mobile?: Rows;
 	tablet?: Rows;
 	desktop?: Rows;
@@ -120,19 +120,25 @@ type BreakpointColumns = Partial<
 	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
 >;
 
-type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
+type ColumnArrangementMap = Partial<Record<Area, BreakpointColumns>>;
 
 // Guardian Grid CSS generation
-const buildRowMap = (layout: LayoutDefinition): CompiledLayout => {
-	const map: CompiledLayout = {};
-
-	const apply = (rows: Rows | undefined, breakpoint: Breakpoint) => {
+const buildRowMap = (
+	arrangement: ArrangementDefinition,
+): CompiledArrangement => {
+	const map: CompiledArrangement = {};
+
+	const collectRowsForBreakpoint = (
+		rows: Rows | undefined,
+		breakpoint: Breakpoint,
+	) => {
 		if (!rows) return;
 
 		const areaRows: Record<string, number[]> = {};
 
 		for (const [index, areas] of rows.entries()) {
-			const row = index + 1;
+			const cssGridOffset = 1; // CSS grid is 1-indexed
+			const row = index + cssGridOffset;
 
 			for (const area of areas) {
 				areaRows[area] ??= [];
@@ -154,20 +160,20 @@ const buildRowMap = (layout: LayoutDefinition): CompiledLayout => {
 		}
 	};
 
-	apply(layout.mobile, 'mobile');
-	apply(layout.tablet, 'tablet');
-	apply(layout.desktop, 'desktop');
-	apply(layout.leftCol, 'leftCol');
+	collectRowsForBreakpoint(arrangement.mobile, 'mobile');
+	collectRowsForBreakpoint(arrangement.tablet, 'tablet');
+	collectRowsForBreakpoint(arrangement.desktop, 'desktop');
+	collectRowsForBreakpoint(arrangement.leftCol, 'leftCol');
 
 	return map;
 };
 
 const rowMaps = Object.fromEntries(
-	Object.entries(furnitureRowLayouts).map(([name, layout]) => [
+	Object.entries(furnitureRowArrangements).map(([name, arrangement]) => [
 		name,
-		buildRowMap(layout),
+		buildRowMap(arrangement),
 	]),
-) as Record<LayoutType, CompiledLayout>;
+) as Record<LayoutType, CompiledArrangement>;
 
 const breakpointQueries = {
 	mobile: until.tablet,
@@ -176,33 +182,28 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
-type ColumnConfig = Partial<Record<Breakpoint, ColumnPreset>>;
-
-export const gridCss = (
+export const gridItemCss = (
 	area: Area,
 	layoutType: LayoutType,
-	columnsOverride?: ColumnConfig,
 ): SerializedStyles => {
-	const defaultColumn = grid.column.centre;
-
 	const rows = rowMaps[layoutType][area] ?? {};
-	const columns = furnitureColumnLayouts[layoutType][area] ?? {};
-
-	return css([
-		defaultColumn,
-		Object.entries(rows).map(([bp, placement]) => {
-			const rowValue =
-				placement.span != null
-					? `${placement.start} / span ${placement.span}`
-					: placement.start;
-
-			return css`
-				${breakpointQueries[bp as Breakpoint]} {
-					grid-row: ${rowValue};
-				}
-			`;
-		}),
-		Object.entries(columns).map(([bp, colOrSpan]) => {
+	const columns = furnitureColumnArrangements[layoutType][area] ?? {};
+
+	const defaultColumnCss = grid.column.centre;
+	const rowPlacementCss = Object.entries(rows).map(([bp, placement]) => {
+		const rowValue =
+			placement.span != null
+				? `${placement.start} / span ${placement.span}`
+				: placement.start;
+
+		return css`
+			${breakpointQueries[bp as Breakpoint]} {
+				grid-row: ${rowValue};
+			}
+		`;
+	});
+	const columnPlacementCss = Object.entries(columns).map(
+		([bp, colOrSpan]) => {
 			const colStyle = Array.isArray(colOrSpan)
 				? grid.between(colOrSpan[0], colOrSpan[1])
 				: grid.column[colOrSpan];
@@ -212,14 +213,8 @@ export const gridCss = (
 					${colStyle};
 				}
 			`;
-		}),
-		columnsOverride &&
-			Object.entries(columnsOverride).map(
-				([bp, col]) => css`
-					${from[bp as keyof typeof from]} {
-						${grid.column[col]};
-					}
-				`,
-			),
-	]);
+		},
+	);
+
+	return css([defaultColumnCss, rowPlacementCss, columnPlacementCss]);
 };

From 4bf9cae9859466176ea6de57bb5304b33dca82cf Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 22 Apr 2026 15:20:50 +0100
Subject: [PATCH 24/27] Documentation

---
 .../src/layouts/lib/furnitureArrangements.ts  | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
index 6ab827df7ab..1c1ad4741aa 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
@@ -122,7 +122,27 @@ type BreakpointColumns = Partial<
 
 type ColumnArrangementMap = Partial<Record<Area, BreakpointColumns>>;
 
-// Guardian Grid CSS generation
+/**
+ * Converts the human-readable {@link furnitureRowArrangements} into a lookup table
+ * of CSS grid row positions ready for use in {@link gridItemCss}.
+ *
+ * Each area in the arrangement is assigned a `start` row number and, if it
+ * appears in multiple consecutive rows (e.g. a sidebar), a `span` count.
+ *
+ * @example
+ * // Given this arrangement for 'desktop':
+ * [
+ *   ['title', 'right-column'],   // row 1
+ *   ['body',  'right-column'],   // row 2
+ * ]
+ *
+ * // Produces:
+ * {
+ *   title:          { desktop: { start: 1 } },
+ *   body:           { desktop: { start: 2 } },
+ *   'right-column': { desktop: { start: 1, span: 2 } },
+ * }
+ */
 const buildRowMap = (
 	arrangement: ArrangementDefinition,
 ): CompiledArrangement => {
@@ -182,6 +202,25 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
+/**
+ * Returns the Emotion CSS needed to position a single grid item — its
+ * default column, its row at each breakpoint, and any column overrides.
+ * The grid item _must_ be inside a {@link grid} module container.
+ *
+ * The output is built from three layers, applied in order (later wins):
+ * 1. **Default column** — all items start in the centre column.
+ * 2. **Row placement** — `grid-row` values per breakpoint, derived from
+ *    {@link furnitureRowArrangements} via the pre-computed {@link rowMaps}.
+ * 3. **Column placement** — column overrides per breakpoint from
+ *    {@link furnitureColumnArrangements} (e.g. `meta` shifts left on wide screens).
+ *
+ * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`).
+ * @param layoutType - Either `'standard'` or `'media'`.
+ *
+ * @example
+ * // In a React component:
+ * <div css={gridItemCss('headline', 'standard')} />
+ */
 export const gridItemCss = (
 	area: Area,
 	layoutType: LayoutType,

From 9b057e49822c41f115c37c857014792230aa27e6 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Tue, 28 Apr 2026 12:58:30 +0100
Subject: [PATCH 25/27] Replace abstraction with vanilla CSS approach

---
 .../src/layouts/StandardLayout.tsx            |   2 +
 .../src/layouts/lib/furnitureArrangements.ts  | 309 ++++++------------
 2 files changed, 102 insertions(+), 209 deletions(-)

diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index d9b2a72b11a..6449b0924a6 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -247,6 +247,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 					pageId={article.pageId}
 					pageTags={article.tags}
 				/>
+				{/* GridItem order matters — mobile layout relies on DOM order for grid placement.
+    See furnitureArrangements.ts if reordering. */}
 				<article
 					css={[
 						css`
diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
index 1c1ad4741aa..74207883dff 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
@@ -1,6 +1,5 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
-import { type ColumnPreset, grid, type Line } from '../../grid';
 
 export type LayoutType = 'standard' | 'media';
 
@@ -15,207 +14,114 @@ export type Area =
 
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
-// Rows config
-const tabletStandardRows: Rows = [
-	['title'],
-	['headline'],
-	['standfirst'],
-	['main-media'],
-	['meta'],
-	['body'],
-];
+const breakpointQueries: Record<Breakpoint, string> = {
+	mobile: until.tablet,
+	tablet: from.tablet,
+	desktop: from.desktop,
+	leftCol: from.leftCol,
+};
 
-const desktopStandardRows: Rows = [
-	['title', 'right-column'],
-	['headline', 'right-column'],
-	['standfirst', 'right-column'],
-	['main-media', 'right-column'],
-	['meta', 'right-column'],
-	['body', 'right-column'],
-];
+// Raw CSS overrides per area per breakpoint. Entries are only needed when an area
+// deviates from the default: centre column, single-column mobile layout with areas
+// in DOM order (main-media → title → headline → standfirst → meta → body → right-column).
 
-const mediaRowsUntilDesktop: Rows = [
-	['title'],
-	['headline'],
-	['main-media'],
-	['standfirst'],
-	['meta'],
-	['body'],
-];
+type AreaCss = Partial<Record<Breakpoint, string>>;
+type LayoutCssMap = Partial<Record<Area, AreaCss>>;
 
-const furnitureRowArrangements: Record<LayoutType, ArrangementDefinition> = {
-	standard: {
-		tablet: tabletStandardRows,
-		desktop: desktopStandardRows,
-		leftCol: [
-			['title', 'headline', 'right-column'],
-			['standfirst', 'right-column'],
-			['meta', 'main-media', 'right-column'],
-			['meta', 'body', 'right-column'],
-		],
+const standardCss: LayoutCssMap = {
+	title: {
+		tablet: 'grid-row: 1;',
+		leftCol:
+			'grid-row: 1; grid-column: left-column-start / left-column-end;',
 	},
-	media: {
-		mobile: mediaRowsUntilDesktop,
-		tablet: mediaRowsUntilDesktop,
-		desktop: [
-			['title'],
-			['headline'],
-			['main-media', 'right-column'],
-			['standfirst', 'right-column'],
-			['meta', 'right-column'],
-			['body', 'right-column'],
-		],
-		leftCol: [
-			['title', 'headline'],
-			['meta', 'main-media', 'right-column'],
-			['meta', 'standfirst', 'right-column'],
-			['meta', 'body', 'right-column'],
-		],
+	headline: {
+		tablet: 'grid-row: 2;',
+		leftCol: 'grid-row: 1;',
 	},
-};
-
-// Columns config
-const furnitureColumnDefaults: ColumnArrangementMap = {
-	title: { leftCol: 'left' },
-	meta: { leftCol: 'left' },
-	['right-column']: { desktop: 'right' },
-};
-
-const furnitureColumnArrangements: Record<LayoutType, ColumnArrangementMap> = {
-	standard: furnitureColumnDefaults,
-	media: {
-		...furnitureColumnDefaults,
-		'main-media': {
-			desktop: ['centre-column-start', 'right-column-start'],
-		},
-		standfirst: {
-			desktop: ['centre-column-start', 'right-column-start'],
-		},
-		body: {
-			desktop: ['centre-column-start', 'right-column-start'],
-		},
+	standfirst: {
+		tablet: 'grid-row: 3;',
+		leftCol: 'grid-row: 2;',
+	},
+	'main-media': {
+		tablet: 'grid-row: 4;',
+		leftCol: 'grid-row: 3;',
+	},
+	meta: {
+		tablet: 'grid-row: 5;',
+		leftCol:
+			'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;',
+	},
+	body: {
+		tablet: 'grid-row: 6;',
+		leftCol: 'grid-row: 4;',
+	},
+	'right-column': {
+		desktop:
+			'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;',
+		leftCol:
+			'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;',
 	},
 };
 
-// Types
-type RowPlacement = {
-	start: number;
-	span?: number;
-};
-
-type CompiledArrangement = Partial<
-	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
->;
-
-type Rows = Area[][];
-
-type ArrangementDefinition = {
-	mobile?: Rows;
-	tablet?: Rows;
-	desktop?: Rows;
-	leftCol?: Rows;
+const mediaCss: LayoutCssMap = {
+	title: {
+		mobile: 'grid-row: 1;',
+		leftCol:
+			'grid-row: 1; grid-column: left-column-start / left-column-end;',
+	},
+	headline: {
+		mobile: 'grid-row: 2;',
+		leftCol: 'grid-row: 1;',
+	},
+	'main-media': {
+		mobile: 'grid-row: 3;',
+		desktop:
+			'grid-row: 3; grid-column: centre-column-start / right-column-start;',
+		leftCol:
+			'grid-row: 2; grid-column: centre-column-start / right-column-start;',
+	},
+	standfirst: {
+		mobile: 'grid-row: 4;',
+		desktop:
+			'grid-row: 4; grid-column: centre-column-start / right-column-start;',
+		leftCol:
+			'grid-row: 3; grid-column: centre-column-start / right-column-start;',
+	},
+	meta: {
+		mobile: 'grid-row: 5;',
+		leftCol:
+			'grid-row: 2 / span 3; grid-column: left-column-start / left-column-end;',
+	},
+	body: {
+		desktop:
+			'grid-row: 6; grid-column: centre-column-start / right-column-start;',
+		leftCol:
+			'grid-row: 4; grid-column: centre-column-start / right-column-start;',
+	},
+	'right-column': {
+		desktop:
+			'grid-row: 3 / span 4; grid-column: right-column-start / right-column-end;',
+		leftCol:
+			'grid-row: 2 / span 3; grid-column: right-column-start / right-column-end;',
+	},
 };
 
-type BreakpointColumns = Partial<
-	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
->;
-
-type ColumnArrangementMap = Partial<Record<Area, BreakpointColumns>>;
-
-/**
- * Converts the human-readable {@link furnitureRowArrangements} into a lookup table
- * of CSS grid row positions ready for use in {@link gridItemCss}.
- *
- * Each area in the arrangement is assigned a `start` row number and, if it
- * appears in multiple consecutive rows (e.g. a sidebar), a `span` count.
- *
- * @example
- * // Given this arrangement for 'desktop':
- * [
- *   ['title', 'right-column'],   // row 1
- *   ['body',  'right-column'],   // row 2
- * ]
- *
- * // Produces:
- * {
- *   title:          { desktop: { start: 1 } },
- *   body:           { desktop: { start: 2 } },
- *   'right-column': { desktop: { start: 1, span: 2 } },
- * }
- */
-const buildRowMap = (
-	arrangement: ArrangementDefinition,
-): CompiledArrangement => {
-	const map: CompiledArrangement = {};
-
-	const collectRowsForBreakpoint = (
-		rows: Rows | undefined,
-		breakpoint: Breakpoint,
-	) => {
-		if (!rows) return;
-
-		const areaRows: Record<string, number[]> = {};
-
-		for (const [index, areas] of rows.entries()) {
-			const cssGridOffset = 1; // CSS grid is 1-indexed
-			const row = index + cssGridOffset;
-
-			for (const area of areas) {
-				areaRows[area] ??= [];
-				areaRows[area].push(row);
-			}
-		}
-
-		for (const [area, rowList] of Object.entries(areaRows) as [
-			Area,
-			number[],
-		][]) {
-			const start = rowList[0];
-			const span = rowList.length > 1 ? rowList.length : undefined;
-
-			if (start == null) continue;
-
-			map[area] ??= {};
-			map[area][breakpoint] = { start, span };
-		}
-	};
-
-	collectRowsForBreakpoint(arrangement.mobile, 'mobile');
-	collectRowsForBreakpoint(arrangement.tablet, 'tablet');
-	collectRowsForBreakpoint(arrangement.desktop, 'desktop');
-	collectRowsForBreakpoint(arrangement.leftCol, 'leftCol');
-
-	return map;
+const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
+	standard: standardCss,
+	media: mediaCss,
 };
 
-const rowMaps = Object.fromEntries(
-	Object.entries(furnitureRowArrangements).map(([name, arrangement]) => [
-		name,
-		buildRowMap(arrangement),
-	]),
-) as Record<LayoutType, CompiledArrangement>;
-
-const breakpointQueries = {
-	mobile: until.tablet,
-	tablet: from.tablet,
-	leftCol: from.leftCol,
-	desktop: from.desktop,
-} as const;
-
 /**
  * Returns the Emotion CSS needed to position a single grid item — its
  * default column, its row at each breakpoint, and any column overrides.
  * The grid item _must_ be inside a {@link grid} module container.
  *
- * The output is built from three layers, applied in order (later wins):
- * 1. **Default column** — all items start in the centre column.
- * 2. **Row placement** — `grid-row` values per breakpoint, derived from
- *    {@link furnitureRowArrangements} via the pre-computed {@link rowMaps}.
- * 3. **Column placement** — column overrides per breakpoint from
- *    {@link furnitureColumnArrangements} (e.g. `meta` shifts left on wide screens).
+ * All items default to the centre column. Per-breakpoint overrides for
+ * `grid-row` and `grid-column` are applied on top via media queries,
+ * looked up from the plain CSS maps defined in this file.
  *
  * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`).
- * @param layoutType - Either `'standard'` or `'media'`.
+ * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups.
  *
  * @example
  * // In a React component:
@@ -225,35 +131,20 @@ export const gridItemCss = (
 	area: Area,
 	layoutType: LayoutType,
 ): SerializedStyles => {
-	const rows = rowMaps[layoutType][area] ?? {};
-	const columns = furnitureColumnArrangements[layoutType][area] ?? {};
-
-	const defaultColumnCss = grid.column.centre;
-	const rowPlacementCss = Object.entries(rows).map(([bp, placement]) => {
-		const rowValue =
-			placement.span != null
-				? `${placement.start} / span ${placement.span}`
-				: placement.start;
+	const areaOverrides = layoutCssMaps[layoutType][area] ?? {};
 
-		return css`
+	const breakpointCss = Object.entries(areaOverrides).map(
+		([bp, styles]) => css`
 			${breakpointQueries[bp as Breakpoint]} {
-				grid-row: ${rowValue};
+				${styles}
 			}
-		`;
-	});
-	const columnPlacementCss = Object.entries(columns).map(
-		([bp, colOrSpan]) => {
-			const colStyle = Array.isArray(colOrSpan)
-				? grid.between(colOrSpan[0], colOrSpan[1])
-				: grid.column[colOrSpan];
-
-			return css`
-				${from[bp as keyof typeof from]} {
-					${colStyle};
-				}
-			`;
-		},
+		`,
 	);
 
-	return css([defaultColumnCss, rowPlacementCss, columnPlacementCss]);
+	// All items default to the centre column; breakpoint entries above
+	// override grid-row and grid-column as needed.
+	return css`
+		grid-column: centre-column-start / centre-column-end;
+		${breakpointCss}
+	`;
 };

From e9f7f4d7cce75147fdd74a5e539f3e6542aec6d6 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Wed, 29 Apr 2026 11:06:37 +0100
Subject: [PATCH 26/27] Furniture arrangement abstractrion

---
 .../src/layouts/lib/furnitureArrangements.ts  | 240 ++++++++++--------
 1 file changed, 140 insertions(+), 100 deletions(-)

diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
index 74207883dff..c18dd689be5 100644
--- a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
+++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts
@@ -1,5 +1,6 @@
 import { css, type SerializedStyles } from '@emotion/react';
 import { from, until } from '@guardian/source/foundations';
+import { type ColumnPreset, grid, type Line } from '../../grid';
 
 export type LayoutType = 'standard' | 'media';
 
@@ -14,101 +15,111 @@ export type Area =
 
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
-const breakpointQueries: Record<Breakpoint, string> = {
-	mobile: until.tablet,
-	tablet: from.tablet,
-	desktop: from.desktop,
-	leftCol: from.leftCol,
-};
+// Rows config
+const tabletStandardRows: Rows = [
+	['title'],
+	['headline'],
+	['standfirst'],
+	['main-media'],
+	['meta'],
+	['body'],
+];
 
-// Raw CSS overrides per area per breakpoint. Entries are only needed when an area
-// deviates from the default: centre column, single-column mobile layout with areas
-// in DOM order (main-media → title → headline → standfirst → meta → body → right-column).
+const desktopStandardRows: Rows = [
+	['title', 'right-column'],
+	['headline', 'right-column'],
+	['standfirst', 'right-column'],
+	['main-media', 'right-column'],
+	['meta', 'right-column'],
+	['body', 'right-column'],
+];
 
-type AreaCss = Partial<Record<Breakpoint, string>>;
-type LayoutCssMap = Partial<Record<Area, AreaCss>>;
+const mediaRowsUntilDesktop: Rows = [
+	['title'],
+	['headline'],
+	['main-media'],
+	['standfirst'],
+	['meta'],
+	['body'],
+];
 
-const standardCss: LayoutCssMap = {
-	title: {
-		tablet: 'grid-row: 1;',
-		leftCol:
-			'grid-row: 1; grid-column: left-column-start / left-column-end;',
-	},
-	headline: {
-		tablet: 'grid-row: 2;',
-		leftCol: 'grid-row: 1;',
-	},
-	standfirst: {
-		tablet: 'grid-row: 3;',
-		leftCol: 'grid-row: 2;',
-	},
-	'main-media': {
-		tablet: 'grid-row: 4;',
-		leftCol: 'grid-row: 3;',
+// Breakpoints not listed here inherit browser default flow (no grid-row applied)
+const furnitureRowArrangements: Record<LayoutType, ArrangementDefinition> = {
+	standard: {
+		tablet: tabletStandardRows,
+		desktop: desktopStandardRows,
+		leftCol: [
+			['title', 'headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'main-media', 'right-column'],
+			['meta', 'body', 'right-column'],
+		],
 	},
-	meta: {
-		tablet: 'grid-row: 5;',
-		leftCol:
-			'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;',
-	},
-	body: {
-		tablet: 'grid-row: 6;',
-		leftCol: 'grid-row: 4;',
-	},
-	'right-column': {
-		desktop:
-			'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;',
-		leftCol:
-			'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;',
+	media: {
+		mobile: mediaRowsUntilDesktop,
+		tablet: mediaRowsUntilDesktop,
+		desktop: [
+			['title'],
+			['headline'],
+			['main-media', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
+		],
+		leftCol: [
+			['title', 'headline'],
+			['meta', 'main-media', 'right-column'],
+			['meta', 'standfirst', 'right-column'],
+			['meta', 'body', 'right-column'],
+		],
 	},
 };
 
-const mediaCss: LayoutCssMap = {
-	title: {
-		mobile: 'grid-row: 1;',
-		leftCol:
-			'grid-row: 1; grid-column: left-column-start / left-column-end;',
-	},
-	headline: {
-		mobile: 'grid-row: 2;',
-		leftCol: 'grid-row: 1;',
-	},
-	'main-media': {
-		mobile: 'grid-row: 3;',
-		desktop:
-			'grid-row: 3; grid-column: centre-column-start / right-column-start;',
-		leftCol:
-			'grid-row: 2; grid-column: centre-column-start / right-column-start;',
-	},
-	standfirst: {
-		mobile: 'grid-row: 4;',
-		desktop:
-			'grid-row: 4; grid-column: centre-column-start / right-column-start;',
-		leftCol:
-			'grid-row: 3; grid-column: centre-column-start / right-column-start;',
-	},
-	meta: {
-		mobile: 'grid-row: 5;',
-		leftCol:
-			'grid-row: 2 / span 3; grid-column: left-column-start / left-column-end;',
-	},
-	body: {
-		desktop:
-			'grid-row: 6; grid-column: centre-column-start / right-column-start;',
-		leftCol:
-			'grid-row: 4; grid-column: centre-column-start / right-column-start;',
-	},
-	'right-column': {
-		desktop:
-			'grid-row: 3 / span 4; grid-column: right-column-start / right-column-end;',
-		leftCol:
-			'grid-row: 2 / span 3; grid-column: right-column-start / right-column-end;',
+// Columns config
+const furnitureColumnDefaults: ColumnArrangementMap = {
+	title: { leftCol: 'left' },
+	meta: { leftCol: 'left' },
+	['right-column']: { desktop: 'right' },
+};
+
+// Array form means [gridLineStart, gridLineEnd] — used for custom-width spans
+const furnitureColumnArrangements: Record<LayoutType, ColumnArrangementMap> = {
+	standard: furnitureColumnDefaults,
+	media: {
+		...furnitureColumnDefaults,
+		'main-media': {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
+		standfirst: {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
+		body: {
+			desktop: ['centre-column-start', 'right-column-start'],
+		},
 	},
 };
 
-const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
-	standard: standardCss,
-	media: mediaCss,
+// Types
+type Rows = Area[][];
+
+type ArrangementDefinition = {
+	mobile?: Rows;
+	tablet?: Rows;
+	desktop?: Rows;
+	leftCol?: Rows;
+};
+
+type BreakpointColumns = Partial<
+	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
+>;
+
+type ColumnArrangementMap = Partial<Record<Area, BreakpointColumns>>;
+
+const breakpointQueries: Record<Breakpoint, string> = {
+	mobile: until.tablet,
+	tablet: from.tablet,
+	desktop: from.desktop,
+	leftCol: from.leftCol,
 };
 
 /**
@@ -116,9 +127,12 @@ const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
  * default column, its row at each breakpoint, and any column overrides.
  * The grid item _must_ be inside a {@link grid} module container.
  *
- * All items default to the centre column. Per-breakpoint overrides for
- * `grid-row` and `grid-column` are applied on top via media queries,
- * looked up from the plain CSS maps defined in this file.
+ * The output is built from three layers, applied in order (later wins):
+ * 1. **Default column** — all items start in the centre column.
+ * 2. **Row placement** — `grid-row` values per breakpoint, read directly
+ *    from {@link furnitureRowArrangements}.
+ * 3. **Column placement** — column overrides per breakpoint from
+ *    {@link furnitureColumnArrangements} (e.g. `meta` shifts left on wide screens).
  *
  * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`).
  * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups.
@@ -131,20 +145,46 @@ export const gridItemCss = (
 	area: Area,
 	layoutType: LayoutType,
 ): SerializedStyles => {
-	const areaOverrides = layoutCssMaps[layoutType][area] ?? {};
+	const layoutRowConfig = furnitureRowArrangements[layoutType];
+	const areaColumnsConfig =
+		furnitureColumnArrangements[layoutType][area] ?? {};
+
+	const rowPlacementCss = (
+		Object.entries(layoutRowConfig) as [Breakpoint, Rows][]
+	).flatMap(([breakpoint, rows]) => {
+		// Find which row indices the area appears in (1-indexed for CSS grid)
+		const rowIndicesOfArea = rows
+			.map((areas, i) => (areas.includes(area) ? i + 1 : null))
+			.filter((i): i is number => i !== null);
 
-	const breakpointCss = Object.entries(areaOverrides).map(
-		([bp, styles]) => css`
-			${breakpointQueries[bp as Breakpoint]} {
-				${styles}
+		if (rowIndicesOfArea.length === 0) return [];
+
+		const startingRow = rowIndicesOfArea[0];
+		const rowValue =
+			rowIndicesOfArea.length > 1
+				? `${startingRow} / span ${rowIndicesOfArea.length}`
+				: startingRow;
+
+		return css`
+			${breakpointQueries[breakpoint]} {
+				grid-row: ${rowValue};
 			}
-		`,
+		`;
+	});
+
+	const columnPlacementCss = Object.entries(areaColumnsConfig).map(
+		([breakpoint, colOrSpan]) => {
+			const colStyle = Array.isArray(colOrSpan)
+				? grid.between(colOrSpan[0], colOrSpan[1])
+				: grid.column[colOrSpan];
+
+			return css`
+				${from[breakpoint as keyof typeof from]} {
+					${colStyle};
+				}
+			`;
+		},
 	);
 
-	// All items default to the centre column; breakpoint entries above
-	// override grid-row and grid-column as needed.
-	return css`
-		grid-column: centre-column-start / centre-column-end;
-		${breakpointCss}
-	`;
+	return css([grid.column.centre, rowPlacementCss, columnPlacementCss]);
 };

From 17c28b086a023a647d1780e887bc819bf2acb764 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Thu, 30 Apr 2026 21:48:18 +0100
Subject: [PATCH 27/27] Rebase tidying

---
 dotcom-rendering/src/grid.ts | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index d01413a35ae..9161153a16d 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -110,18 +110,6 @@ const optionalCentreRule = `/* CENTRE RULE */
 	  }
     }`;
 
-// ----- API ----- //
-
-/**
- * Render Guardian grid vertical rules.
- *
- * Left and right rules are always present.
- * A centre rule can optionally be enabled.
- *
- * Usage:
- * css([grid.container, grid.verticalRules()])
- * css([grid.container, grid.verticalRules({ centre: true })])
- */
 const verticalRules = (options: VerticalRuleOptions = {}): string => `
   ${fromBreakpoint.tablet} {
     position: relative;
@@ -134,7 +122,6 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
       bottom: 0;
       width: 1px;
       background-color: ${palette('--article-border')};
-      pointer-events: none;
       content: '';
     }
 
@@ -163,6 +150,23 @@ const verticalRules = (options: VerticalRuleOptions = {}): string => `
 
 // ----- API ----- //
 
+/**
+ * Ask the element to span all grid columns between two grid lines. The lines
+ * can be specified either by `Line` name or by number.
+ * @param from The grid line to start from, either a `Line` name or a number.
+ * @param to The grid line to end at, either a `Line` name or a number.
+ * @returns {string} CSS to place the element on the grid.
+ *
+ * @example <caption>Will place the element in the centre column.</caption>
+ * const styles = css`
+ *   ${grid.between('centre-column-start', 'centre-column-end')}
+ * `;
+ *
+ * @example <caption>Will place the element between lines 3 and 5.</caption>
+ * const styles = css`
+ *   ${grid.between(3, 5)}
+ * `;
+ */
 const between = (from: Line | number, to: Line | number): string => `
     grid-column: ${from} / ${to};
 `;