Skip to content

[Enhancement]: Add 1/3 and 2/3 (33/66) values to responsive dimension utilities #7429

Description

@Timo-Breumelhof

Is there an existing issue for this?

  • I have searched the existing issues

Description of problem

The responsive width/height utility classes (aperture-w-, aperture-h-, aperture-min-w-, aperture-min-h-, aperture-max-w-, aperture-max-h-) only support 0, 25, 50, 75, 100, and auto. There's no way to build a three-column layout (each pane at 1/3 width) without writing custom CSS outside the utility system.

Description of solution

Add 33 (33.33%) and 66 (66.66%) entries to the $sizes map in _dimension.scss, generating aperture-w--33, aperture-w--66 (and equivalents for the other dimension properties) at every breakpoint, consistent with the existing sizes.

Description of alternatives considered

No response

Anything else?

Additional context
Example use case — three equal panes side-by-side at md+, stacked full-width below it:

Do you plan to contribute code for this enhancement?

  • Yes

Would you be interested in sponsoring this enhancement?

  • Yes

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions