Почему не открываются модальные окна?

а этот js который вы приложили вы когда исполняете?
После того как отрендерили полученные данные?

Стилизация json на странице html. Как сделать?

eridanlivia, можно конечно
Просто пропишите этот код после стандартной обработки фетча
Что-то вроде

fetch("https://server.com")
    .then(res=>res.json())
    .then(data=>{
    document.body.innerHTML = data.map((item)=>`
      <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name} 
      <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
      `).join(" ");
    })

Как это сверстать?

Ankhena, хорошо, учту
Если проблема правда в этом уголке то да, все решение - float и использование тегов span вместо div

Можно ли последовательно расположить три элемента в грид ячейке, чтобы они не перекрывали друг друга?

Overlord934, это не сложно, просто для каждой картинки установить width: 100% или типа того, чтобы они уменьшались вместе с шириной столбцов
Чтобы сохранялась высота поставьте height: 100%
Ну и чтобы картинка не мылилась, поиграйтесь с object-fit и object-position

Можно ли последовательно расположить три элемента в грид ячейке, чтобы они не перекрывали друг друга?

Overlord934, я бы разбил так


Левая и правая колонка - два flexbox'a с flex-direction: column
Колонка посередине чуть сложнее, но по факту просто три grid'а

В общем могу только пожелать удачи, особенно когда (если) будете адаптировать под мобилки)) )
Надеюсь хоть немного помог мыслями))

В чём ошибка (скорее всего php)?

Кстати лучше использовать switch case вместо кучи if для проверки radio

Как сделать так, чтобы ссылка внутри активного li меняла цвет?

Вложенность кода влияет на то, какое правило важнее
Отслеживать какое из правил важнее можно в dev tools
чем выше строчка css правил тем они важнее

Почему обьекты массива перезаписываються в блоке при каждом нажатии?

Происходит так потому что ты добавляешь список еще раз
То есть пробегаешься по всем элементам заданного списка и добавляешь их в блок