came_up

Твой вариант с точки зрения семантики неверный. Ты в header вложил aside и main, а также page__wrapper. Тег header служит для отделения вводного содержимого страницы или блока, которое располагается вверху. footer, соответственно, для отделения того, что располагается внизу. А тег main отвечает за основной контент страницы. А page__wrapper вообще обертка страницы, она, по идее, должна быть выше всех. Однако в данном случае она тебе не нужна. То есть изначально правильнее будет написать так:

<header class="header">
    <!-- Шапка -->
</header>
<main class="main">
    <!-- Основной контент -->
</main>
<footer class="footer">
    <!-- Подвал -->
</footer>

Если сильно нужна обертка того же header, то пишешь вот так:

<header class="header">
   <div class="header__inner">
       
   </div>
</header>

Опираясь на свой опыт, мне больше нравится использовать вариант с __inner в данной ситуации, чем с __wrapper. Хотя иногда нужно выбирать другой вариант, потому что wrapper - внешняя обертка, а inner - внутренняя, зависит от задачи. В общем, такие контейнера обычно служат для выравнивания, то есть margin: 0 auto; то есть центрировать и далее задать ширину фиксированную. Кто-то и без margin работает, если ширина большая, достаточно задать padding. родительскому контейнеру, то есть самому header.

Продолжая отвечать на твой вопрос - далее берем aside, который обычно используется для боковой колонки. Никто не мешает назвать их фильтрами, это нормально, хотя кто-то спорит, что нужен div. Также, ты почему-то список фотографий сделал div. В общем, вот два возможных варианта, хотя их больше. На твоей схеме у тебя нет ни header, ни footer на странице. Поэтому предпочтительнее из первого варианта удалить их и его использовать.

<!-- Вариант 1 -->

<header class="header"></header>
<div class="gallery">
    <aside class="gallery__filters filters-gallery"></aside>
    <main class="gallery__results results-gallery">
        <ul class="results-gallery__list">
            <li class="results-gallery__item">
                <a class="results-gallery__link" href="#">

                </a>
            </li>
        </ul>
    </main>
</div>
<footer class="footer"></footer>

.gallery {
    display: grid;
    grid-template-columns: 290px 1fr;
    column-gap: 40px;
}

<!-- Вариант 2 -->

<div class="container">
    <header class="header"></header>
    <aside class="filters"></aside>
    <main class="results">
        <ul class="results__list">
            <li class="results__item picture">
                <a class="results__link" href="#">

                </a>
            </li>
        </ul>
    </main>
    <footer class="footer"></footer>
</div>

.container {
    display: grid;
    grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
}