Ինչպես ստեղծել CSS Grid դասավորության կոդը

Մուտքագրեք սյունակների, տողերի և բացերի ցանկալի արժեքները, ստեղծեք CSS-ը և ստուգեք վերադարձված Grid հայտարարությունները։ Թվային սյունակներն ու տողերը ստանում են փաստագրված repeat ձև, իսկ հատուկ տեքստը պահպանվում է։

Դասավորության նախնական ընտրությունը

CSS Grid Generator-ը նախատեսված է սյունակներով, տողերով և դրանց միջև հեռավորություններով CSS Grid դասավորության կոդ ստեղծելու համար։ Այն օգտակար է, երբ քարտերի, պատկերասրահի, վահանակի կամ մեկ այլ բազմաբաժին կառուցվածքի համար ցանկանում եք արագ ստանալ սկզբնական ոճավորման ձև։ Ստացված CSS-ում ցանցի ցուցադրումը հայտարարվում է display: grid արժեքով, իսկ սյունակների և տողերի ձևանմուշները ներկայացվում են առանձին հայտարարություններով։

Մուտքերի դաշտերը պարտադիր չեն, և նախապես սահմանված կառուցվածքը ներառում է 3 սյունակ, auto տողեր, 10 ընդհանուր բաց, 0 սյունակների բաց և 0 տողերի բաց։ Այդ նախնական արժեքները կարող եք պահպանել կամ փոխարինել ձեր դասավորությանը համապատասխան տվյալներով։ Սյունակների ու տողերի մուտքերը նախ դիտարկվում են որպես տեքստ, ուստի ամբողջ թվով արժեքը նույնպես ընդունվում է, սակայն դրա արդյունքը տարբերվում է հատուկ CSS տեքստից։

Սյունակների դաշտում միայն թվանշաններից կազմված արժեքը վերածվում է repeat ձևի՝ մեկ 1fr ճկուն միավորով։ Օրինակ՝ 3 արժեքը ներկայացվում է որպես երեք ճկուն սյունակ։ Եթե գրեք 200px 1fr կամ 1fr 1fr 1fr, այդ տեքստը պահպանվում է։ Տողերի թվային արժեքը նույնպես ստանում է repeat ձև, բայց ավտոմատ չափմամբ, իսկ auto-ն և այլ ոչ թվային տեքստը չեն ստանում թվային կրկնության ձև։

Մուտքերի լրացման հերթականությունը

1. Սահմանեք, թե քանի սյունակ է անհրաժեշտ ձեր կառուցվածքին, և որոշեք՝ տողերի չափը պետք է լինի ավտոմատ, թվային կրկնությամբ ստեղծվի, թե գրվի հատուկ CSS տեքստով։ Այս որոշումը կատարեք նախքան արժեքները մուտքագրելը, որպեսզի ստացված հայտարարությունները հեշտ լինի համեմատել ձեր նպատակին։

2. Սյունակների դաշտում մուտքագրեք միայն թվանշաններով թիվ, եթե ցանկանում եք նույն տրամաբանությամբ բաժանված ճկուն սյունակներ։ 3 արժեքը առաջացնում է repeat(3, 1fr) ձև։ Հստակ չափերի հաջորդականության դեպքում օգտագործեք, օրինակ, 200px 1fr, կամ գրեք 1fr 1fr 1fr, քանի որ նման հատուկ տեքստը պահվում է առանց թվային repeat փոխակերպման։

3. Տողերի դաշտում գրեք auto, երբ ցանկանում եք ավտոմատ տողերի արժեք։ Եթե մուտքագրեք թվային արժեք, որը auto չէ, այն կստանա repeat(թիվ, auto) կառուցվածք. օրինակ՝ 2 արժեքը նշանակում է երկու ավտոմատ տող։ Այլ տեքստային արժեքը պահպանվում է իր գրած ձևով և չի վերածվում այդ թվային ձևաչափին։

4. Ընդհանուր բացի դաշտում մուտքագրեք թիվ, երբ սյունակների և տողերի միջև պետք է նույն հեռավորությունը։ Ճշմարիտ արժեքը արդյունքի մեջ արտահայտվում է px միավորով, իսկ կեղծ արժեքի դեպքում ընդհանուր gap հայտարարությունը չի ավելացվում։

5. Տարբեր հեռավորությունների համար առանձին լրացրեք սյունակների բացի և տողերի բացի դաշտերը։ Ճշմարիտ սյունակների բացը ստեղծում է column-gap հայտարարություն, իսկ ճշմարիտ տողերի բացը՝ row-gap հայտարարություն, և երկու արժեքներն էլ գրվում են px միավորով։ Զրոյական կամ այլ կեղծ արժեքը համապատասխան հայտարարությունը դուրս է թողնում։

6. Ստեղծեք արդյունքը, ապա ուսումնասիրեք վերադարձված CSS-ի display հայտարարությունը, սյունակների ձևանմուշը, տողերի ձևանմուշը և բացերի հայտարարությունները։ Նոր փոփոխություն կատարելուց հետո կարող եք կրկին ստեղծել արդյունքը՝ փոխելով միայն այն դաշտը, որի ազդեցությունն եք ցանկանում ստուգել։

Ստացված CSS-ի իմաստը

Արդյունքը կարդալիս նախ փնտրեք display: grid հայտարարությունը, քանի որ այն ցույց է տալիս, որ ստեղծված ոճը նախատեսված է Grid ցուցադրման համար։ Սյունակների և տողերի առանձին ձևանմուշները բացատրում են, թե ինչպես է տարածքը բաժանվում երկու ուղղությամբ։ Դրանց կողքին հայտնվող բացերի հայտարարությունները ցույց են տալիս, թե որ հեռավորություններն են ներառվել տվյալ մուտքերի հիման վրա։

Եթե սյունակների արժեքը կազմված է միայն թվանշաններից, repeat կառուցվածքը նշանակում է նշված քանակով սյունակներ և յուրաքանչյուրի համար մեկ 1fr միավոր։ Սա հարմար է հավասար ճկուն բաժանումների համար, սակայն չի նշանակում, որ ցանկացած բարդ CSS արտահայտություն վերլուծվել կամ ստուգվել է։ Ոչ թվային սյունակային տեքստը պահպանվում է որպես տեքստ, այդ պատճառով հատուկ չափումների դեպքում արդյունքը համեմատեք հենց մուտքագրած ձևակերպման հետ։

Տողերի թվային արժեքի դեպքում նույն կրկնվող մոտեցումը օգտագործում է auto չափում։ auto մուտքը մնում է ավտոմատ արժեքով, իսկ այլ տեքստը պահպանում է իր ձևը։ Ընդհանուր կամ առանձին բացի համար px միավորի առկայությունը սպասելի է, քանի որ ճշմարիտ բացի արժեքները այդպես են արտահայտվում։ Կեղծ արժեքի դեպքում հայտարարության բացակայությունը կարող է լինել նախատեսված արդյունք, ոչ թե պարտադիր սխալ։

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

Գործնական օրինակ

Դուք պատրաստում եք քարտերի շարք, որի համար պետք է երեք հավասար սյունակ և նույն չափով հեռավորություն։

Քարտերի շարքի համար սյունակների դաշտում մուտքագրեք 3, տողերի դաշտում թողեք auto, ընդհանուր բացի դաշտում գրեք 12 և ստեղծեք արդյունքը։

Արդյունքում պետք է տեսնեք display: grid, սյունակների ձևանմուշ repeat(3, 1fr), ավտոմատ տողերի ձևանմուշ և 12px ընդհանուր բացի հայտարարություն։

Սահմանափակումներ

• Մի ենթադրեք, որ սյունակների կամ տողերի ցանկացած արտահայտություն կվերլուծվի կամ կստուգվի. թվային փոխակերպումը գործում է փաստագրված թվային կանոններով, իսկ այլ տեքստը պահպանվում է որպես մուտք։

Հաճախակի սխալներ

• Եթե հատուկ CSS տեքստից սպասում եք ավտոմատ վերլուծություն, պատճառը կարող է լինել այն, որ թվային փոխակերպումը գործում է միայն թվանշաններով սյունակների և համապատասխան թվային տողերի համար։ Օգտագործեք թվային արժեք, երբ պետք է repeat ձև, պահեք հատուկ տեքստը որպես պատրաստ ձևակերպում, իսկ բացերը մուտքագրեք որպես թիվ և ստուգեք px արդյունքը։

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

Ինչպե՞ս ստանալ երեք ճկուն սյունակ։

Երբ սյունակների դաշտում գրում եք միայն թվանշաններից կազմված արժեք, այն վերածվում է repeat(թիվ, 1fr) ձևի։ Օրինակ՝ 3 մուտքը տալիս է երեք ճկուն սյունակ, իսկ 200px 1fr ձևակերպումը պահպանվում է որպես հատուկ տեքստ։

Կարո՞ղ եմ տողերի համար օգտագործել auto։

Այո, auto արժեքը պահպանվում է որպես ավտոմատ տողերի արժեք։ Թվային տողը, որը auto չէ, ստանում է repeat(թիվ, auto) ձև, մինչդեռ այլ տեքստային արժեքը չի ենթարկվում այդ թվային փոխակերպմանը։

Ի՞նչ միավորով են գրվում բացերը։

Ճշմարիտ ընդհանուր, սյունակների կամ տողերի բացի արժեքը գրվում է px միավորով։ Կեղծ արժեքի դեպքում համապատասխան gap, column-gap կամ row-gap հայտարարությունը չի ավելացվում։