CSS Grid Alignment

Learn how to control item positioning with CSS Grid Alignment properties

What is CSS Grid Alignment?

CSS Grid Alignment properties allow you to control how grid items are positioned and aligned within their grid cells and how the entire grid is aligned within its container. These properties provide precise control over both item-level and container-level alignment.

Key Grid Alignment Properties:

  • justify-items - Aligns items along the row (inline) axis
  • align-items - Aligns items along the column (block) axis
  • place-items - Shorthand for align-items and justify-items
  • justify-content - Aligns the grid along the row axis
  • align-content - Aligns the grid along the column axis
  • place-content - Shorthand for align-content and justify-content
  • justify-self - Aligns an individual item along the row axis
  • align-self - Aligns an individual item along the column axis
  • place-self - Shorthand for align-self and justify-self
1
2
3
4
5
6

CSS Grid Alignment Properties Reference

PropertyDescriptionValues
justify-itemsAligns items along the row (inline) axisstart, end, center, stretch
align-itemsAligns items along the column (block) axisstart, end, center, stretch
place-itemsShorthand for align-items and justify-items<align-items> <justify-items>
justify-contentAligns the grid along the row axisstart, end, center, stretch, space-around, space-between, space-evenly
align-contentAligns the grid along the column axisstart, end, center, stretch, space-around, space-between, space-evenly
place-contentShorthand for align-content and justify-content<align-content> <justify-content>
justify-selfAligns an individual item along the row axisstart, end, center, stretch
align-selfAligns an individual item along the column axisstart, end, center, stretch
place-selfShorthand for align-self and justify-self<align-self> <justify-self>

CSS Grid Alignment in Action

Example Code

/* CSS Grid Alignment Properties */

/* Container alignment properties */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  
  /* Align items along the row axis (horizontal) */
  justify-items: start; /* start | end | center | stretch */
  
  /* Align items along the column axis (vertical) */
  align-items: start; /* start | end | center | stretch */
  
  /* Shorthand for align-items and justify-items */
  place-items: center; /* <align-items> <justify-items> */
  
  /* Align the entire grid along the row axis */
  justify-content: start; /* start | end | center | stretch | space-around | space-between | space-evenly */
  
  /* Align the entire grid along the column axis */
  align-content: start; /* start | end | center | stretch | space-around | space-between | space-evenly */
  
  /* Shorthand for align-content and justify-content */
  place-content: center; /* <align-content> <justify-content> */
}

/* Item alignment properties */
.grid-item {
  background-color: #3498db;
  color: white;
  padding: 10px;
  border-radius: 5px;
  
  /* Align individual item along the row axis */
  justify-self: start; /* start | end | center | stretch */
  
  /* Align individual item along the column axis */
  align-self: start; /* start | end | center | stretch */
  
  /* Shorthand for align-self and justify-self */
  place-self: center; /* <align-self> <justify-self> */
}

/* Examples of different alignment values */

/* Justify-items examples */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

/* Align-items examples */
.align-items-start { align-items: start; }
.align-items-end { align-items: end; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }

/* Place-items examples */
.place-items-center { place-items: center; }
.place-items-start { place-items: start; }
.place-items-end { place-items: end end; }

/* Justify-content examples */
.justify-content-start { justify-content: start; }
.justify-content-end { justify-content: end; }
.justify-content-center { justify-content: center; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-space-around { justify-content: space-around; }
.justify-content-space-evenly { justify-content: space-evenly; }
.justify-content-stretch { justify-content: stretch; }

/* Align-content examples */
.align-content-start { align-content: start; }
.align-content-end { align-content: end; }
.align-content-center { align-content: center; }
.align-content-space-between { align-content: space-between; }
.align-content-space-around { align-content: space-around; }
.align-content-space-evenly { align-content: space-evenly; }
.align-content-stretch { align-content: stretch; }

/* Place-content examples */
.place-content-center { place-content: center; }
.place-content-space-between { place-content: space-between; }

/* Justify-self examples */
.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }
.justify-self-center { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

/* Align-self examples */
.align-self-start { align-self: start; }
.align-self-end { align-self: end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }

/* Place-self examples */
.place-self-center { place-self: center; }
.place-self-start { place-self: start; }

/* Grid with auto rows/columns and alignment */
.grid-auto-alignment {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 80px;
  gap: 10px;
  
  /* Alignment for auto-created rows */
  align-content: space-between;
  
  /* Alignment for auto-created columns */
  justify-content: space-evenly;
}

/* Using minmax with alignment */
.grid-minmax-alignment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: minmax(60px, auto);
  gap: 15px;
  align-items: center;
  justify-items: center;
}

/* Grid with intrinsic sizing and alignment */
.grid-intrinsic {
  display: grid;
  grid-template-columns: min-content max-content fit-content(200px);
  grid-template-rows: min-content 1fr;
  gap: 10px;
  align-items: end;
  justify-items: start;
}

/* Masonry layout with alignment (experimental) */
.grid-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
  gap: 15px;
  align-items: start;
  justify-items: center;
}

/* Nested grid alignment */
.nested-grid-alignment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
}

.nested-grid-alignment > div {
  display: grid;
  place-items: center;
  background-color: rgba(52, 152, 219, 0.3);
  padding: 10px;
}

/* Responsive alignment */
@media (max-width: 768px) {
  .responsive-alignment {
    justify-items: center;
    align-items: start;
  }
}

/* Using CSS variables for alignment */
:root {
  --grid-justify: center;
  --grid-align: center;
  --grid-gap: 15px;
}

.grid-with-vars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: var(--grid-gap);
  justify-items: var(--grid-justify);
  align-items: var(--grid-align);
}

/* Animation with alignment */
.grid-animated-alignment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  transition: all 0.3s ease;
}

.grid-animated-alignment:hover {
  justify-items: end;
  align-items: end;
}

/* Grid with fractional units and alignment */
.grid-fractional-alignment {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 3fr;
  gap: 15px;
  justify-content: space-between;
  align-content: space-around;
}

/* Grid with explicit track sizing and alignment */
.grid-explicit-alignment {
  display: grid;
  grid-template-columns: [start] 100px [center] 200px [end];
  grid-template-rows: [top] 80px [middle] 120px [bottom];
  gap: 20px;
  justify-items: center;
  align-items: end;
}

Grid Alignment Techniques

Item Alignment

Control how items are positioned within their grid cells.

1
2
3
4
5
6

Grid Alignment

Control how the entire grid is positioned within its container.

1
2
3
4
5
6

Individual Item Control

Align individual items differently from others.

Start
Center
End
4
5
6

Space Distribution

Distribute space between grid tracks.

1
2
3
4
5
6

Best Practices for Grid Alignment

Effective Usage

  • Use consistent alignment throughout your layout
  • Prefer shorthand properties (place-items, place-content) when possible
  • Use stretch alignment for items that should fill their cells
  • Consider using space distribution for equal spacing
  • Use individual item alignment for specific positioning needs
  • Combine with CSS variables for maintainable code

Common Mistakes to Avoid

  • Using too many different alignment values in one grid
  • Forgetting that stretch is the default alignment
  • Not testing alignment with different content sizes
  • Overusing individual alignment when container alignment would work
  • Ignoring responsive considerations for alignment
  • Not using the appropriate space distribution method

Browser Support & Accessibility

  • CSS Grid Alignment properties are supported in all modern browsers
  • Use feature queries (@supports) for progressive enhancement
  • Ensure proper reading order when using alignment properties
  • Test with various content lengths to ensure layout stability
  • Consider using logical properties for RTL and vertical writing modes
  • Test keyboard navigation through aligned grid items

Ready to Try It Yourself?

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

< PreviousNext >