Codectionary / Developer documentation / CSS

Flexible Grid Tracks with minmax

minmax sets a minimum and maximum track size rather than one fixed width.

What it is and why to use it

minmax sets a minimum and maximum track size rather than one fixed width. A common flexible layout uses minmax(0, 1fr) so a track may shrink below its automatic content-based minimum. This is useful when long content would otherwise force a grid wider than its container.

Common mistakes and limitations

An fr value represents a share of available space, not an unconditional percentage of total container width. A zero minimum does not itself wrap overflowing content. Pair sizing decisions with an appropriate overflow policy.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="layout"><div>Navigation</div><div>A_long_identifier_that_needs_to_wrap_in_a_narrow_column</div></div>

Syntax

grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

Examples

Flexible Grid Tracks with minmax

Run the CSS against the supplied HTML, then experiment with the values.

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
.layout > div { padding: 1rem; background: #dbeafe; color: #172b4d; overflow-wrap: anywhere; }
  1. The two tracks divide free space in a one-to-two ratio after gaps and other constraints.
  2. A zero minimum lets either track shrink, while overflow-wrap provides a way for the long identifier to wrap.
  3. Changing the minimum to a larger fixed value demonstrates why minimum sizes can still cause overflow. This pattern is useful for dashboards and split layouts.
HTML used by this example
<div class="demo"><div class="layout"><div>Navigation</div><div>A_long_identifier_that_needs_to_wrap_in_a_narrow_column</div></div></div>

Best practices

  • An fr value represents a share of available space, not an unconditional percentage of total container width. A zero minimum does not itself wrap overflowing content. Pair sizing decisions with an appropriate overflow policy.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading