CSS Grid գեներատոր
Ստեղծեք CSS Grid դասավորության կոդ՝ սյուների, տողերի և միջակայքերի կարգավորմամբ:
Գործարկել գործիքը
CSS Grid գեներատորը ստեղծում է վեբ էջերի ցանցային դասավորության կոդ ըստ ընտրված պարամետրերի: Դուք կարող եք նշել սյուների և տողերի քանակը կամ չափսերը, ինչպես նաև տարրերի միջև ընդհանուր կամ առանձին հեռավորությունները: Գործիքը թույլ է տալիս մուտքագրել ինչպես պարզ ամբողջ թվեր, այնպես էլ սեփական արժեքներ: Երբ սյուների դաշտում գրում եք միայն թվանշաններ, կոդում ավտոմատ կիրառվում է repeat գրելաձևը հավասար ֆրակցիաներով: Եթե մուտքագրում եք կոնկրետ միավորներ, օրինակ՝ պիքսելներ կամ տոկոսներ, համակարգը պահպանում է ձեր նշած տեքստը: Տողերի համար կարող եք թողնել ավտոմատ չափսը կամ նշել կոնկրետ բաժանումներ: Բոլոր միջակայքերը գեներացվում են պիքսելներով, իսկ զրոյական արժեքները դուրս են մնում վերջնական կոդից՝ այն պահելով մաքուր: Արդյունքում դուք ստանում եք պատրաստի CSS կանոններ display: grid հատկությամբ, որոնք կարող եք անմիջապես պատճենել և տեղադրել ձեր նախագծի ոճային ֆայլում:
Հրահանգներ
- Մուտքագրեք սյուների քանակը կամ նշեք սյուների չափսերի տեքստային տողը:
- Լրացրեք տողերի կարգավորումը՝ նշելով auto կամ կոնկրետ չափսեր:
- Սահմանեք ընդհանուր միջակայքը պիքսելներով:
- Անհրաժեշտության դեպքում լրացրեք սյուների և տողերի առանձին միջակայքերի արժեքները:
- Սեղմեք ստեղծման կոճակը և պատճենեք ստացված CSS կոդը:
Օրինակներ
- Սյուներ: 3, Տողեր: auto, Ընդհանուր միջակայք: 10 -> Ստացվում է display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 10px;
- Սյուներ: 200px 1fr, Տողեր: 2, Ընդհանուր միջակայք: 0, Սյուների միջակայք: 15 -> Ստացվում է display: grid; grid-template-columns: 200px 1fr; grid-template-rows: repeat(2, auto); column-gap: 15px;
ՀՏՀ
Ինչպե՞ս է աշխատում թվային սյուների մուտքագրումը:
Եթե սյուների դաշտում մուտքագրում եք միայն թիվ, օրինակ՝ 4, գեներատորը ստեղծում է repeat(4, 1fr) արտահայտությունը:
Կարո՞ղ եմ օգտագործել սեփական չափման միավորներ:
Այո, սյուների և տողերի դաշտերում կարող եք գրել ցանկացած տեքստային արժեք, օրինակ՝ 1fr 2fr կամ 250px 1fr:
Ի՞նչ է տեղի ունենում, երբ միջակայքի արժեքը 0 է:
Զրո կամ դատարկ արժեք ունեցող միջակայքերի դեպքում համապատասխան CSS հատկությունը չի ավելացվում վերջնական կոդում: