A grid item is a child element inside a grid container. Think of the container as a tray and its children as the things placed on that tray: once the parent uses display: grid, each direct child automatically becomes a grid item. No special badge, class, or extra declaration is required. section 13.1 section 13.2
<div class="container"> #1
<div class="item itema">a</div> #2
<div class="item itemb">b</div> #2
<div class="item itemc">c</div> #2
<div class="item itemd">d</div> #2
<div class="item iteme">e</div> #2
<div class="item itemf">f</div> #2
</div> #1
Here the outer .container element is the grid container, and the six inner div elements—itema through itemf—are grid items. section 13.2
At first, turning on Grid can look underwhelming. Without defined rows and columns, the browser has made a one-column grid, so the items still appear stacked in their usual flow. Define the grid’s rows and columns next, and the items have somewhere more interesting to go. section 13.2
By default, the browser assigns each grid item to one cell. To take control, place an item with grid-column-start and grid-row-start. Optionally use grid-column-end or grid-row-end to stop at a line, reach end, or span a number of columns or rows. Grid lines are numbered from 1, and a grid area can cover one or more cells. section 13.7
Make an item stretch across the grid
An item beginning at column line 2 can end at line 5. The equivalent grid-column-end: span 3 says, more plainly, “start here and occupy three columns.” The same choices work vertically with grid-row-start and grid-row-end. A useful little shortcut is grid-column or grid-row, which combines the start and end values. section 13.7
Placement decides where an item lives; alignment adjusts how items are arranged. On the grid container, justify-content controls arrangement along the row axis and align-content along the column axis. The related justify-items and align-items properties control alignment within an item’s column or row. Stretch is the default—Grid likes to be helpful before you ask. section 13.9 section 13.10
