/
spirzen
/
it-code-examples
Обзор
Документация
Войти
/
spirzen
/
it-code-examples
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/html/lab-110-011/main.html
45 строк
1 KB
Spirzen
Code migration pack
09 июн 2026, 01:41
09 июн 2026, 01:41
cebc284
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bento</title> <style> *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; } .bento { display: grid; gap: 0.75rem; max-width: 48rem; margin: 0 auto; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 5rem; } .cell { border-radius: 12px; padding: 1rem; background: #334155; display: flex; align-items: flex-end; font-weight: 600; } .wide { grid-column: span 2; background: #6366f1; } .tall { grid-row: span 2; background: #0ea5e9; } .big { grid-column: span 2; grid-row: span 2; background: #10b981; } @media (max-width: 36rem) { .bento { grid-template-columns: 1fr 1fr; } .wide, .big { grid-column: span 2; } } </style> </head> <body> <div class="bento"> <div class="cell wide">Широкий</div> <div class="cell">A</div> <div class="cell tall">Высокий</div> <div class="cell">B</div> <div class="cell big">Крупный</div> <div class="cell">C</div> </div> </body> </html>