Александр

Если надо сделать так, чтобы нечётные строки были минимальной высоты, тогда убирайте у .container grid-template-rows: repeat(3, 1fr);. Если хотите, чтобы все строки были одной высоты, тогда добавляйте grid-auto-rows: 1fr;.

- grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+ grid-template-columns: repeat(auto-fill, 250px);

grid-column: span 2;
grid-row: span 2;

.item:nth-child(1) {
    grid-column: 1 / span 6;
    grid-row: 1 / span 10;
}

.item:nth-child(2) {
    grid-column: 7 / span 6;
    grid-row: 1 / span 6;
}

.item:nth-child(3) {
    grid-column: 7 / span 6;
    grid-row: 7 / span 4;
}

.item:nth-child(4) {
    grid-column: 1 / -1;
}

и высоту уберите у них, либо используйте min-height;

Добавьте grid-template-rows: 1fr;

UPD:
grid masonry (работает только в Firefox под флагом); статьи: 1, 2; примеры: 1, 2.

overflow: auto;

.parent {
    display: flex;
    flex-direction: column;
}

.label {
    height: 100%;
}

Для .A:

.A {
  display: flex;
  flex-direction: column;
  align-items: center;
}