Vaultboy84

Вроде сча все норм, поправили?

let modal = document.getElementById("my_modal");
let span = document.getElementsByClassName("close_modal_window")[0];

let allBtn = document.querySelectorAll('.btn_modal_window'); /* Берем все кнопки */
allBtn.forEach(function(element) {
    element.onclick = showModal;
})

function showModal() {
    modal.style.display = "block"; /* Выводим модальное окно */
}

span.onclick = function () {
    modal.style.display = "none";
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

Как то так

Путь во фронтенд. Стек очень обширный. Если знаете только базу, то далее работа с фреймворками типо бутстрап, фандейшн. Препроцессоры, типо sass, сборщики галп и вебпак, гит. По сиэсэс желательно освоить флексы, гриды могут подождать, переменные, какую либо методологию именования классов и организации структуры фронтенд части. Ну к примеру бэм, надо так же уметь правильно работать с изображениями, иконками. Спрайты, ленивая загрузка, форматы изображений. Необходимо иметь свой билд для быстрого старта, чтобы минимизировать количество рутинных задач. Так же нужно помнить о большом количестве легаси кода, который вам придется поддерживать, в том числе надо знать, как правильно верстать почтовые рассылки, ну хотя бы в общих чертах. Далее джс, это и ванила и библиотека jquery, которая до сих пор плотно используется и новые джс фреймворки, хотя бы один из них - вью, реакт или ангуляр.Как то так.

Masonry, как уже тут писали самый адекватный вариант. Все остальное посредством сиэсэс это костыли. А гриды еще и использовать рано.

Такое ощущение, что некоторые, кто тут дает ответы сам версткой толком не занимается. Дивы стандартные блоки, которые используются там, где нет возможности применить семантические теги. В любых иных случаях должны быть применены семантические теги. Это необходимо для поисковиков и для читабельности вашего кода. Таков стандарт html 5. Если вы не хотите соответствовать современным общепринятым стандартам, вы можете верстать хоть таблицами, но будте готовы к понижению позиций своего ресурса в поисковой выдаче, так же вряд ли кому то в дальнейшем понравится сопровождать ваш код. Вешать классы для семантики на дивы имея семантические теги признак отсталости и непрофессионализма. Так может сделать бэкендер или какой-нибудь фуллстак, но не уважающий себя фронт.