The CSS `width` property sets an element’s horizontal size. The value you choose can make a card adapt to the window, make a child fill its parent, or keep a control a precise size. section 6.4 section 9.2.1 section 11.5.3
A card that can shrink
Set `.card { width: 75vw; max-width: 500px; }`. The card takes 75% of the browser window’s width, but stops growing at 500 pixels. Pairing `width` with `max-width` keeps it flexible on narrow screens without letting it become too wide on large ones. section 6.4
Faces that fill a card
Give a credit-card container `max-width: 430px`, then give its front and back faces `width: 100%`. Each face expands to match the available width of its parent. The container’s `margin: auto` centers the card horizontally. section 9.2 section 9.2.1
Width also shapes smaller interactions:
- Set both `width` and `height` to `48px` for a share link with a circular border rather than an elliptical one; center its 24-pixel icon inside. section 11.5.3
- Set a share menu to `width: 0` with `overflow: hidden` to conceal its links, then give it `width: 200px` in its expanded state. section 11.6.2
- Add `transition: width 250ms ease-in-out` to animate that change. If icons appear too soon, width alone is not the fix: overflow needs separate handling because it cannot change gradually. section 11.6.3
In an SVG loader, `width` also appears as an attribute: eleven `<rect>` elements each have `width="60"`, while the containing `<svg>` has `width="100%"`. Here the rectangles form evenly spaced bars, and the graphic resizes with the window. section 3.2.4
