CSS 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 განსაზღვრავს ბადეს და თითოეული ელემენტის პოზიციას. ჩასვით ორივე თქვენს პროექტში და მიიღებთ ზუსტად იმავე განლაგებას, რაც აქ დახატეთ.