CSS Grid: `grid-auto-flow: row` не может выровнять детей по горизонтали

Question

У меня есть элемент div и form внутри контейнера, установленный на display: grid. Оба имеют золотую пунктирную границу на этом изображении:

И правила CSS для контейнера:

const MainAreaContainer = styled.div`
  display: grid;
  grid-auto-flow: row;
  align-items: center; // removing this and justify-items only left aligns the child elements
  justify-items: center;

  > * {
    border: 2px dashed gold;
    margin: 15px 20px;
  }
`;

У меня естьмного ширины для этого, чтобы идти на один ряд. Кто-нибудь знает, почему он продолжает укладываться вертикально?