Responsive Sizing

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. ...