Grid container and grid items

Give a container display: flex, and five photo cards line up in one row. Give the same container display: grid and three column widths, and the cards form a table-like layout of two rows and three columns. Flexbox arranges items along one line at a time. CSS Grid arranges them in rows and columns at the same time, so an item's place depends on both directions.

The element with display: grid is the grid container. Each of its direct children becomes a grid item