Странична лента + Съдържание CSS Grid Layout
Проектирайте визуално оформления на CSS Grid: задайте колони, редове и празнини, след това въведете имена на области в клетки, за да изградите зони на шаблони на мрежата — с предварителен преглед на живо и копируеми CSS и HTML.
Резултат
Тази страница отваря генератора на мрежа с оформление с две колони и един ред, което вече е именувано: колона от 200 пиксела в страничната лента до колона с гъвкаво съдържание, която заема оставащото място. И двете области се виждат незабавно във визуализацията на живо, оцветени и етикетирани, така че разделянето да е очевидно с един поглед.
Това е най-разпространената форма за навигация и съдържание в мрежата – страниците с настройки, сайтовете за документация и таблата за управление на администратора са разположени върху релса с фиксирана ширина до плавна основна зона. Тъй като колоната на страничната лента използва стойност на пиксел, а колоната със съдържание използва 1fr, страничната лента остава с постоянна ширина, докато колоната със съдържание поглъща всеки допълнителен пиксел от прозореца за изглед.
Преименувайте която и да е област, променете ширината на колоната или добавете още редове за заглавка над разделянето – CSS и HTML изходът по-долу проследява всяка редакция в реално време. Инструментът е безплатен и продължава да работи изцяло във вашия браузър, без качване и акаунт.