MamaLuyba

не сложная. просто через animation-delay отрисовывается с паузой.
времени - ну тут от опыта зависит. часа хватит с запасом.

хз. выставил ширину "цифр" в процентах - и все сжимается.

да, через гриды.
типа такого:

#wrapper {
 display: grid;
 grid-template-columns: 50% 25% 25%;
 grid-template-areas: 
'first second fourth'
'first third fifth';
}

ну и прописать блокам соответствующее имя grid-area: 'first' и т.д.

надо, чтобы счетчик постоянно увеличивался?
тогда засунь анимацию в setInterval.

как избавиться - скриптом удалить span с классом 'value'.

const date = 1557216578660/1000; // число берешь из нужной тебе даты new Date();
let userDate = new Date(); // это будет обновляться каждый раз по таймеру, например
let count = parseInt((userDate.getTime()/1000 - date)/5); // твой счетчик
localStorage.setItem('count', count); // записываем счетчик в хранилище

далее ставишь setInterval на свои пять секунд и пишешь в него код выше.
ну и потом вытаскиваешь из localStorage 'count' и с ним работаешь.

через css никак (при такой структуре). через скрипты - легко.

в общем, т.к. внятного решения нет, думаю реализовывать такой вариант: при загрузке страницы js прогоняет все ячейки через проверку. при проверке берется ячейка с наименьшей высотой, как эталонная. далее, каждый элемент проверяется на соответствие этой высоте. если высота не соответствует (элемент выше), то для элемента увеличивается grid-column: span на единицу. т.е. если высокий элемент имеет span 1, то подставляем span равный 2 и проверяем высоту. если высота стала эталонной, то берем следующий элемент. если нет - опять span увеличиваем на единицу и т.д.
вешаем обработчик на изменение ориентации, чтобы он пересчитывал значения для разных экранов.