The CSS `display` property changes how an element behaves in a layout. An element might take a line to itself, sit alongside text, or arrange its children in a grid or flex layout. Choose the value for the visual job you need, then add properties that control spacing and alignment. section 2.2 section 6.4
Three useful starting points are:
- `display: block` makes an inline element behave like a block-level box. For a newspaper date, it lets a `<time>` element take the available width so its borders span the page. section 4.1.5
- `display: grid` goes on a parent whose direct children should become grid items. `inline-grid` instead makes the grid itself an inline-level box. section 2.2
- `display: flex` goes on a parent when its children need a single-axis layout. Add `justify-content`, `align-items`, or `gap` to control their placement and spacing. section 6.4 section 6.7.2
Center a profile card
With the card inside `<body>`, start with `body { display: flex; }`. Add `justify-content: center` to center the card along the axis and `align-items: center` to center it vertically. The declaration belongs on `<body>` because the card is the child being positioned. section 6.4
A new grid may not look different immediately: without defined columns, direct children form one column and the browser adds rows for them. Inspect the parent in browser developer tools to confirm the grid exists. You can then define columns, rows, or areas as the layout requires. Keep the source and visual order logical, and check tabbing order when unsure. section 2.2 section 2.7
The single declaration that turns `<main>` into a grid container; it is a useful first step even before columns are defined. section 2.2
Display can change with screen width. In a checkout layout, a media query sets the sections’ parent to `display: flex` on wide screens, placing the cart and summary side by side; `gap`, `flex-grow`, and `flex-basis` then refine their spacing and widths. Flex also works at a smaller scale: a button can use it to align an icon with its label. section 8.5 section 11.5.1
