CSS Grid-ի գեներատոր

CSS Grid-ի գեներատորի աշխատանքի սկզբունքը

CSS Grid-ի գեներատորը տեսողական գործիք է, որը թույլ է տալիս նախագծել CSS grid դասավորություններ՝ սահմանելով սյուների ու տողերի քանակը, դրանց չափերը և միջակայքերը։ Օգտագործողը կարող է մկնիկով քաշել ցանցի վանդակների վրայով՝ տարրեր տեղադրելու համար։ Գործիքը ավտոմատ կերպով ստեղծում է համապատասխան CSS և HTML կոդերը, որոնք կարելի է պատճենել և տեղադրել սեփական նախագծում։

Այս գործիքը նախատեսված է նրանց համար, ովքեր ցանկանում են արագորեն ստեղծել CSS grid դասավորության նախատիպը, կարիք ունեն գեներացնել CSS և HTML կոդեր առանց դրանք ձեռքով գրելու, կամ ցանկանում են տեսողականորեն պատկերացնել, թե ինչպես են սյուների ու տողերի տարբեր չափերն ազդում դասավորության վրա։ Այն նաև օգտակար է կողային վահանակով, գլխամասով ու կոլոնտիտուլով, պատկերասրահով կամ կառավարման վահանակով կառուցվածքներ ստեղծելու համար։

Մուտքային տվյալներ և սահմանափակումներ

Դասավորությունը կառուցելու համար գործիքն ընդունում է հետևյալ պարամետրերը.

• Սյուներ: 1-ից մինչև 12 միջակայքում գտնվող թիվ։
• Տողեր (Rows): 1-ից մինչև 12 միջակայքում գտնվող թիվ։
• Միջսյունային հեռավորություն (Column gap): 0-ից մինչև 48px միջակայքում գտնվող թիվ։
• Միջտողային հեռավորություն (Row gap): 0-ից մինչև 48px միջակայքում գտնվող թիվ։
• Սյուների չափերը: CSS grid-ի ցանկացած վավեր արժեք, օրինակ՝ 1fr, 200px, auto, min-content կամ minmax(120px, 1fr)։
• Տողերի չափերը: CSS grid-ի ցանկացած վավեր արժեք, ինչպիսիք են 1fr, 200px, auto, min-content կամ minmax(120px, 1fr)։
• Տարրերի տեղադրում (Item placement): Ցանցի վանդակների վրայով քաշելու միջոցով ուղղանկյուն տիրույթի նշում։

Գործիքն աջակցում է առավելագույնը 16 տարրերի տեղադրում։

Ցանցի տարրերի տեղադրման և կոդի գեներացման կանոններ

Վանդակների վրայով քաշելուց և մկնիկի կոճակը բաց թողնելուց հետո ստեղծվում է տեղադրված դուստր տարր, որն ընդգրկում է ընտրված սյուներն ու տողերը։ Յուրաքանչյուր գծված տարր ստանում է իր սեփական grid-column և grid-row կանոնները CSS կոդում և համապատասխան div տարրը HTML կոդում։

Տարրերը կարող են համընկնել միմյանց հետ. այդ դեպքում ավելի ուշ գծված տարրը հայտնվում է նախորդների վերևում։ Տարրի վրայի «×» նշանին կտտացնելը հեռացնում է այն։ «Ավելացնել տարր» հրամանը գեներացնում է HTML տարր, իսկ «Մաքրել տարրերը» գործողության արդյունքում ստացվում է դատարկ HTML կոնտեյներ և 0 տարր։

Յուրաքանչյուր ուղի (սյուն կամ տող) ունի իր սեփական չափի դաշտը։ Եթե մուտքագրվի անվավեր արժեք, օրինակ՝ not-a-grid-track, մուտքագրման դաշտը կնշվի որպես անվավեր, սակայն գեներացված CSS կոդում կպահպանվի վերջին վավեր արժեքը։

Օպտիմալացումներ ելքային CSS կոդում

Գեներատորը կիրառում է կոդի կրճատման կանոններ՝ ելքային CSS-ը մաքուր պահելու համար.

1. repeat() ֆունկցիա: Այն ուղիները (սյուները կամ տողերը), որոնք ունեն նույն չափը, ելքային CSS կոդում միավորվում են repeat() ֆունկցիայի մեջ։
2. gap հատկություն: Միջսյունային հեռավորությունը (column gap) և միջտողային հեռավորությունը (row gap) սահմանվում են միմյանցից անկախ։ Սակայն, եթե դրանց արժեքները համընկնում են, ելքային CSS կոդում դրանք միավորվում են մեկ ընդհանուր gap հատկության մեջ։

Դասավորության նախակարգավորումներ

Արագ աշխատանքի համար գործիքն առաջարկում է պատրաստի նախակարգավորումներ։ Դրանք ներառում են.

• Կողային վահանակ
• Գլխամաս և կոլոնտիտուլ
• Պատկերասրահ: Այս նախակարգավորումը գեներացնում է 3 սյուն, 2 տող և 3 տարր
• Կառավարման վահանակ

Գաղտնիություն և տվյալների մշակում

Ձեր ցանցը կառուցվում է անմիջապես Ձեր բրաուզերում։ Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo։ Բոլոր գործողությունները և կոդի գեներացումը կատարվում են տեղային եղանակով՝ օգտագործողի սարքի վրա։

Հաճախ տրվող հարցեր

Ինչպե՞ս տեղադրել տարրերը ցանցի (grid) վրա:

Սեղմե՛ք և քաշե՛ք վանդակների վրայով՝ ուղղանկյուն նշելու համար. բաց թողնելիս այն կդառնա տեղադրված դուստր տարր, որն ընդգրկում է այդ սյուներն ու տողերը։ Յուրաքանչյուր գծված տարր ստանում է իր սեփական grid-column և grid-row կանոնները CSS-ում և համապատասխան div-ը HTML-ում։ Տարրերը կարող են համընկնել, և ավելի ուշ գծվածը կհայտնվի վերևում. օգտագործե՛ք տարրի վրայի × նշանը այն հեռացնելու համար։

Կարո՞ղ են սյուներն ու տողերը լինել տարբեր չափերի:

Այո՛։ Յուրաքանչյուր ուղի (track) ունի իր սեփական չափի դաշտը, որտեղ կարող եք մուտքագրել ցանցի ցանկացած արժեք՝ 1fr, 200px, auto, min-content կամ minmax(120px, 1fr)։ Նույն չափն ունեցող ուղիները միավորվում են repeat() ֆունկցիայի մեջ՝ կոդը կարճ պահելու համար։ Column gap-ը և row gap-ը սահմանվում են առանձին, իսկ համընկնելու դեպքում միավորվում են մեկ ընդհանուր gap-ի մեջ։

Ի՞նչ անել գեներացված կոդի հետ:

Պատճենե՛ք CSS-ը և HTML-ը կողք կողքի։ HTML-ը տալիս է Ձեզ կոնտեյները՝ յուրաքանչյուր տարրի համար մեկ div-ով, իսկ CSS-ը սահմանում է ցանցը և դիրքավորում յուրաքանչյուր տարրը։ Տեղադրե՛ք երկուսն էլ Ձեր նախագծում, և Ձեր դասավորությունը կլինի ճիշտ այնպիսին, ինչպիսին գծել եք այստեղ։