Make centre rule configurable in grid module

[frederickobrien]

This rejigs the verticalRules option added to the grid module in #15760 so that its configurable to the nth child of the grid, rather than the first by default. This has come up while working on #15358 and #15922 and feels like a worthwhile change in its own right as the central rule is likely to align with different pieces of article furniture depending on the layout (and breakpoint).

Instead of a binary yes/no on the centre rule which applies to the first child regardless, this makes it more controlled by separating verticalRules and centreRule into separate options:

${grid.container}
${grid.outerRules()}
${grid.centreRule(1)}
 
${from.leftCol} {
	${grid.centreRule(3)}
}

As a proving ground this PR applies the new approach to the gallery layout, which was the first to adopt grid-based vertical rules in #15776. I've also applied it to #15428 and it feels pretty tidy.

[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.

[github-actions]

Deploy build 27876 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 1761 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[JamieB-gu]

It looks like the centre column has disappeared for the images at the desktop breakpoint? I can only see it appearing on the ads.

[frederickobrien]

It looks like the centre column has disappeared for the images at the desktop breakpoint? I can only see it appearing on the ads.

Ah yep, my bad. Fixed with 940bc29

[JamieB-gu]

Thanks @frederickobrien . Looking at your screenshot above it looks like you've picked up an extra border on the left hand side with that change?

A few other small comments.

[JamieB-gu]

I may be misunderstanding something, but what does the "plus" refer to in plusChild?

[frederickobrien]

That was the idea yes but agree it's unclear. Have changed to a stadndalone centreRule which together with the number is more readable I think(?). E.g.

${grid.centreRule(2)}

[frederickobrien]

It looks like the centre column has disappeared for the images at the desktop breakpoint? I can only see it appearing on the ads.

Ah yep, my bad. Fixed with 940bc29

Eep sorry yes. Have fixed in 1ee0fca. Here's a gallery piece at different breakpoints...

Tablet:

Desktop:

LeftCol:

[frederickobrien]

After thinking about it I've gone a step further and separated outerRules (formerly verticalRules) and centreRule into distinct options in the grid module. @JamieB-gu I think you actually suggested something like this when we first discussed it a while back?

${grid.container}
${grid.outerRules()}
${grid.centreRule(1)}
 
${from.leftCol} {
	${grid.centreRule(3)}
}

I think this is more readable and allows for flexibility across breakpoints.

[JamieB-gu]

Looks good, a few last comments.

[gu-prout]

Seen on PROD (merged by @frederickobrien 8 minutes and 19 seconds ago) Please check your changes!