CSS Grid გენერატორი — ვიზუალური ბადის შექმნა
CSS Grid გენერატორი არის ვიზუალური ინსტრუმენტი, რომელიც საშუალებას გაძლევთ დააპროექტოთ CSS ბადის განლაგება სვეტებისა და სტრიქონების რაოდენობის, მათი ზომებისა და მათ შორის დაშორებების განსაზღვრით. ბადეზე კურსორის გადათრევით შეგიძლიათ მარტივად განათავსოთ ელემენტები სასურველ ადგილას. ხელსაწყო ავტომატურად აგენერირებს შესაბამის CSS და HTML კოდს, რომლის კოპირება და საკუთარ პროექტში ჩასმაც ერთი დაწკაპუნებით არის შესაძლებელი.
თქვენი ბადე იქმნება პირდაპირ თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება, რაც უზრუნველყოფს მონაცემთა ლოკალურ დამუშავებას.
პარამეტრები და შეყვანის მნიშვნელობები
ბადის სტრუქტურის შესაქმნელად ინსტრუმენტი იყენებს შემდეგ პარამეტრებსა და შეზღუდვებს:
- სვეტები: რიცხვითი მნიშვნელობა 1-დან 12-მდე.
- სტრიქონები (Rows): რიცხვითი მნიშვნელობა 1-დან 12-მდე.
- სვეტებს შორის დაშორება: მნიშვნელობა 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). - ელემენტის განთავსება: უჯრედებზე კურსორის გადათრევა მართკუთხა არეალის მოსანიშნად.
მუშაობის წესები და ფუნქციონალი
ბადის აგებისას მოქმედებს კონკრეტული წესები, რომლებიც განსაზღვრავენ კოდის გენერირების ლოგიკას:
- ელემენტების განთავსება: უჯრედებზე კურსორის გადათრევისას და მაუსის ღილაკზე თითის გაშვებისას იქმნება განთავსებული შვილობილი ელემენტი, რომელიც მოიცავს მონიშნულ სვეტებსა და სტრიქონებს.
- კოდის შესაბამისობა: თითოეული დახატული ელემენტი იღებს საკუთარ
grid-columnდაgrid-rowწესს CSS-ში და შესაბამისdiv-ს HTML კოდში. - გადაკვეთა და ფენები: ელემენტები შეიძლება გადაიკვეთოს. ამ შემთხვევაში, ის ელემენტი, რომელიც მოგვიანებით დაიხატა, თავსდება ზემოდან.
- ელემენტის წაშლა: თითოეულ ელემენტზე არსებულ "×" ნიშანზე დაწკაპუნებით ხდება მისი წაშლა.
- ბილიკების ზომები: თითოეულ ბილიკს (სვეტს ან სტრიქონს) აქვს საკუთარი ზომის ველი. თუ შეიყვანთ არავალიდურ მნიშვნელობას (მაგალითად,
not-a-grid-track), შეყვანის ველი მოინიშნება როგორც არავალიდური, თუმცა გენერირებული CSS შეინარჩუნებს ბოლო ვალიდურ მნიშვნელობას. - კოდის ოპტიმიზაცია: ბილიკები, რომლებიც იზიარებენ ერთსა და იმავე ზომას, გამომავალ CSS კოდში ერთიანდება
repeat()ფუნქციაში. - დაშორებების ოპტიმიზაცია: სვეტებისა და სტრიქონების დაშორებები ყენდება დამოუკიდებლად, თუმცა, როდესაც მათი მნიშვნელობები ემთხვევა, ისინი CSS-ში ერთიანდება ერთ
gapთვისებად. - შეზღუდვები: ხელსაწყო მხარს უჭერს მაქსიმუმ 16 ელემენტის განთავსებას.
- მართვის ღილაკები: "ელემენტების გასუფთავება" მთლიანად ასუფთავებს HTML კონტეინერს და ელემენტების რაოდენობას ნულამდე ამცირებს. "ელემენტის დამატება" კი აგენერირებს ახალ HTML ელემენტს.
მზა შაბლონები (პრესეტები)
სწრაფი პროტოტიპირებისთვის ხელსაწყოში ხელმისაწვდომია პრესეტები:
- გვერდითი პანელი
- ჰედერი და ფუტერი
- გალერეა: აგენერირებს 3 სვეტს, 2 სტრიქონს და 3 ელემენტს.
- მართვის პანელი (Dashboard)
CSS Grid-ის ძირითადი პრინციპები
grid-template-columns და grid-template-rows თვისებები
ეს თვისებები განსაზღვრავენ ბადის სვეტებისა და სტრიქონების რაოდენობასა და ზომებს. მათი მნიშვნელობები შეიძლება გაიწეროს აბსოლუტურ ერთეულებში (მაგ. px), ფარდობით ერთეულებში (მაგ. %, em) ან სპეციალურ მოქნილ ერთეულებში.
fr ერთეული
fr (fractional unit) არის სპეციალური ერთეული CSS Grid-ში, რომელიც წარმოადგენს ბადის კონტეინერში არსებული თავისუფალი სივრცის წილადს. მაგალითად, თუ ბადეს აქვს სამი სვეტი ზომებით 1fr 2fr 1fr, თავისუფალი სივრცე გაიყოფა 4 ტოლ ნაწილად, სადაც შუა სვეტი მიიღებს ორმაგ სივრცეს პირველ და მესამე სვეტებთან შედარებით.
repeat() ფუნქციის გამოყენება
კოდის შესამცირებლად და განმეორებადი ზომების მარტივად ჩასაწერად გამოიყენება repeat() ფუნქცია. მაგალითად, ნაცვლად ჩანაწერისა 1fr 1fr 1fr 1fr, შეგიძლიათ გამოიყენოთ repeat(4, 1fr), რაც ბრაუზერისთვის იდენტურია, მაგრამ კოდს უფრო კომპაქტურს ხდის.
ელემენტების განთავსება grid-column და grid-row თვისებებით
ბადეზე ელემენტების პოზიციონირება ხდება ხაზების ნომრების მიხედვით. grid-column და grid-row თვისებები განსაზღვრავენ, თუ რომელ ხაზზე იწყება და მთავრდება ელემენტი. მაგალითად, grid-column: 1 / 3 ნიშნავს, რომ ელემენტი დაიწყება პირველი ვერტიკალური ხაზიდან და გადაიჭიმება მესამე ხაზამდე, რითაც დაიკავებს ორ სვეტს.
ხშირად დასმული კითხვები (FAQ)
როგორ განვათავსო ელემენტები ბადეზე (grid)?
დააჭირეთ და გადაათრიეთ კურსორი უჯრედებზე მართკუთხედის მოსანიშნად — ხელის გაშვებისას ის იქცევა განთავსებულ შვილობილ ელემენტად, რომელიც მოიცავს ამ სვეტებსა და სტრიქონებს. თითოეული დახატული ელემენტი იღებს საკუთარ grid-column და grid-row წესს CSS-ში და შესაბამის div-ს HTML-ში. ელემენტები შეიძლება გადაიკვეთოს, სადაც მოგვიანებით დახატული ზემოდან მოექცევა; ელემენტის წასაშლელად გამოიყენეთ × ნიშანი.
შეიძლება თუ არა სვეტები და სტრიქონები სხვადასხვა ზომის იყოს?
დიახ. თითოეულ ბილიკს (track) აქვს საკუთარი ზომის ველი, სადაც შეგიძლიათ ჩაწეროთ ნებისმიერი grid მნიშვნელობა — 1fr, 200px, auto, min-content ან minmax(120px, 1fr). ბილიკები, რომლებიც იზიარებენ ერთსა და იმავე ზომას, გაერთიანებულია repeat() ფუნქციაში კოდის შესამცირებლად. სვეტებისა და სტრიქონების დაშორებები ცალ-ცალკე ყენდება და ერთიანდება ერთ gap თვისებად, როდესაც ისინი ერთმანეთს ემთხვევა.
რა ვუყო გენერირებულ კოდს?
დააკოპირეთ CSS და HTML კოდები. HTML გაძლევთ კონტეინერს თითოეული ელემენტის შესაბამისი div-ით, ხოლო CSS განსაზღვრავს ბადეს და თითოეული ელემენტის პოზიციას. ჩასვით ორივე თქვენს პროექტში და მიიღებთ ზუსტად იმავე განლაგებას, რაც აქ დახატეთ.
რა არის ელემენტების მაქსიმალური რაოდენობა, რომლის დამატებაც შემიძლია?
ინსტრუმენტი მხარს უჭერს მაქსიმუმ 16 ელემენტის განთავსებას ბადეზე.