Твой вариант с точки зрения семантики неверный. Ты в 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";
}
Простой