diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 8121c5c5397..9fe131c12a6 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -1,9 +1,11 @@
// ----- Imports ----- //
import {
+ between as betweenBreakpoint,
breakpoints,
from as fromBreakpoint,
} from '@guardian/source/foundations';
+import { palette as themePalette } from './palette';
// ----- Columns & Lines ----- //
@@ -83,25 +85,78 @@ const paddedContainer = `
}
`;
-// ----- API ----- //
+// ----- Vertical Rules ----- //
+
+type VerticalRuleOptions = {
+ centre?: boolean;
+};
/**
- * 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.
+ * Render Guardian grid vertical rules.
*
- * @example
Will place the element in the centre column.
- * const styles = css`
- * ${grid.between('centre-column-start', 'centre-column-end')}
- * `;
+ * Left and right rules are always present.
+ * A centre rule can optionally be enabled.
*
- * @example
Will place the element between lines 3 and 5.
- * const styles = css`
- * ${grid.between(3, 5)}
- * `;
+ * Usage:
+ * css([grid.container, grid.verticalRules()])
+ * css([grid.container, grid.verticalRules({ centre: true })])
*/
+const optionalCentreRule = `/* CENTRE RULE */
+ & > *:first-child::before {
+ grid-column: centre-column-start;
+ justify-self: start;
+ transform: var(--centre-transform);
+ }`;
+
+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' : ''} {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: ${themePalette('--article-border')};
+ pointer-events: none;
+ content: '';
+ }
+
+ /* LEFT OUTER RULE */
+ &::before {
+ grid-column: centre-column-start;
+ justify-self: start;
+ transform: translateX(-${columnGap});
+
+ ${fromBreakpoint.leftCol} {
+ grid-column: left-column-start;
+ }
+ }
+
+ /* RIGHT OUTER RULE */
+ &::after {
+ grid-column: right-column-end;
+ justify-self: start;
+ transform: translateX(-1px);
+
+ ${betweenBreakpoint.tablet.and.desktop} {
+ grid-column: centre-column-end;
+ }
+ }
+
+ ${options.centre ? optionalCentreRule : ''}
+`;
+
+// ----- API ----- //
+
const between = (from: Line | number, to: Line | number): string => `
grid-column: ${from} / ${to};
`;
@@ -182,8 +237,14 @@ const grid = {
* breakpoint.
*/
mobileColumnGap,
+
+ verticalRules,
} as const;
+// ----- 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 ebe454b335d..23801b43ebf 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -1,7 +1,6 @@
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
import { log } from '@guardian/libs';
import {
- from,
palette as sourcePalette,
space,
until,
@@ -19,7 +18,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.importable';
import { DecideLines } from '../components/DecideLines';
import { DirectoryPageNav } from '../components/DirectoryPageNav';
@@ -30,7 +28,6 @@ import { Footer } from '../components/Footer';
import { GetMatchNav } from '../components/GetMatchNav.importable';
import { GetMatchStats } from '../components/GetMatchStats.importable';
import { GetMatchTabs } from '../components/GetMatchTabs.importable';
-import { GridItem } from '../components/GridItem';
import { GuardianLabsLines } from '../components/GuardianLabsLines';
import { HeaderAdSlot } from '../components/HeaderAdSlot';
import { Island } from '../components/Island';
@@ -42,13 +39,13 @@ import { MostViewedFooterData } from '../components/MostViewedFooterData.importa
import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.importable';
import { OnwardsUpper } from '../components/OnwardsUpper.importable';
-import { RightColumn } from '../components/RightColumn';
import { Section } from '../components/Section';
import { SlotBodyEnd } from '../components/SlotBodyEnd.importable';
import { Standfirst } from '../components/Standfirst';
import { StickyBottomBanner } from '../components/StickyBottomBanner.importable';
import { SubMeta } from '../components/SubMeta';
import { SubNav } from '../components/SubNav.importable';
+import { grid } from '../grid';
import {
ArticleDesign,
type ArticleFormat,
@@ -65,274 +62,9 @@ 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 { BannerWrapper, Stuck } from './lib/stickiness';
-const StandardGrid = ({
- children,
- isMatchReport,
- isMedia,
- isInFootballRedesignVariantGroup,
-}: {
- children: React.ReactNode;
- isMatchReport: boolean;
- isMedia: boolean;
- isInFootballRedesignVariantGroup: boolean;
-}) => (
-