Можно и одинаковой ширины. Разделите на большее количество колонок с более мелким шагом, вплоть до того, что можете разлиновать как тетрадь в клетку. В общем подберите наименьший шаг, согласно вашему макету. А потом с помощью grid-column и grid-row расположите элементы как надо
Есть ужасающе костыльные способы это сделать на css html - использование чекбоксов/радио, псевдокласса target и прочая дичь. Всё это имеет только академический интерес. Описывать долго и нудно. Если погуглите - найдете.
Если нужен простой спойлер - тэг <details>
Не занимайтесь ерундой. Javascript в руки и вперед
Так уберите. Перейдите на flex, flex-direction: column
А по гидам:
repeat(1, auto); - странное значение. Что репититься то должно? Просто 1fr поставьте. repeat имеет смысл если больше одной колонки, для сокращения записи. И добавьте grid-auto-rows.
Вообще всегда надо давать ссылку на полноценный код в песочнице или сайт. И правила сервиса об этом же говорят
