Проблема веб-дизайна: столбцы таблицы имеют одинаковую ширину

Question

Контейнеры в моей таблице имеют одинаковую ширину, они принимают ширину контейнера с самым широким изображением. Я хочу, чтобы все они имели свою уникальную ширину в соответствии с размером изображения. Какие-нибудь решения для этого? Я использую сетку внутри каждого контейнера, чтобы получить разные квадраты.

Контейнер в столбце 4 строки 1 в порядке, а в столбце 2 - нет.

Текущий веб-сайт

Сетка css:

.container {
    border: 1px gray solid;
    display: grid;

    grid-template-columns: auto 2rem;

    grid-template-rows: 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857%;
    /*grid-template-rows: auto;*/

    grid-template-areas:
            "main symbol1"
            "main symbol2"
            "main symbol3"
            "main symbol4"
            "main symbol5"
            "main symbol6"
            "footer1 symbol7";
    margin: 20px 5px 10px 5px;
    height: 12rem;
    /*width: auto;*/
}

Полный код: https://codepen.io/robbeg-immalle/pen/wvGBvXr