Макет CSS Grid: Бічна панель + Вміст
Проєктуйте CSS Grid макети візуально: задайте стовпці, рядки та проміжок, а потім вписуйте назви областей у клітинки, щоб створити grid-template-areas — з живим попереднім переглядом і кодом CSS та HTML для копіювання.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор сітки з уже названим двоколонковим однорядковим макетом: стовпець бічної панелі 200 пікселів поруч із гнучким стовпцем вмісту, що займає решту простору. Обидві області одразу видно в попередньому перегляді, розфарбовані та підписані, щоб поділ був очевидним з першого погляду.
Це найпоширеніша форма навігація-плюс-вміст в інтернеті — сторінки налаштувань, сайти документації та адміністративні панелі всі покладаються на фіксовану бічну панель поруч із гнучкою основною областю. Оскільки стовпець бічної панелі використовує значення в пікселях, а стовпець вмісту — 1fr, бічна панель зберігає сталу ширину, тоді як область вмісту поглинає кожен додатковий піксель вікна перегляду.
Перейменуйте будь-яку область, змініть ширину стовпця або додайте більше рядків для шапки над поділом — вивід CSS і HTML нижче відстежує кожну зміну в реальному часі. Інструмент безкоштовний і повністю працює у вашому браузері, без завантажень і облікового запису.