Native layout boolean attributes for HTML elements (flex, grid, wrap)

What is the issue with the HTML Standard?

Problem Statement

Currently, applying common layout patterns such as flexbox or grid to an HTML element requires either writing external CSS, adding utility class libraries (Tailwind, Bootstrap), or using inline styles. There is no way to express fundamental layout intent directly in HTML markup.

This forces developers to context-switch between HTML and CSS for even the most basic structural decisions, and introduces a dependency on external tooling just to achieve layouts that are essentially universal in modern web development.

Proposed Solution

Introduce a set of native boolean/value attributes that apply common layout behaviors directly on HTML elements — similar in spirit to how hidden, disabled, and required already express behavior declaratively in HTML.

Proposed attributes:

• flex — applies display: flex
• flex-wrap — applies display: flex; flex-wrap: wrap
• flex-between — applies display: flex; justify-content: space-between
• flex-center — applies display: flex; align-items: center; justify-content: center
• grid — applies display: grid
• flex-col — applies display: flex; flex-direction: column

Example Usage

<!-- Today (requires CSS or utility classes) -->
<div class="flex flex-wrap justify-between">
  <div>Card 1</div>
  <div>Card 2</div>
</div>

<!-- Proposed (native HTML) -->
<div flex-wrap flex-between>
  <div>Card 1</div>
  <div>Card 2</div>
</div>

Precedent in HTML

HTML already ships layout-influencing attributes: hidden applies display: none, the deprecated <center> tag and align attribute controlled layout, and colspan/rowspan control grid-like structure in tables. This proposal extends that philosophy to modern layout primitives.

Why Not Just Use CSS / Tailwind?

Tailwind and similar utilities solve this problem well — but they are external dependencies. A developer building a lightweight project, a web component author, or someone writing raw HTML should not need a build tool or third-party library to express that a container is a flex row. Native support would reduce friction and improve the out-of-the-box authoring experience.

Concerns / Open Questions

• Does this violate the separation of structure (HTML) and presentation (CSS)?
• Should these use the data- prefix to remain valid in current HTML spec?
• Could this be addressed instead as a CSS Working Group proposal for shorthand attribute selectors?

Happy to hear pushback raising this to start the conversation, not to demand a specific solution.

No implementation files or tests are named. Start by reading the HTML Standard's existing treatment of attributes such as hidden, disabled, required, align, colspan, and rowspan, then examine how the proposal addresses CSS separation, data- attributes, and CSS Working Group ownership. Done means the standards questions have a clear resolution and an agreed specification path.