← Back to release summary

display:inline-grid/grid/inline-flex/flex for <button>

Category

CSS

Type

New or changed feature

Status

Enabled by default (Chrome 83)

Intent stage

Evaluate readiness to ship

• Breaking change: No
• Enterprise impact: None
• Spec maturity: Published standard
• Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/html/rendering/widgets/button-layout?label=master&label=experimental&aligned See flex.html and grid.html.

Summary

The 'display' keywords 'inline-grid', 'grid', 'inline-flex', and 'flex' property will now function with <button> when align item is applied.

Motivation

Standards & signals

• Specification: https://html.spec.whatwg.org/C/#button-layout
• Firefox: Shipped/Shipping
• Safari: No signal
• Web developers: No signals
• Tracking bug: http://crbug.com/700029

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=html%2Frendering%2Fwidgets%2Fbutton-layout
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+display%3Ainline-grid%2Fgrid%2Finline-flex%2Fflex%20for%20%3Cbutton%3E
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=display%3Ainline-grid%2Fgrid%2Finline-flex%2Fflex%20for%20%3Cbutton%3E
• Baseline status: https://webstatus.dev/?q=display%3Ainline-grid%2Fgrid%2Finline-flex%2Fflex%20for%20%3Cbutton%3E

Samples: https://codepen.io/jpmedley/pen/MWwmoQE

View on chromestatus.com