Рома Зварич

При определённых ситуациях можно использовать линейный градиент в "background":

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

Подробнее здесь: https://html5book.ru/css3-columns/

Rachel Andrew, одна из разработчиков спецификации, указывает на ориентиры при выборе способа в зависимости от ситуации

Основное отличие, как описано здесь, заключается в том, что Flexbox является одномерным. Это означает, что он имеет дело с выравниванием содержимого в одном измерении - как строка ИЛИ как столбец. Grid двухмерный, он одновременно контролирует выравнивание в строках и столбцах.

https://rachelandrew.co.uk/archives/2017/05/09/ref...

1) Sort
2) Four squares
3) List

Как расположить цифры по серединам клеток?

Добавьте следующие свойства для .place

.place {
    ...
    display: flex;
    justify-content: center;
    align-items: center;
}

Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?

Пробую - не получается так сделать.
У Вас везде заданы относительные величины в гриде.
Если сделать так, чтобы высота квадратов увеличивалась пропорционально ширине, в определенный момент циферблат начинает выталкивать хедер и футер за пределы экрана. А при уменьшении, наоборот, все же начинает сжиматься.
Нужны хотя бы частично фиксированные величины.

А вообще, суть сохранения пропорции размеров элемента в следующем: внутрь блока вкладываем еще один блок и задаем ему "padding-bottom: 100%" (процентное отношение ширины к высоте, в нашем случае 100%, потому что стороны должны быть равны).
Получается вот такое.
Как я написал, работает лишь в определенном диапазоне ширины.

https://codepen.io/hisbvdis/pen/ZgGqNm?editors=1100

Duff1k ,

куда добавить z-index ?

Тяжело сказать, куда добавить, не имея возможности "пощупать" код.
Скриншот это не особо заменяет.
Возможно, к классу "navbar"

.navbar {
    z-index: 999;
}

.
Правда, задавать большие числа "z-index: 99999...." - не самый лучший способ.
Но учитывая то ,что Вы не очень разбираетесь в вопросе, на это можно сделать скидку.

div {
    position: relative;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
}

Mansur05 , вы приводите абстрактный пример, решение которого может не быть решением в другой ситуации.
В приведенном Вами коде решение следующее.

https://codepen.io/hisbvdis/pen/EqjvQb

Вы уверены, что правильно указали фрагменты кода?
В HTML-коде указан класс menu__items-wrap, а в CSS-коде селектор указан для класса header__menu__items-wrap

Может поэтому и не работает?

С сайта HTML5Book
https://html5book.ru/html5-forms/#fieldset

Заявляют, якобы для тега "fieldset" атрибут "form" не поддерживается
Вывод: использовать атрибут "form" для каждого тега "input". Проверил - работает

Смотря с помощью чего сделано автовоспроизведения.
Если с помощью HTML5-элемента <video>, то можно добавить атрибут "muted"

Может это как раз то, что у Вас было.
По описанию похоже

https://chrome.google.com/webstore/detail/image-to...

Можно картинку сделать абсолютно позиционированной и растянуть по размерам контейнера.

Подходит такой вариант?

Для блока задайте свойство
margin: 0 auto;
если блок лежит внутри другого.

Или
text-align: center;
Если применять к блоку, который содержит блок галереи

Сверстал для Вас пример макета.
Надеюсь, правильно понял вопрос.

Точки переходов можете сами подобрать.
Если есть дополнительные вопросы или я что-то неправильно понял, пишите

https://codepen.io/hisbvdis/pen/wVvVvw

1) Определяете отношение высоты к ширине, которую хотите соблюдать
2) Внутрь существующего блока вкладываете еще один блок и задаёте ему свойство "padding-bottom: 50%", где "50%" - соотношение высоты к ширине (в данном случае, высота составляет 50% от ширины). И делаете его относительно позиционированным
3) Внутрь него вкладываете абсолютно позиционированный блок, растягивая на всю ширину/высоту.

Оно?

Вот Вам заготовка.
Если есть дополнительные вопросы - пишите

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

Пока что вот так получилось.
Оно?