CSS Grid Items

Learn how to control individual grid items with CSS Grid Item properties

What are CSS Grid Items?

CSS Grid Items are the direct children of a grid container. While the grid container defines the overall structure, grid item properties allow you to control the placement, alignment, and sizing of individual items within the grid.

Key Grid Item Properties:

  • grid-column - Positions item along the column axis
  • grid-row - Positions item along the row axis
  • grid-area - Positions item using shorthand or named areas
  • justify-self - Aligns item along the inline axis
  • align-self - Aligns item along the block axis
  • place-self - Shorthand for align-self and justify-self
  • order - Controls the order of items
  • z-index - Controls stacking order of overlapping items
1
2
3
Span 2
5

Ready to Try It Yourself?

Experiment with CSS Grid Item properties in our interactive editor. See your changes in real-time and build your understanding through practice.

CSS Grid Item Properties Reference

PropertyDescriptionValues
grid-column-startSpecifies where the item starts along the column axisline number, span n, auto
grid-column-endSpecifies where the item ends along the column axisline number, span n, auto
grid-columnShorthand for grid-column-start and grid-column-endstart-line / end-line, start-line / span n
grid-row-startSpecifies where the item starts along the row axisline number, span n, auto
grid-row-endSpecifies where the item ends along the row axisline number, span n, auto
grid-rowShorthand for grid-row-start and grid-row-endstart-line / end-line, start-line / span n
grid-areaShorthand for all four positioning values or a named arearow-start / column-start / row-end / column-end, area-name
justify-selfAligns item along the inline axis within its grid areastart, end, center, stretch
align-selfAligns item along the block axis within its grid areastart, end, center, stretch
place-selfShorthand for align-self and justify-selfalign justify
orderControls the order in which items appear in the gridinteger
z-indexControls the stacking order of overlapping itemsinteger

Grid Item Techniques

Item Positioning

Control where items are placed in the grid using line numbers.

1
2
3
Span 2
5

Named Areas

Position items using semantic named areas.

Header
Sidebar
Content

Item Alignment

Align items within their grid areas.

Start
Center
End

Order Control

Change the visual order of items without changing HTML.

1 (0)
2 (-1)
3 (0)

Best Practices for Grid Items

Effective Usage

  • Use semantic naming for grid areas
  • Keep positioning logic simple and maintainable
  • Use the span keyword for responsive designs
  • Combine with CSS variables for consistent layouts
  • Use order property for visual reordering without HTML changes
  • Take advantage of alignment properties for fine control

Common Mistakes to Avoid

  • Overcomplicating item positioning unnecessarily
  • Using too many explicit line numbers instead of spans
  • Forgetting to consider responsive behavior
  • Not using named areas for complex layouts
  • Ignoring accessibility concerns with visual reordering
  • Not testing overlapping items with z-index

Browser Support & Accessibility

  • CSS Grid Item properties are supported in all modern browsers
  • Use feature queries (@supports) for progressive enhancement
  • Ensure proper reading order for screen readers when using order property
  • Test keyboard navigation through grid items
  • Consider using ARIA attributes for complex grid layouts
  • Test with screen readers to ensure proper content flow

CSS Grid Items in Action

Example Code

/* CSS Grid Item Properties */

/* Grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  padding: 20px;
  background-color: #f5f5f5;
}

/* Grid items */
.grid-item {
  background-color: #3498db;
  color: white;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
}

/* Positioning items by line numbers */
.item-position-line {
  grid-column-start: 1; /* Start at column line 1 */
  grid-column-end: 3;   /* End at column line 3 */
  grid-row-start: 1;    /* Start at row line 1 */
  grid-row-end: 3;      /* End at row line 3 */
}

/* Shorthand for column and row positioning */
.item-position-shorthand {
  grid-column: 2 / 4;   /* Start at column line 2, end at column line 4 */
  grid-row: 1 / 2;      /* Start at row line 1, end at row line 2 */
}

/* Using span keyword */
.item-span {
  grid-column: 2 / span 2;  /* Start at column line 2, span 2 columns */
  grid-row: 2 / span 2;     /* Start at row line 2, span 2 rows */
}

/* Positioning with grid-area shorthand */
.item-grid-area {
  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}

/* Named grid areas */
.grid-container-areas {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 10px;
}

.header-item {
  grid-area: header;
  background-color: #e74c3c;
}

.sidebar-item {
  grid-area: sidebar;
  background-color: #2ecc71;
}

.content-item {
  grid-area: content;
  background-color: #3498db;
}

.ads-item {
  grid-area: ads;
  background-color: #f39c12;
}

.footer-item {
  grid-area: footer;
  background-color: #9b59b6;
}

/* Alignment for individual items */
.item-align-start {
  justify-self: start; /* Align item to start of grid area (horizontal) */
}

.item-align-center {
  justify-self: center; /* Center item horizontally in grid area */
}

.item-align-end {
  justify-self: end; /* Align item to end of grid area (horizontal) */
}

.item-align-stretch {
  justify-self: stretch; /* Stretch item to fill grid area (horizontal) */
}

.item-align-self-start {
  align-self: start; /* Align item to start of grid area (vertical) */
}

.item-align-self-center {
  align-self: center; /* Center item vertically in grid area */
}

.item-align-self-end {
  align-self: end; /* Align item to end of grid area (vertical) */
}

.item-align-self-stretch {
  align-self: stretch; /* Stretch item to fill grid area (vertical) */
}

/* Place self shorthand */
.item-place-self {
  place-self: center; /* Sets both align-self and justify-self */
}

/* Ordering items */
.item-order-first {
  order: -1; /* Display this item first */
}

.item-order-last {
  order: 1; /* Display this item last */
}

.item-order-custom {
  order: 5; /* Custom order value */
}

/* Z-index control for overlapping items */
.item-z-index {
  z-index: 1; /* Control stacking order */
}

.item-overlap {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 2;
  background-color: rgba(231, 76, 60, 0.8);
}

/* Minimum and maximum sizes for grid items */
.item-min-size {
  min-width: 150px;
  min-height: 80px;
}

.item-max-size {
  max-width: 300px;
  max-height: 200px;
}

/* Aspect ratio for grid items */
.item-aspect-ratio {
  aspect-ratio: 16 / 9;
}

/* Margin and padding for grid items */
.item-margin {
  margin: 10px;
}

.item-padding {
  padding: 20px;
}

/* Using CSS variables with grid items */
:root {
  --item-bg-color: #3498db;
  --item-text-color: white;
  --item-padding: 15px;
  --item-border-radius: 5px;
}

.grid-item-with-vars {
  background-color: var(--item-bg-color);
  color: var(--item-text-color);
  padding: var(--item-padding);
  border-radius: var(--item-border-radius);
}

/* Responsive grid items */
@media (max-width: 768px) {
  .responsive-item {
    grid-column: 1 / -1; /* Span all columns on mobile */
  }
}

/* Animation for grid items */
.item-animated {
  transition: all 0.3s ease;
}

.item-animated:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Nested grid as item */
.nested-grid-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 10px;
  background-color: #34495e;
}

.nested-grid-item > div {
  background-color: #3498db;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
}

Ready to Try It Yourself?

Experiment with CSS Grid Item properties in our interactive editor. See your changes in real-time and build your understanding through practice.

< PreviousNext >