Условие
В style.css разложите четыре карточки внутри .gallery сеткой 2×2: две равные колонки, отступ между ячейками 12px. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Разложите карточки сеткой (как таблица из ячеек).
- Сделайте две равные колонки.
- Сделайте отступы между ячейками 12px.
Подсказка для новичка
Сетка удобна для галерей: сначала включите сетку у родителя, затем задайте две колонки и расстояние между карточками. Имена свойств - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Сетка 2×2 · отступ 12px
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; внутри -.galleryи четыре.card..gallery- серый контейнер (уже естьwidth,background,border,padding; сюда же - Grid)..card- бирюзовая карточка A/B/C/D (уже есть высота, цвет, текст; в старте естьmargin-bottom).display: grid- включить CSS Grid у родителя.grid-template-columns- сколько колонок и какой ширины.1fr- доля свободного места в сетке.gap- отступ между ячейками сетки.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор подробнее: всё, что есть на странице.
Файл style.css - что уже написано
В стартовом CSS два правила:
.gallery
и
.card.
Карточки пока идут столбиком из‑за обычного потока и
margin-bottom.
Вам нужно превратить галерею в сетку 2×2.
Правило .gallery
-
width: 320px- ширина контейнера 320 пикселей. -
background: #eee- светло-серый фон. -
border: 2px solid #333- тёмная рамка 2px. -
padding: 12px- внутренний отступ 12px со всех сторон (карточки не прилипают к рамке). -
Сюда же дописывают:
display: grid,grid-template-columns: 1fr 1frиgap: 12px.
Правило .card
-
height: 70px- высота карточки 70 пикселей. -
background: #0d9488- бирюзовая заливка. -
color: #fff- белый текст (буквы A–D). -
text-align: center- текст по центру по горизонтали. -
line-height: 70px- вертикальное центрирование буквы (высота строки = высота блока). -
margin-bottom: 8px- в старте отступ снизу между карточками в обычном потоке. Когда включите Grid иgap, этотmargin-bottomлучше убрать (или обнулить), иначе отступы «сложатся» лишний раз.
Что такое CSS Grid
CSS Grid - раскладка по сетке (строки и колонки). Родитель с
display: grid
раскладывает детей по ячейкам. Удобно для галерей и карточек.
-
display: grid- сделать.gallerygrid-контейнером. -
grid-template-columns: 1fr 1fr- две колонки одинаковой ширины.1frзначит «одна доля свободного места». Два1fr→ колонки пополам. (Допустимо иrepeat(2, 1fr).) -
gap: 12px- зазор 12px между ячейками (и по горизонтали, и по вертикали). -
Четыре
.cardавтоматически заполнят сетку: два в первом ряду, два во втором (2×2).
Коротко: у
.gallery
-
display: grid,
две колонки
1fr 1fr
и
gap: 12px.
Уберите лишний
margin-bottom
у карточек. Сверьте с вкладкой
«Результат».