How can I keep grid items aligned when one item is taller?

Set align-items: start on the grid container if you want every item’s content to begin at the top of its grid area. The default stretching behavior can make an item fill that area; start makes its size follow its content instead. [S1]

For example, suppose one card has a short description and the other has several lines. The row still needs enough height for the longer card, but the shorter card does not have to stretch to fill that row. Its bottom will be higher, leaving unused space below it. This changes item alignment, not the row’s height.

Here is a small example. The text is illustrative; replace it with your own card content.

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.card {
  padding: 1rem;
  border: 1px solid #888;
}

<div class="cards">
  <article class="card">
    <h2>Short card</h2>
    <p>A brief description.</p>
  </article>
  <article class="card">
    <h2>Taller card</h2>
    <p>A longer description that wraps onto more lines than the first card.</p>
    <p>Another paragraph makes this card taller.</p>
  </article>
</div>

Both cards start at the top of their areas. The taller card determines how much height the shared row needs; the short card stays closer to its own content height. Grid item alignment and grid track sizing are related visually, but they are not the same setting. [S1]

align-content positions or distributes the grid’s tracks within the grid container when there is extra space. It does not set how each item aligns inside its own grid area. align-items controls that item alignment; align-self can override it for one item. [S1][S2]

So choose based on what looks wrong:

1. Card content is stretched or not aligned as desired inside its area: try align-items.
2. One card needs a different alignment from its siblings: try align-self on that card.
3. The grid’s rows as a group need positioning within a taller container: consider align-content, if there is extra space for the tracks to move.

Use align-self: start on that item to override the container’s item-alignment setting. For example, add a class to the card and use .card--top { align-self: start; }. If every card should start at the top, set align-items: start on the grid instead. [S1][S2]

To check the result, compare the top edges and bottom edges of the cards. The top edges should line up; the shorter card should end sooner, while the row still accommodates the taller card. If the issue is instead that all the rows sit in an unexpected position inside a taller grid container, inspect track alignment with align-content. Exact appearance also depends on the grid’s track sizing and available container space, so this example cannot determine how every surrounding layout will look. [S1]

A reusable check:

1. Decide whether the problem is inside a grid area or with the tracks as a group.
2. For item alignment, try align-items: start or a per-item align-self: start.
3. Check whether the taller content sets the row height as expected.
4. Use align-content only when you mean to position or distribute tracks in available extra space.
5. Recheck at the actual container size and with representative content.