Set the alignment of items in cells in CSS Grid. You can control the alignment of vertical and horizontal directions through the align-self and justify-self properties respectively; 1. Use align-self (optional values: start, end, center, stretch) for a single project; 2. Use justify-self to set horizontal alignment (start, end, center, stretch); 3. Use align-items and justify-items in the parent container when you want to unify all project alignments; FAQs include not enabling Grid layout, unclear cell size, or invalid alignment.

In a CSS Grid layout, it is not difficult to align the content into the grid cell, but it is easy to confuse several key attributes. The core is to understand the role of align-self and justify-self , which control the vertical and horizontal alignment of content within the cell, respectively.

How to set the alignment of items within a single cell?

If you just want to adjust the position of a specific item in the cell where it is located, you can use align-self and justify-self properties:

• align-self : controls the alignment of the vertical direction (that is, how to put it in the height of the cell)

  • Optional values ??include: start , end , center , stretch (default)

• justify-self : controls the alignment of the horizontal direction (width direction)

  • Also supports start , end , center , and stretch

For example, if you have an element with the class name .box , you want it to be right-aligned in the cell and centered vertically, you can write it like this:

 .box {
  align-self: center;
  justify-self: end;
}

This will appear at the right center of the cell.

What should I do if I want to set the alignment of all cells uniformly?

If you want all items in the entire grid to be aligned in the same way, you don't need to add align-self and justify-self one by one, but use align-items and justify-items directly on the parent container (that is, the element that sets display: grid ):

• align-items : Unified control of the vertical alignment of all items in the cell
• justify-items : Unified control level alignment

For example:

 .grid-container {
  display: grid;
  align-items: start;
  justify-items: center;
}

This way, all child elements will be aligned and centered horizontally at the top of their respective cells.

Common misunderstandings and points of attention

Sometimes you will find that setting align-self or justify-self has no effect, which may be due to the following reasons:

• The parent container does not enable Grid layout correctly (forgot to write display: grid )
• The cell itself has no clear size, which makes "alignment" impossible to reflect (such as height or width is automatic)
• span are used to span multiple cells, and at this time the alignment will only take effect within the entire span area

So suggestion:

• Set the cell size clearly (or at least make sure there is content to spread)
• First confirm that the overall layout structure is fine, then adjust the alignment details

Basically that's it. By using these properties well, you can flexibly control the position of each item in the Grid in the cell.

The above is the detailed content of How to align items within a grid cell?. For more information, please follow other related articles on the PHP Chinese website!