CSS Feature Support Checker

Layout

Modern layout systems and alignment primitives for responsive interfaces.

• ⏳ CSS Grid

  Two-dimensional layout systems with named areas and tracks.

  display: gridMDN
• ⏳ grid-template-areas

  Name Grid areas and place items using area mapping.

  grid-template-areas: "a a" "b b"MDN
• ⏳ grid-auto-flow: dense

  Allow Grid auto-placement to backfill gaps in earlier rows/columns.

  grid-auto-flow: row denseMDN
• ⏳ place-items / place-content / place-self

  Alignment shorthands for aligning items and content in Grid/Flex.

  place-items: centerMDN
• ⏳ place-content

  Shorthand for aligning Grid/Flex lines in the container.

  place-content: centerMDN
• ⏳ place-self

  Shorthand for aligning a single Grid/Flex item.

  place-self: centerMDN
• ⏳ justify-items

  Control inline-axis alignment of items inside a grid container.

  justify-items: centerMDN
• ⏳ justify-self

  Control inline-axis alignment for a single grid item.

  justify-self: centerMDN
• ⏳ repeat()

  Repeat Grid tracks without duplicating template definitions.

  grid-template-columns: repeat(3, 1fr)MDN
• ⏳ grid-template (shorthand)

  Define rows and columns in a single Grid shorthand.

  grid-template: auto / 1fr 2frMDN
• ⏳ grid-row / grid-column

  Place Grid items using line-based placement shorthands.

  grid-column: 1 / -1MDN
• ⏳ grid-area

  Place Grid items with the grid-area shorthand (lines or named areas).

  grid-area: 1 / 1 / 2 / 3MDN
• ⏳ span placement

  Span grid items across tracks using the span keyword.

  grid-column: span 2MDN
• ⏳ grid-auto-rows / grid-auto-columns

  Size implicit Grid tracks created by auto-placement.

  grid-auto-rows: minmax(80px, auto)MDN
• ⏳ Flexbox

  One-dimensional flexible box layout system.

  display: flexMDN
• ⏳ inline-flex

  Create a flex container that participates in inline flow.

  display: inline-flexMDN
• ⏳ flex-wrap

  Allow flex items to wrap onto multiple lines.

  flex-wrap: wrapMDN
• ⏳ align-items: baseline

  Align items by their typographic baselines.

  align-items: baselineMDN
• ⏳ align-self

  Override align-items alignment for a single flex/grid item.

  align-self: centerMDN
• ⏳ flex-direction

  Control the main axis direction for flex layout.

  flex-direction: columnMDN
• ⏳ flex-flow (shorthand)

  Shorthand for flex-direction and flex-wrap.

  flex-flow: row wrapMDN
• ⏳ flex (shorthand)

  Shorthand for flex-grow, flex-shrink, and flex-basis.

  flex: 1 1 autoMDN
• ⏳ order

  Reorder flex items independent of source order.

  order: 1MDN
• ⏳ flex-basis: content

  Size flex items based on their intrinsic content size.

  flex-basis: contentMDN
• ⏳ justify-content: space-evenly

  Distribute free space evenly between and around items.

  justify-content: space-evenlyMDN
• ⏳ 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
• ⏳ row-gap / column-gap

  Axis-specific gaps for multi-row/column layouts.

  row-gap: 1remMDN
• ⏳ Container Queries

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

  container-type: inline-sizeMDN
• ⏳ 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
• ⏳ Masonry (draft)

  Masonry-style grid track sizing (experimental / draft support).

  grid-template-rows: masonryMDN