Вадим Белкин

В CSS есть единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Это лучше чем под каждый экран в пикселях задавать, один раз задав высоту блоку width: 100vh он у вас на любом экране будет равен 100% высоты вьюпорта. Почитайте, например тут
Конечно же если вам подходит их поддержка браузерами

Все зависит на сколько важен для заказчика пиксель перфект и насколько дизайнер ответсвенно подошел к отрисовке макета. Если у пунктов списка слева один отступ, а справа другой - это не косяк дизайнера, с чего вы решили что отступы обязательно должны быть одинаковые со всех сторон. Другое дело когда список из одинаковых элементов и у пунктов могут отличаться отступы с одной и той же стороны - тут уже стоит выяснить почему так.
Хорошо когда дизайн-система продумана от и до, систематизированы все отступы и размеры, такие макеты в пиксель перфект верстать легко. Но другое дело когда в разных макетах есть погрешности в размерах одних и тех же компонентов, а заказчик требует пиксель перфект ну потому-что ему так хочется и проверять соответствие для него легко.
Просто научитесь оценивать сложность верстки по макетам для пиксельного соответствия и уже сами решайте стоит ли овчинка выделки (если конечно у вас есть возможность отказываться от заказов)

Можно :focus использовать (если элемент не является ссылкой на другую страницу). Либо скриптом по клику класс добавлять (по клику на сам элемент, если он не ссылка, либо доп.кнопку на блоке с работой расположить, по клику на которую будет добавляться класс).

Если в появившейся информации есть ссылки или любые кликабельные элементы, то лучше скриптом раскрытие делать, поскольку :focus, :hover, :active не подойдут (не дадут сделать клик в появившемся блоке, он просто скроется)

Да, сетка отлично подходит для размещения модульных блоков UI веб страницы, которые растягиваются или выравниваются по ячейкам сетки. Чтобы с пользой её использовать, макет шаблона должен быть нарисован под сетку (если делаете по макету), бывает что некоторые элементы по макету нарисованы так что не умещаются в мелкую ячейку, но не позволяет их разместить в более крупной соседняя ячейка. Вы можете создать сетку с любым кол-вом ячеек и настроить её под себя, большинство css фреймворков это позволяют сделать.

Можете так же перестраивать свои блоки без сетки, если она для вас не удобна или не подходит при каких-то обстоятельствах.