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