Сергей delphinpro

Если количество блоков не определено заранее, то как во флексах сделать не выйдет.

Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.

Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.

.header {
  display:grid;
  grid-template-columns: 1fr min-content 1fr;
}

<header>
  <left/>
  <logo/>
  <right/>
</header>

Популярный вопрос.
Ответ есть у меня:
https://yandex.ru/search/?text=masonry+layout

Если нужно линию под кружки, то зачем вы кружок помещаете под линию? z-[-1] - это нужно просто убрать.

containers.forEach((el) => {
  el.addEventListener("click", e => {
    e.currentTarget.querySelector('.element-3').classList.add('active');
  });
});

<div class="wrapper">
    <div class="navbar">    </div>
    <div class="content">    </div>
    <div class="info">    </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 188px 1fr 326px;
  min-height: 100vh;
}

.navbar {
    /*display: inline-block;
    position: absolute;
    height: 100%;
    width: 188px;*/
    border-radius: 0px 10px 10px 0px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
    font-family: 'Inter', sans-serif;
}

.info {
    /*display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 326px;*/
    border-radius: 10px 0px 0px 10px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
}

.content
{
    /*margin-left: auto;
    margin-right: auto;
    display: inline-block; */
    background-color: #000;
}

/* закомментированное удалить. */

php отправляет заголовок браузеру что нужно установить куку, а не ставит ее. Бесполезно проверять ее наличие сразу после отправки заголовка. В следующем запросе эта кука вернется браузером на сервер.

Установить в браузер расширение Stylus
Потом на нужной странице нажать на значок расширения и создать новый стиль для текущего сайта. Там прописать нужные стили, например (можно !important если не срабатывает)

div#column-content {
  margin-left: 0 !important;
}

сохранить стиль и наслаждаться.

Стили можно включать и выключать в любое время

нужно слинковать хранилище в публичную директорию

php artisan storage:link

Симлинки, которые будут созданы этой командой, прописаны в файле config/filesystem.php.
По умолчанию, там одна ссылка для хранилища.

Как правильно использовать mysqli
Простая аутентификация на PHP

function run(cb) {
     directionsService.route(route,
         function(response) {
                // ...
                let distKm = parseInt(dist / 1000);
                cb(distKm);
              }
    });
}

run(function(result){
  console.log(result);
})

с учетом ваших комментов:

document.getElementById('btn-next').onclick = () => {
  run(function(result){
    console.log(result);
  })
};

Алексей Коновалов,

Это значит что все запросы которые я посылаю из браузера должны проходить через web.php?

Нет, это значит, что если вам нужна сессия в апи, то эти маршруты должны быть в группе миддлваров web.

А если быть ещё более точным, то эти маршруты должны проходить через миддлвэр StartSession

Если вам не требуется классический stateless api, то поменяйте в RouteServiceProvider группу маршрутов api

Route::middleware('web')
    ->group(base_path('routes/web.php'));

Route::prefix('api')
-   ->middleware('api')
+   ->middleware('web')
    ->group(base_path('routes/api.php'));