Responsive Sizing

Explore CSS intrinsic sizing and responsive design techniques, including keywords like min-content and math functions like min().

We'll cover the following

One way to size elements without media queries is to use intrinsic sizing. Using intrinsic methods means that the element’s content influences the size, as opposed to inheriting extrinsic sizing instructions from set styles. An image may intrinsically be 300px wide, but often in CSS, we’ll explicitly size it, such as by setting its width to 100px.

CSS intrinsic sizing keywords

There are three keywords available in CSS for intrinsic sizing, which can be used in flexbox, grid, and other properties that accept a length value.

The behavior of the keywords below, when applied to the width or inline-size properties, is as follows:

  • min-content: Length of longest word, with soft wrapping applied

  • max-content: Length of all content

  • fit-content: Length of max-content unless that size exceeds available space, after which wrapping is allowed

The following executable code shows live examples of using these intrinsic sizing keywords:

Get hands-on with 1400+ tech skills courses.