Skip to main content

Grid Alignment

In CSS Grid Layout, alignment and justification are key concepts that allow you to control the position of items within the grid container as well as the grid tracks themselves.

Types of Alignment​

  1. Content Alignment: Aligns the grid items within their respective grid areas.
  2. Track Alignment: Aligns the grid tracks within the grid container.

Content Alignment​

justify-items​

The justify-items property in CSS Grid Layout controls the default alignment of all grid items along the inline (row) axis within their respective grid areas. This property is particularly useful for horizontally aligning content within grid cells.

Basic Usage​

The justify-items property can take several values:

  • start: Aligns the grid items to the start of their grid area.
  • end: Aligns the grid items to the end of their grid area.
  • center: Centers the grid items within their grid area.
  • stretch: Stretches the grid items to fill the entire grid area (default).
/* Using justify-items to center the grid items horizontally */
.container {
  justify-items: center;
}

Practical Examples​

  1. Centering Content Horizontally

    If you have a grid with items that don't take up the full width of their grid cells, you can use justify-items: center; to center the items horizontally.

    .container {
      justify-items: center;
    }

  2. Aligning to the Start

    To align all items to the left side of their grid cells, you can use justify-items: start;.

    .container {
      justify-items: start;
    }

Best Practices​

  1. Individual Control: Use justify-self on individual grid items if you need to override the default alignment set by justify-items.
  2. Responsive Design: Use media queries to adjust the justify-items value based on different screen sizes for a responsive layout.
  3. Semantic Code: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The stretch value will cause items to stretch to fill their grid area, provided width is not explicitly set.
  • The justify-items property aligns items within their grid areas and does not affect the size or placement of the grid tracks themselves.

align-items​

The align-items property in CSS Grid Layout is used to control the default alignment of all grid items along the block (column) axis within their respective grid areas. This property is particularly useful for vertically aligning content within grid cells.

Basic Usage​

The align-items property can take several values:

  • start: Aligns the grid items to the start of their grid area.
  • end: Aligns the grid items to the end of their grid area.
  • center: Centers the grid items within their grid area.
  • stretch: Stretches the grid items to fill the entire grid area (default).
/* Using align-items to center the grid items vertically */
.container {
  align-items: center;
}

Practical Examples​

  1. Centering Content Vertically

    If you have a grid with items that don't take up the full height of their grid cells, you can use align-items: center; to center the items vertically.

    .container {
      align-items: center;
    }

  2. Aligning to the Start

    To align all items to the top side of their grid cells, you can use align-items: start;.

    .container {
      align-items: start;
    }

Best Practices​

  1. Individual Control: Use align-self on individual grid items if you need to override the default alignment set by align-items.
  2. Responsive Design: Use media queries to adjust the align-items value based on different screen sizes for a responsive layout.
  3. Semantic Code: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The stretch value will cause items to stretch to fill their grid area, provided height is not explicitly set.
  • The align-items property aligns items within their grid areas and does not affect the size or placement of the grid tracks themselves.

justify-self​

The justify-self property in CSS Grid Layout is used to control the alignment of an individual grid item along the inline (row) axis within its grid area. This property allows you to override the default alignment set by the justify-items property on the grid container for specific grid items.

Basic Usage​

The justify-self property can take several values:

  • start: Aligns the grid item to the start of its grid area.
  • end: Aligns the grid item to the end of its grid area.
  • center: Centers the grid item within its grid area.
  • stretch: Stretches the grid item to fill the entire grid area.
/* Using justify-self to center a specific grid item horizontally */
.item {
  justify-self: center;
}

Practical Examples​

  1. Centering a Specific Item

    If you have a grid where most items are aligned to the start but one needs to be centered, you can use justify-self: center; on that specific item.

    .special-item {
      justify-self: center;
    }

  2. Aligning to the End

    To align a specific item to the right side of its grid cell, you can use justify-self: end;.

    .last-item {
      justify-self: end;
    }

Best Practices​

  1. Selective Use: Use justify-self sparingly and only when necessary to override the default alignment set by justify-items.
  2. Responsive Design: Use media queries to adjust the justify-self value based on different screen sizes for a responsive layout.
  3. Code Clarity: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The stretch value will cause the item to stretch to fill its grid area, provided width is not explicitly set.
  • The justify-self property only affects the alignment of the individual grid item, not the entire row or column.

align-self​

The align-self property in CSS Grid Layout is used to control the alignment of an individual grid item along the block (column) axis within its grid area. This property allows you to override the default alignment set by the align-items property on the grid container for specific grid items.

Basic Usage​

The align-self property can take several values:

  • start: Aligns the grid item to the start of its grid area.
  • end: Aligns the grid item to the end of its grid area.
  • center: Centers the grid item within its grid area.
  • stretch: Stretches the grid item to fill the entire grid area.
/* Using align-self to center a specific grid item vertically */
.item {
  align-self: center;
}

Practical Examples​

  1. Centering a Specific Item

    If you have a grid where most items are aligned to the start but one needs to be centered, you can use align-self: center; on that specific item.

    .special-item {
      align-self: center;
    }

  2. Aligning to the End

    To align a specific item to the bottom side of its grid cell, you can use align-self: end;.

    .last-item {
      align-self: end;
    }

Best Practices​

  1. Selective Use: Use align-self sparingly and only when necessary to override the default alignment set by align-items.
  2. Responsive Design: Use media queries to adjust the align-self value based on different screen sizes for a responsive layout.
  3. Code Clarity: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The stretch value will cause the item to stretch to fill its grid area, provided height is not explicitly set.
  • The align-self property only affects the alignment of the individual grid item, not the entire row or column.

justify-content​

The justify-content property in CSS Grid Layout is used to align the entire grid along the inline (row) axis when there is extra space available in the grid container. This property is particularly useful when you want to control the positioning of the grid itself within a larger container.

Basic Usage​

The justify-content property can take several values:

  • start: Aligns the grid to the start of the grid container.
  • end: Aligns the grid to the end of the grid container.
  • center: Centers the grid within the grid container.
  • stretch: Stretches the grid to fill the entire grid container.
  • space-around: Distributes the extra space around the grid tracks.
  • space-between: Distributes the extra space between the grid tracks.
  • space-evenly: Distributes the extra space evenly among the grid tracks.
/* Using justify-content to center the entire grid horizontally */
.grid-container {
  justify-content: center;
}

Practical Examples​

  1. Centering the Grid

    If you have a grid that doesn't take up the full width of its container, you can use justify-content: center; to center the grid horizontally.

    .grid-container {
      justify-content: center;
    }

  2. Aligning to the Start

    To align the grid to the left side of its container, you can use justify-content: start;.

    .grid-container {
      justify-content: start;
    }

Best Practices​

  1. Responsive Design: Use media queries to adjust the justify-content value based on different screen sizes for a responsive layout.
  2. Semantic Code: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The justify-content property only affects the alignment of the entire grid, not individual grid items.
  • This property is most effective when the grid does not consume all the available space in its container.

align-content​

The align-content property in CSS Grid Layout is used to align the entire grid along the block (column) axis when there is extra space available in the grid container. This property is especially useful for controlling the vertical positioning of the grid within a larger container.

Basic Usage​

The align-content property can take several values:

  • start: Aligns the grid to the start of the grid container.
  • end: Aligns the grid to the end of the grid container.
  • center: Centers the grid within the grid container.
  • stretch: Stretches the grid to fill the entire grid container.
  • space-around: Distributes the extra space around the grid tracks.
  • space-between: Distributes the extra space between the grid tracks.
  • space-evenly: Distributes the extra space evenly among the grid tracks.
/* Using align-content to center the entire grid vertically */
.grid-container {
  align-content: center;
}

Practical Examples​

  1. Centering the Grid

    If you have a grid that doesn't take up the full height of its container, you can use align-content: center; to center the grid vertically.

    .grid-container {
      align-content: center;
    }

  2. Aligning to the Start

    To align the grid to the top side of its container, you can use align-content: start;.

    .grid-container {
      align-content: start;
    }

Best Practices​

  1. Responsive Design: Use media queries to adjust the align-content value based on different screen sizes for a responsive layout.
  2. Semantic Code: Use meaningful class names and comments to make the code more understandable and maintainable.

Limitations and Considerations​

  • The align-content property only affects the alignment of the entire grid, not individual grid items.
  • This property is most effective when the grid does not consume all the available space in its container.

Best Practices​

  1. Explicit Over Implicit: Use justify-self and align-self for individual items that need to deviate from the default alignment set by justify-items and align-items.
  2. Responsive Design: Use media queries to adjust alignment based on screen size.
  3. Semantic Code: Use meaningful class names that reflect the purpose of the alignment, making the code easier to understand and maintain.

Limitations and Considerations​

  • The justify-content and align-content properties only have an effect when there is extra space in the grid container that is not taken up by the grid items.
  • The stretch value will cause items to stretch to fill their grid area, provided width and height are not explicitly set.