CSS Feature Support Checker

Layout & Sizing

Modern layout systems, sizing functions, and spatial control for responsive interfaces.

• ⏳ aspect-ratio

  Define width-to-height ratio for elements.

  aspect-ratio: 16 / 9MDN
• ⏳ CSS Grid

  Two-dimensional layout systems with named areas and tracks.

  display: gridMDN
• ⏳ Flexbox

  One-dimensional flexible box layout system.

  display: flexMDN
• ⏳ Subgrid

  Grandchild elements that align to the tracks of a parent grid.

  grid-template-columns: subgridMDN
• ⏳ gap

  Spacing between Grid and Flexbox items.

  gap: 1remMDN
• ⏳ Container Queries

  Style children based on ancestor container dimensions rather than the viewport.

  container-type: inline-sizeMDN
• ⏳ object-fit

  Control how replaced elements resize within containers.

  object-fit: coverMDN
• ⏳ object-position

  Position replaced content within element box.

  object-position: center topMDN
• ⏳ object-view-box

  Define viewport region for replaced elements.

  object-view-box: inset(0)MDN
• ⏳ clamp()

  Clamp values between minimum and maximum.

  width: clamp(10px, 50%, 100px)MDN
• ⏳ minmax()

  Define size range for Grid tracks.

  grid-template-columns: minmax(100px, 1fr)MDN
• ⏳ auto-fit / auto-fill

  Automatically adjust Grid columns to available space.

  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))MDN
• ⏳ block-size / inline-size

  Logical sizing properties for flow-relative dimensions.

  block-size: 100pxMDN
• ⏳ max-block-size / min-block-size

  Logical constraints for block dimensions.

  max-block-size: 500pxMDN
• ⏳ max-inline-size / min-inline-size

  Logical constraints for inline dimensions.

  max-inline-size: 80chMDN
• ⏳ field-sizing

  Control form field intrinsic sizing behavior.

  field-sizing: contentMDN