YouTip

!(#) [Try it »](#) * * * ## CSS Grid Items A grid container contains one or more grid items. By default, a grid container has one grid item in each column and row, but you can also set grid items to span multiple columns or rows. Rows and columns are referred to by line numbers. ### The grid-column Property The grid-column property specifies a grid item's position in terms of where it starts and ends in a column. **Note:** grid-column is a shorthand property for grid-column-start and grid-column-end. You can set grid items by referring to line numbers, or you can use the keyword "span" to define how many columns the item will span. The following example sets "item1" to start at column line 1 and end before column line 5: ## Example .item1{grid-column:1 / 5; } [Try it »](#) The following example sets "item1" to span 3 columns: ## Example .item1{grid-column:1 / span 3; } [Try it »](#) The following example sets "item2" to span 3 columns: ## Example .item2{grid-column:2 / span 3; } [Try it »](#) ### The grid-row Property The grid-row property specifies a grid item's position in terms of where it starts and ends in a row. **Note:** grid-row is a shorthand property for grid-row-start and grid-row-end. You can set grid items by referring to line numbers, or you can use the keyword "span" to define how many rows the item will span. The following example sets "item1" to start at row line 1 and end before row line 4: ## Example .item1{grid-row:1 / 4; } [Try it »](#) The following example sets "item1" to span 2 rows: ## Example .item1{grid-row:1 / span 2; } [Try it »](#) ### The grid-area Property The grid-area property is a shorthand property for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. The following example sets "item8" to start at row 1, column 2, and end at row 5, column 6: ## Example .item8{grid-area:1 / 2 / 5 / 6; } [Try it »](#) The following example sets "item8" to start at row 2, column 1, and span 2 rows and 3 columns: ## Example .item8{grid-area:2 / 1 / span 2 / span 3; } [Try it »](#) * * * ## Naming Grid Items The grid-area property can be used to name grid items. Named grid items can be referenced by the container's grid-template-areas property. In the following example, item1 is named "