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

Вопрос или проблема

Я пытаюсь научиться создавать блоковые шаблоны. Сейчас я нашел этот: https://mindspring-light.webflow.io/, и он выглядит как хороший вариант для практики с блоковыми шаблонами.

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

Но если я посмотрю на CSS, то похоже, что меню имеет position: absolute, и я не могу понять, как изображение будет на правильном месте.

Итак, мой вопрос: делать ли это полностью с помощью сетки, или мне “нужно” использовать тот же трюк, что и в оригинале?

Ответ или решение

Конечно, создание блоковых шаблонов – это увлекательный процесс обучения, который требует внимания к деталям и понимания того, как различные элементы верстки работают вместе. Для начала я предлагаю рассмотреть теоретические основы сеток и позиционирования в CSS, которые помогут определить подход к воспроизведению макета, подобного указанному вами на сайте Mindspring Light.

Теория:
Сетки (Grid) и абсолютное позиционирование (position: absolute) – это два разных подхода к организации и размещению элементов на странице. Grid предоставляет гибкий способ создания макетов с использованием рядов и колонок, что позволяет значительно упростить процесс размещения элементов в сравнении с традиционными методами, такими как float и даже flexbox в определенных случаях. Сетка позволяет задавать структуру страниц с учетом новых технологий, делая ее более адаптивной.

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

Пример:
На рассматриваемом вами сайте меню располагается с использованием абсолютного позиционирования. Это достигается с помощью CSS-свойства position: absolute, что позволяет точно определить его координаты на экране. Такое решение, вероятно, было выбрано для достижения определенного визуального эффекта, связанного с дизайном, например, чтобы меню перекрывало часть изображения, создавая современный "наложенный" вид.

Однако при создании своих собственных блоковых шаблонов важно помнить, что абсолютное позиционирование не всегда является наилучшим вариантом, особенно в случаях, когда необходимо поддерживать адаптивность макета. Заменив его на Grid, вы можете получить более контролируемое и гибкое решение, которое проще масштабируется для мобильных устройств любой ширины.

Применение:
Теперь давайте рассмотрим, как можно создать аналогичный макет с использованием CSS Grid вместо absolute, чтобы обеспечить большую гибкость и адаптивность.

Определите структуру Grid:
Сначала нужно определиться с основной структурой сетки. Вам потребуется контейнер Grid, который содержит как меню, так и изображения. Он должен быть правильно размечен на строки и колонки. Например:
```
.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* Три колонки одинаковой ширины */
 grid-template-rows: auto; /* Автоматическая высота строк */
 gap: 16px; /* Промежуток между колонками и строчками */
}
```
Разместите элементы:
Далее, вы должны разместить блоки в сетке. Например, если вы хотите, чтобы ваше меню занимало первую и вторую колонки первой строки, а изображение начиналось во второй колонке второй строки:
```
.menu {
 grid-column: 1 / 3; /* Занимает первую и вторую колонку */
 grid-row: 1; /* На первой строке */
}

.image {
 grid-column: 2; /* Начинается со второй колонки */
 grid-row: 2; /* На второй строке */
}
```
Адаптивный дизайн:
Использование CSS Grid позволяет вам легко перенастраивать шаблон для мобильных устройств, с минимальным количеством media-запросов. Например, чтобы разместить элементы в одну колонку для узких экранов, вам может понадобиться следующее:
```
@media (max-width: 768px) {
 .grid-container {
   grid-template-columns: 1fr; /* Одна колонка */
 }
 .menu, .image {
   grid-column: 1; /* Все элементы начинают с первой колонки */
 }
}
```
CSS Properties:
Если вам все же необходимо использовать absolute для отдельного элемента дизайна, используйте его с таким расчетом, чтобы этот элемент находился в специально определенном блоке, а его родительский элемент имел позиционирование relative. Это даст возможность этому элементу перемещаться при изменении размеров родительского элемента без отрицательного влияния на другие части макета.

Учитывая вышесказанное, при создании своего блокового шаблона, самое важное – это соблюдение баланса между стилем и функциональностью. Научившись управлять различными подходами к верстке, вы сможете более эффективно манипулировать элементами на странице, создавая не только красивые, но и функциональные веб-сайты. Исключительно используя grid или удачно комбинируя с position: absolute для нужных деталей, вы обретете устойчивость и адаптивность, которые так необходимы в современном веб-дизайне.