Антон Иванов

С учётом того, что мы привыкли скроллить страницу сверху вниз, колонки ни в каком виде не будут удобны для чтения.

Flex вам в помощь. Отлично расписано что и как делается вот тут
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

PHP - это серверный язык программирования, ему фиолетово до ваших кликов. Клики обрабатываются JavaScript. Так вот алгоритм примерно такой:
1. Ловим клик по "плюсику" JavaScript
2. Javascript`ом отправляем http-запрос на сервер с указанием какого-либо идентификатора фотографии (например, имя файла)
3. Сервер обрабатывает запрос, PHP отправляет команду MySQL на удаление нужной строки из БД и возвращает какой-нибудь результат, что строка удалена.
4. JavaScript обрабатывает результат от PHP и убирает картинку с экрана пользователя.

Это на пальцах, чтобы было понятно.

Код, который ты скопирован рассчитан на огромное количество различных браузеров. А твой код видимо только под один конкретный.

Варианта три:

1. либо подгружаете шрифт на сайт (гарантированно у всех одинаково отображается)
   
2. либо в директиве `font-face` указываете несколько стандартных шрифтов для разных ОС, например `Arial, Helvetica, sans-serif`
   
3. либо отдаете всё управление браузеру и ОС, указав только семейство шрифтов (serif, sans-serif, monospace)
   

1. Вешаете обработчик событий на клик по пункту меню, который вызывает запрос AJAX

document.addEventListener("click", clickHandler, false)

2. Результат AJAX-запроса вставляете в какой-нибудь тег, обрамляющий обновляемую часть страницы.

fetch(url, options)
    .then(function(response) { return response.text(); })
    .then(function(content) {
        document.getElementById('updatedDiv').innerHTML = content;
    });

3. Profit.

Задача элементарная, гуглите.