CSS 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-ը սահմանում է ցանցը և դիրքավորում յուրաքանչյուր տարրը: Տեղադրե՛ք երկուսն էլ Ձեր նախագծում, և Ձեր դասավորությունը կլինի ճիշտ այնպիսին, ինչպիսին գծել եք այստեղ: