Generator de grid CSS
Convertiți un plan de layout text în grid CSS real cu zone numite.
Generator de grid CSS
Lipiți un plan de bază al unui layout de pagină și acest instrument o transformă în cod CSS grid funcțional. Scrieți fiecare rând al layout-ului pe propria sa linie și repetați același cuvânt în celulele pentru a marca o regiune numită — "antet antet" pe o linie, "nav continut" pe următoarea, "radacina radacina" pe ultima descrie un layout clasic de trei rânduri cu antet și subsol pe toată lățimea. Instrumentul citește numele repetate ca zone de grid și generează declarația grid-template-areas corespunzătoare automat.
Opțiunile controlează restul CSS generat. Setați spațierea dintre celule în pixeli și, opțional, dați lățimea sau înălțimea explicită coloanelor sau rândurilor folosind orice dimensiune de pistă CSS validă — unități fr, auto sau minmax(); lăsați orice câmp gol și instrumentul distanțează pistele în mod egal. Activați regulile pe zonă pentru a obține o declarație grid-area gata pentru fiecare secțiune numită, folosind un prefixul de clasă pe care îl alegeți, pentru ca "antet" să devină .grid-antet imediat. Un comutator responsiv adaugă o cerere de media max-width care restrânge întregul layout la o singură coloană pe ecrane înguste, iar un comutator HTML anexează o scheletă de marcare corespunzătoare pentru a vedea structura alături de CSS.
Dacă două celule cu același nume nu formează un dreptunghi solid — o formă în L sau un nume care omite o celulă — gridurile CSS reale nu pot reda acea zonă corect, deci instrumentul o marchează direct în ieșire ca comentariu de avertisment în loc să genereze reguli care arată nevalid în tăcere. Întreruperile de linie din orice sistem de operare sunt tratate în același mod, iar numărătorile live de sub ieșire urmăresc câte rânduri de layout, zone numite și caractere conține CSS-ul generat.
Tot funcționează local în browser-ul dumneavoastră; layout-ul pe care îl desenați și CSS-ul pe care-l obțineți nu sunt niciodată trimise nicăieri. Copiați rezultatul, descărcați-l ca fișier .txt sau trimiteți ieșirea direct către un alt instrument, cum ar fi formatorul CSS, pentru a ajusta mai departe indentarea.