Макет CSS Grid «Святий Грааль» — готовий код
Проєктуйте CSS Grid макети візуально: задайте стовпці, рядки та проміжок, а потім вписуйте назви областей у клітинки, щоб створити grid-template-areas — з живим попереднім переглядом і кодом CSS та HTML для копіювання.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор сітки з попередньо завантаженим макетом «святий грааль»: три стовпці та три рядки, де шапка й підвал розтягуються на всю ширину, а між ними — рядок nav/main/aside. Рядок шапки має автоматичну висоту, середній рядок займає вільний простір, а бічні стовпці зафіксовані на 200 пікселів, тоді як основний стовпець забирає решту.
Макет «святий грааль» одержав свою назву тому, що його було справді складно надійно створити до появи CSS Grid — роки хаків із float, табличних макетів і абсолютного позиціювання намагалися імітувати саме цю форму. З grid-template-areas він зводиться до п’яти названих областей і кількох розмірів доріжок, тому залишається стандартним першим прикладом для вивчення CSS Grid.
Кожне число та проміжок на цій сторінці залишаються живими: зменшіть бічні стовпці, додайте четвертий рядок або перейменуйте область — і попередній перегляд та код CSS для копіювання оновляться миттєво. Скопіюйте блоки CSS і HTML прямо у свій проєкт — усе працює локально у вашому браузері, нічого не завантажується.