In the CSS Grid Layout Module, a grid item is any direct child of a grid container. Grid items are the elements that are placed within the grid and can be controlled individually or in groups. The module provides numerous properties that allow for precise placement and alignment of grid items within the grid container.
Key Properties of a Grid Item:
grid-column-start and grid-column-end:
Defines where a grid item starts and ends on the columns.
Example: grid-column: 1 / 3; places the item starting at the first column line and ending just before the third column line.
grid-row-start and grid-row-end:
Defines where a grid item starts and ends on the rows.
Example: grid-row: 2 / 4; places the item starting at the second row line and ending just before the fourth row line.
grid-area:
Allows you to assign an item to a specific grid area, defined in the grid container.
Example: grid-area: header; places the item in the grid area named “header”.
justify-self:
Controls the alignment of an individual grid item along the inline (row) axis.
Example: justify-self: center; centers the item horizontally within its grid cell.
align-self:
Controls the alignment of an individual grid item along the block (column) axis.
Example: align-self: end; aligns the item to the end (bottom) of its grid cell.
grid-column:
A shorthand for grid-column-start and grid-column-end.
Example: grid-column: 1 / span 2; makes the item span across two columns starting from the first column line.
grid-row:
A shorthand for grid-row-start and grid-row-end.
Example: grid-row: 2 / span 3; makes the item span across three rows starting from the second row line.
Sign In or to comment.