[Bug]: Block styles: 2-column, 3-column, 4-column do not take into account the gap.

[sunmorgn]

Describe the bug

Currently, the column styles use simple percentage widths:

• 2 Columns: 50%
• 3 Columns: 33.333%
• 4 Columns: 25%

This works fine until you set a slide gap

Expected behavior

The slide widths should calculate with the gap

Actual behavior

Solution:

.rt-carousel {
	&.is-style-columns-2 {
		--rt-carousel-slide-width: calc(
			(100% - (var(--rt-carousel-gap, 0px) * 1)) / 2
		);
	}

	&.is-style-columns-3 {
		--rt-carousel-slide-width: calc(
			(100% - (var(--rt-carousel-gap, 0px) * 2)) / 3
		);
	}

	&.is-style-columns-4 {
		--rt-carousel-slide-width: calc(
			(100% - (var(--rt-carousel-gap, 0px) * 3)) / 4
		);
	}
}

Steps to reproduce

n/a

Environment information

n/a

WordPress Environment

n/a

Contribution Guidelines

• I have read the contribution guidelines

[aadil42]

Hey @sunmorgn! I've looked into this and the fix is pretty straight forward.
I have created a PR that solves this issue please take a look.

Demo:

compressed.Screen.Recording.2026-06-04.at.5.mp4