TtT RrR

Потому что display: none; не анимируется. Как вариант появление можно анимировать при помощи animation

.burger-active {
	animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

а вот если нужно исчезновение анимировать, тогда, либо отказаться от diplay: none; , либо к примеру добавлять промежуточный класс который покажет анимацию исчезновения и в конце поставить display: none;

Здесь есть похожий вопрос с ответом https://qna.habr.com/q/1185832

Если количество дочерних элементов сетки всегда известно, то можно построить такую ломаную сетку на гридах, добавив в неё вспомогательные колонки/строки и прописав каждому элементу его расположение в сетке.

50 это не валидное значение свойства.
50px или 50rem - валидное

ul {
  counter-reset: item;
}

ul li {
  counter-increment: item;
}

ul li::marker {
  content: counter(item, lower-alpha) ") ";
}