С помощью HTML и CSS воссоздать сетку изображений

Условие:

html css

Решение:

Предмет задания: **Веб-разработка** (HTML и CSS). Раздел предмета: **Вёрстка изображений и сеток** (работа с макетами изображений, использование сеток для организации элементов на веб-странице). В этом задании тебе нужно с помощью HTML и CSS воссоздать сетку изображений. Изображения должны быть организованы в определённой конфигурации. ## Задача Воссоздай расположение картинок, как на изображении. На картинке видно, что все фотографии расположены в виде сетки: два изображения слева друг под другом и два изображения справа в ряд, одна над другой. ## Шаги решения: ### 1. Создание HTML-кода Для начала давай создадим базовую структуру HTML. Мы будем использовать контейнер, в который поместим все четыре изображения. ```html Image Grid

``` В данном коде есть два основных блока: `image-left` и `image-right`, каждый из которых будет содержать по два изображения, что соответствует их отображению на макете. ### 2. Создание CSS-кода Теперь настроим стили, чтобы отобразить изображения в нужной нам сетке. ```css /* Стандартизация размеров и шрифтов */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } /* Стилизация сетки изображений */ .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* Две колонки */ gap: 10px; /* Промежутки между изображениями */ } .image-left img, .image-right img { width: 100%; height: auto; /* Устанавливаем одинаковую ширину для всех изображений */ } ``` ### Объяснение CSS: - **grid-template-columns: repeat(2, 1fr):** Мы создаём две колонки для сетки, где ширина каждой колонки равна 50% от родительского контейнера (1 часть от фракции `fr`). - **gap: 10px:** Промежуток между изображениями для создания визуальных отступов. - **width: 100%; height: auto:** Задаём изображением полную ширину контейнера, чтобы они равномерно распределялись по колонкам. ### Примечание: - Убедись, что изображения доступны по указанным путям. В примере изображения названы условно как "image1.jpg", "image2.jpg" и т.д., ты должен заменить их актуальными URL или относительными путями к файлам на твоем компьютере. ### Заключение: Ты создал сетку изображений, используя HTML и CSS, которая соответствует размещению изображений на исходном макете.