? CSS Grid Item

A Grid Item is any direct child of a CSS Grid Container. These items are placed into the grid cells (the intersection of rows and columns) and can be precisely controlled using various CSS Grid properties.

Key Properties for Grid Items

Positioning Grid Items by Lines

You can position a grid item by specifying the grid lines it should start and end on.

.item {  grid-column: 2 / 4; /* spans from column line 2 up to (but not including) 4 */  grid-row: 1 / 3;    /* spans from row line 1 to 3 */}

Example: Grid Item Spanning Multiple Cells

<div class="container">  <div class="item1">Item 1</div>  <div class="item2">Item 2</div>  <div class="item3">Item 3</div></div>

.container {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: 100px 100px;  gap: 10px;}.item2 {  grid-column: 2 / 4; /* spans 2 columns */  grid-row: 1 / 3;    /* spans 2 rows */  background-color: lightcoral;}

Aligning Individual Items

.item1 {  justify-self: center; /* horizontally centers the item */  align-self: end;      /* aligns item to the bottom of its cell */}

Summary

• Grid Items are direct children of the grid container.

• Use grid-column and grid-row to position and span items.

• Use justify-self and align-self to align items inside their grid cells.

• grid-area is a shorthand or can reference named grid areas.

Want me to show examples with named grid areas or how to combine grid items with responsive layouts?