Use grid module for StandardLayout, introduce vertical rules

[frederickobrien]

What does this change and why?

This refactors the StandardLayout to use the grid module, hopefully making it easier to reason with and style. This is with one eye on header standardisation work by @guardian/articles-and-publishing as well as a potential revamp of the interactive layout (see #15358).

As part of this I've had a stab at introducing verticalRules to the grid module, allowing for lines to be added if they're wanted. After a few iterations I've made this something that's pure CSS and baked into the grid module itself. verticalRules adds outer borders, while verticalRules({ centre: true }) adds an additional one to the left hand side of the centre column.

This wound up being almost exactly the same amount of code but I think the outcome is good, with the beefed up grid module being something that could be applied to other layouts going forward.

A glimpse of the sorts of things this could enable: #15509

Context

• https://guardian.github.io/storybooks/?path=/docs/dotcom-rendering_grid--docs
• https://developer.chrome.com/blog/gap-decorations

Examples of different layouts

Standard

• https://www.theguardian.com/money/2017/mar/10/ministers-to-criminalise-use-of-ticket-tout-harvesting-software

Showcase

• https://www.theguardian.com/music/2026/mar/06/morrissey-make-up-is-a-lie-album-review
• https://www.theguardian.com/wellness/2026/mar/06/seven-tips-experts-recommend-urinary-health

Screenshots

Before	After

[github-actions]

Deploy build 25432 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 25432 of dotcom:rendering-all to CODE
• Deploy parts of build 25432 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 974 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 974 of dotcom:ab-testing to CODE
• Deploy parts of build 974 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[domlander]

It may be easier to wait until the Football Redesign AB test is complete before merging this PR as it maybe be safer to ensure not disturbing their test. The WebX team have discussed here: #15402 (comment)

The gap between the center and right columns at the left-col breakpoint is now correct and looks infinitely better!

I'm also delighted to see negative margins be removed.

[domlander]

The 999 looks odd but I couldn't find a better solution. There doesn't look to be one for implicit rows: w3c/csswg-drafts#2402, so I think what you have might be best. I was mistaken before: grid-row: 1 / -1 only works for non-implicit grid rows I think.

[frederickobrien]

Yeah, I haven't found a nicer way. We could calculate the number of rows based on furniture layout but I could see that becoming gnarlier than the span 999 quite quickly

[frederickobrien]

Ok, I think I've cracked this with f21f751. By incorporating row spans into the furniture config we get the dual benefit of losing span 999 and (I think) making the furniture config more intuitive to use:

desktop: [
			['title', 'right-column'],
			['headline', 'right-column'],
			['standfirst', 'right-column'],
			['main-media', 'right-column'],
			['meta', 'right-column'],
			['body', 'right-column'],
		]