v150 · CSS · Grid Track Comparison

Grid Track Comparison

fit-content() has existed in CSS Grid for years. Chrome 150 extends it to ordinary element sizing properties. This page compares the two usage contexts side by side.

Chrome 150 required for the element-width column (right side). The grid track column (left side) works in all modern browsers.

side by side

Grid track sizing (all browsers)

grid-template-columns: fit-content(180px) 1fr
Short
rest of row →
Medium label text
rest of row →
Very long label that exceeds the cap of 180px set on this column
rest of row →

Element sizing (Chrome 150+)

width: fit-content(180px) on each badge
Short
Medium label text
Very long label that exceeds the cap of 180px set on this element

where fit-content() works

Property Before Chrome 150 Chrome 150+
grid-template-columns ✓ Supported ✓ Supported
grid-template-rows ✓ Supported ✓ Supported
width ✗ Not supported ✓ Supportednew
height ✗ Not supported ✓ Supportednew
min-width / max-width ✗ Not supported ✓ Supportednew
min-height / max-height ✗ Not supported ✓ Supportednew
inline-size / block-size ✗ Not supported ✓ Supportednew

code

/* Grid track usage (works everywhere) */
.layout {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

/* Element sizing usage (Chrome 150+) */
.badge {
  width: fit-content(200px);    /* new in Chrome 150 */
}
.caption {
  max-width: fit-content(40%);  /* new in Chrome 150 */
}
.sidebar {
  inline-size: fit-content(280px); /* logical properties too */
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.