CSS Grid Layout-ის შესავალი. როგორ შევქმნათ საპასუხო CSS ბადის განლაგება
დაახლოებით 2012 ან 2013 წლებში გავეცანი ვებ-განვითარებას. თანდათან ამ მიმართულების დამოუკიდებლად შესწავლა დავიწყე. მალე მივხვდი, რომ CSS ბევრ რამეს აყალიბებს მნიშვნელობას, მაგრამ ის არ ქმნის ადეკვატურ მარკირებას. იმდენი ჰაკია, რომ მათი გაგება ძალიან რთულია. სწორედ ამიტომ, თანამედროვე სტანდარტებში, რომლებსაც ამ სტატიაში განვიხილავთ, განსაკუთრებული ყურადღება ეთმობოდა მარკირებასთან მუშაობას.
რას შეიტყობთ ამ სტატიიდან:
- როგორ მუშაობდით CSS მარკირებით;
- განსხვავება მოძველებულ მიდგომებსა და თანამედროვე სტანდარტებს შორის;
- როგორ დავიწყოთ ახალი სტანდარტებით (Flexbox და Grid);
- რატომ უნდა ზრუნავდეთ ამ თანამედროვე სტანდარტებზე?
როგორ ვმუშაობდით CSS მარკირებით
დავალება
მოდით შევქმნათ საკმაოდ სტანდარტული პრობლემის მოდელირება: როგორ შევქმნათ გვერდი ორი სექციით - გვერდითი ზოლი და ძირითადი შინაარსის არე - რომლებიც იგივე სიმაღლეა, კონტენტის ზომის მიუხედავად?
აქ არის მაგალითი იმისა, რისკენაც ვისწრაფვით:
გვერდითი ზოლი და ძირითადი შინაარსის არე იგივე სიმაღლეა, კონტენტის ზომის მიუხედავად
პირველ რიგში, მე გაჩვენებთ, თუ როგორ უნდა მოაგვაროთ ეს პრობლემა ძველი მიდგომების გამოყენებით.
1. შექმენით div ორი ელემენტით
მაგალითად,
აშკარად მთავარს მეტი ტექსტი აქვს.
მოდით გამოვყოთ ფერით, რათა გაგიადვილდეთ ერთმანეთისგან გარჩევა:
განზე (ფერი: #fff; ფონის ფერი: #8cacea;)
2. მოათავსეთ ორივე მონაკვეთი გვერდიგვერდ
ამისათვის ჩვენ დავწერთ შემდეგს:
განზე, მთავარი (მცურავი: მარცხნივ;)
ეს სტილი ყოფს ხელმისაწვდომ სივრცეს საჭირო პროპორციებით და აყენებს განზე და მთავარ ათწილადად.
ორი ბლოკი მდებარეობს ერთმანეთის გვერდით
მათთვის, ვინც არ იცნობს float, ეს არის ელემენტების მარცხნივ ან მარჯვნივ გადაადგილების შედარებით ძველი გზა.
როგორც ზემოთ სურათზე ხედავთ, ამოცანა ჯერ კიდევ არ არის დასრულებული - გვერდითი ზოლის სიმაღლე არ ემთხვევა ძირითადი ზონის სიმაღლეს. გამოვასწოროთ ეს.
3. გამოიყენეთ ჩვენება: ცხრილის ხრიკი
ამ პრობლემის გადასაჭრელად, თქვენ უნდა გამოიყენოთ ჩვენება: ცხრილი.
თუ არ იცნობთ, აი, რა უნდა გააკეთოთ:
- ჩვენ ვაკეთებთ მთავარ კონტეინერს (ჩვენს შემთხვევაში სხეულის ელემენტს) ცხრილად: body ( ჩვენება: ცხრილი; )
- ჩვენ ვხსნით float-ს და ვაკეთებთ ბავშვის ელემენტებს განზე, ხოლო ცხრილის მთავარ უჯრედებს: aside, main( ჩვენება: table-cell; )
როგორც კი ამას გავაკეთებთ, პრობლემა შეიძლება ჩაითვალოს მოგვარებულად. ყოველ შემთხვევაში, ადრე ასე გვარდებოდა.
ორივე ბლოკი ახლა იგივე სიმაღლეა.
განსხვავება მემკვიდრეობით მიდგომებსა და თანამედროვე სტანდარტებს შორის
ახლა, როდესაც თქვენ გაქვთ წარმოდგენა იმის შესახებ, თუ როგორ მოგვარდა პრობლემა წარსულში, მოდით გადავხედოთ რა შეუძლიათ Flexbox-სა და Grid-ს.
Flexbox და Grid არის იდეალური გადაწყვეტილებები CSS მარკირებისთვის და წარმოადგენს თანამედროვე სტანდარტებს. თუ გჭირდებათ CSS კოდის დაწერა კარგ დონეზე, მაშინ აუცილებლად შეისწავლეთ ისინი.
პრობლემის გადაჭრა Flexbox-ის გამოყენებით
Flexbox ფორმატირების კონტექსტი ინიციალიზებულია flex კონტეინერის შექმნით.
მთავარი ელემენტია სხეული. ის შეიცავს გვერდითა ზოლს და მთავარ ზონას. შექმენით კონტეინერი:
სხეული (დისპლეი: მოქნილი;)
Flexbox მოქმედებაში
ნუ დავივიწყებთ პროპორციებზე:
გვერდით (სიგანე: 25%; ) მთავარი (სიგანე: 75%; )
პრობლემა მოგვარებულია
Flexbox-ით შეგიძლიათ გააკეთოთ მრავალი განსხვავებული რამ:
და მე მხოლოდ Flexbox აისბერგის წვერს შევეხე.
Flexbox ხელმისაწვდომია უმეტეს მხარდაჭერილ ბრაუზერებში. მისი სრულად გამოყენება შესაძლებელია Firefox-ში 28-დან, Chrome-ში 29-დან, Safari-ში 6.1-დან და Edge-ში 12-დან.
შენიშვნა თარგმანი
ჩვენი დაგეხმარებათ გაიგოთ Flexbox.
პრობლემის გადაჭრა Grid-ის გამოყენებით
Flexbox-ისგან განსხვავებით, რომელიც ძირითადად მუშაობს ერთ განზომილებაში, CSS Grid-ით შეგიძლიათ გამოიყენოთ როგორც სტრიქონები, ასევე სვეტები. ვნახოთ, როგორ მოვაგვაროთ ჩვენი პრობლემა მისი დახმარებით.
ყველაფერი ისევე იწყება, როგორც Flexbox-ის შემთხვევაში. შექმენით კონტეინერი:
სხეული (ჩვენება: ბადე;)
აქ არის მთელი CSS:
სხეული ( ჩვენება: ბადე; ფონის ფერი: #eeeeee; ) განზე (ფერი: #fff; ფონის ფერი: #8cacea;)
და ეს არის ის, რაც ჩვენ ვიღებთ:
პირველადი ვარიანტი
Grid ხელმისაწვდომია უმეტეს მხარდაჭერილ ბრაუზერებში, თუმცა უფრო მცირე რაოდენობით. მისი სრულად გამოყენება შესაძლებელია Firefox-ში 52-დან, Chrome-ში 57-დან, Safari-ში 10.1-დან და Edge-ში 16-დან.
ჩვენი უახლესი სურათი ჯერ კიდევ არაფრით განსხვავდება წინა სურათებისგან. მაშ რა არის მაგია?
გვერდით (სიგანე: 25%; ) მთავარი (სიგანე: 75%; )
რა მოხდება, თუ ჩვენ გავყოფთ სიგანის პროპორციებს, როგორც ადრე:
დიახ, შედეგი განსხვავებულია, მაგრამ ეს არ გვიწყობს. გვერდითი ზოლი ჯერ არ არის განლაგებული ძირითადი ტერიტორიის მხარეს.
აქ მივედით Grid მარკირების არსებამდე. Grid კონტეინერის ინიციალიზაციის შემდეგ ჩვენებით: ბადე, თქვენ უნდა განსაზღვროთ რიგები და რიგები მასში.
აი, როგორ კეთდება ეს:
ტექსტი ( ბადე-თარგი-სვეტები: 30% 70%; )
ერთი ხაზის გადაწყვეტა ლამაზია, არა? ბადე-თარგი-სვეტები განსაზღვრავს სვეტების პროპორციებს ქსელში.
პრობლემა მოგვარებულია
მაგრამ Grid-ით ბევრად მეტის გაკეთება შეგიძლიათ.
პირველ რიგში, მოდით დავამატოთ ცოტა ფერი მთავარ ბლოკს, რომ მაგალითები უფრო გასაგები გახდეს:
მთავარი (ფონის ფერი: rgba (39,174,96,1); ფერი: #fff; )
ეს არის ის, რაც უნდა მივიღოთ:
ძირითადი შინაარსის არეალის ფერით შევსება
ვნახოთ, რას გვთავაზობს Grid:
- თქვენ შეგიძლიათ განსაზღვროთ უფსკრული სვეტებს შორის: სხეული (ბადე-სვეტი-უფსკრული: 15 პიქსელი; )
აი შედეგი:
ის ბევრად უფრო სუფთად გამოიყურება სვეტებს შორის უფსკრულით.
არ არის საჭირო გვერდის და მთავარ ბლოკებზე ბალიშის დამატება: ამას აკეთებს grid-column-gap.
- შეგიძლიათ გააკეთოთ იმდენი სვეტი, რამდენიც გჭირდებათ. ზემოთ მოყვანილ მაგალითებში გამოყენებულია მხოლოდ ერთი ელემენტი და მთავარი. დავამატოთ კიდევ ორი:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. ენეის მასა. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
დამატებულია ხაზის შესვენება
- ამის გასამარტივებლად, შეგიძლიათ გამოიყენოთ მალსახმობი: grid-gap: 15 px ნაცვლად grid-row-gap და grid-column-gap .
თქვენ შეგიძლიათ განსაზღვროთ მწკრივების ზომები: სხეული ( ბადის შაბლონი - რიგები: 200 პიქსელი 300 პიქსელი 400 პიქსელი; )
რიგის სხვადასხვა სიმაღლეები
ახლა პირველი, მეორე და მესამე ხაზების სიმაღლეა შესაბამისად 200, 300 და 400 პიქსელი.
დასაწყისისთვის ეს საკმარისია - მაგრამ ეს ყველაფერი არ არის.
როგორ დავიწყოთ ახალი სტანდარტებით?
თქვენ ნახეთ მაგალითი იმისა, თუ როგორ უზრუნველყოფს Flexbox და Grid უკეთესი განლაგების გადაწყვეტილებებს. მაშ როგორ დავიწყოთ?
რატომ უნდა ზრუნავდეთ ამ სტანდარტებზე?
- თუ ჯერ კიდევ არ გესმით, რატომ ღირს Flexbox-ისა და Grid-ის გამოყენება, აქ მოცემულია რამდენიმე პრობლემა, რომელიც შეიძლება შეგხვდეთ წინა გადაწყვეტილებებთან დაკავშირებით:
- აბსოლუტური პოზიციონირებით, ელემენტებს შეუძლიათ ერთმანეთის გადახურვა;
- ჩვენების გამოყენებით: ცხრილი ტოვებს უამრავ არასაჭირო მარკირებას;
- ინლაინ-ბლოკის გამოყენებისას იქნება პრობლემები ცარიელი ადგილების გამო.
ვფიქრობ, თქვენ უკვე იცით, რომ Grid სჯობს Flexbox-ს განლაგების შესაქმნელად. მაგრამ რაც შეეხება საპასუხო განლაგებას? რომელია უკეთესი Flexbox-ის ან Grid-ის გამოყენება? ორივეს შეუძლია იმუშაოს საპასუხო განლაგებებთან. შეიძლება ფიქრობთ, რომ Flexbox უკეთესია, ბოლოს და ბოლოს - Flex ელემენტებს შეუძლიათ გაჭიმვა, შეკუმშვა, მიმართულების შეცვლა და ა.შ. მაგრამ Grid-ს რეალურად აქვს რამდენიმე ახალი ხრიკი, რომელიც დაზოგავს თქვენ დიდ დროს და პრობლემებს საპასუხო განლაგებისთვის.
Minmax ფუნქცია
პირველი მბზინავი ახალი Grid ინსტრუმენტი არის minmax ფუნქცია, რომელიც საშუალებას გვაძლევს განვსაზღვროთ დიაპაზონები სვეტებისა და რიგებისთვის ჩვენს განლაგებაში. ამ მაგალითში გვაქვს ნარინჯისფერი გვერდითი ზოლი და გვინდა, რომ სიგანე იყოს მინიმუმ 100 პიქსელი, მაგრამ არაუმეტეს კონტეინერის სიგანის 30%. კონტეინერის სიგანე 500 პიქსელია, ამიტომ ჩვენი გვერდითი ზოლი სიამოვნებით იკავებს 30%-ს (150 პიქსელს).
აქ არის ზუსტად იგივე კოდი, მაგრამ კონტეინერის სიგანე 150 პიქსელზე ნაკლებია. ახლა ჩვენი მინიმალური მნიშვნელობა იწყება და უზრუნველყოფს, რომ ნარინჯისფერი გვერდითი ზოლი არ იყოს 100 პიქსზე ნაკლები.
როგორ მუშაობს minmax ფუნქცია გასაოცარია, უმეტეს შემთხვევაში თქვენ არც კი დაგჭირდებათ მედია მოთხოვნების გამოყენება.
ჩვენ შეგვიძლია მივაღწიოთ მსგავს ეფექტს Flexbox-ის გამოყენებით, მაგრამ ამას ცოტა მეტი სამუშაო და კოდი სჭირდება. ჩვენ უნდა გამოვიყენოთ მოქნილი ზრდის, მინ-სიგანის, მაქსიმალური სიგანის კომბინაცია:
Grid მეთოდი უფრო მოქნილი და ადვილად ადაპტირებადია. კოდი თითქმის ორჯერ ნაკლებია.
ერთი წესი ყველა ელემენტისთვის
თუ თქვენ გჭირდებათ მედია მოთხოვნები, Grid განლაგებით ამის გაკეთება ადვილია. ვთქვათ, რომ გვინდა შევცვალოთ ეს განლაგება მობილურზე ერთ სვეტად. Flexbox-ით, ჩვენ დაგვჭირდება განლაგების ყველა ელემენტის შეცვლა, რათა გადალახოს მინიმალური სიგანე. არ არის საჭირო მაქსიმალური სიგანის გადალახვა, რადგან მინიმალური სიგანე უპირატესობას ანიჭებს.
თუ თქვენ გაქვთ მარტივი განლაგება, ეს მიდგომა საკმაოდ კარგად მუშაობს. მაგრამ რაც უფრო რთულია თქვენი განლაგება, მით მეტი ელემენტის ხელახალი განსაზღვრა დაგჭირდებათ მედია მოთხოვნების საშუალებით. Grid-ის დახმარებით ამ პრობლემის მოგვარება ბევრად უფრო ადვილია.
გამარჯობა ყველას! დღეს ჩვენ ვისაუბრებთ რა არის ქსელის სისტემები?ან უბრალოდ მოქნილი ბადეები ადაპტური განლაგებით.
ჯერ განვსაზღვროთ რა არის ეს ბადის სისტემა.
ბადის სისტემა- კლასზე დაფუძნებული სტილის კოლექცია, რომელიც მომხმარებელს საშუალებას აძლევს აკონტროლოს გვერდის განლაგება რიგებისა და სვეტების სისტემის გამოყენებით.
წარმოვიდგინოთ, რომ გვაქვს ბლოგის გვერდი. იგი დაყოფილია 2 სვეტად: ძირითადი ნაწილი მარცხნივ და გვერდითი ზოლი მარჯვნივ. შევეცადოთ შევქმნათ მოქნილი ბადე ასეთი გვერდისთვის.
კარგი, ჯერ რაღაც ძირითადი უნდა გავაკეთოთ, მაგრამ... htmlმარკირება
აქ გვაქვს ბლოკი, რომელიც შეიცავს მთელ გვერდს, შეიცავს ბლოკს ბლოგით, რომელიც შეიცავს 2 ბლოკს: გვერდის ძირითად ნაწილს და გვერდითა ზოლს.
ასე რომ, ჩვენი მთელი გვერდი იქნება ზომა 960 პიქსელი. მთელი ბადე დაყოფილია 12 სვეტად 69 პიქსელი. თითოეული. ბლოგის ნაწილი ფართო იქნება 900 პიქსელი. გვერდის ძირითადი ნაწილი იქნება 566 პიქსელი, გვერდითი ზოლი - 331 პიქსელი.
ეს არის ის, რასაც საბოლოოდ ვიღებთ
#გვერდი (
ზღვარი: 36px ავტო;
სიგანე: 960px;
}
ბლოგი (
ზღვარი: 0 ავტო 53 პიქსელი;
სიგანე: 900px;
}
ბლოგი.მთავარი (
float: მარცხენა;
სიგანე: 566px;
}
ბლოგი .გვერდითი პანელი (
float: მარჯვნივ;
სიგანე: 331px;
}
ყველაფერი კარგად იქნება, მაგრამ, როგორც ხედავთ, ეს ყველაფერი სტატიკურია, მითითებულია პიქსელებში. ჩვენ გვსურს, რომ ჩვენმა ბადემ შეცვალოს მისი ზომა იმისდა მიხედვით, თუ რომელ ეკრანზე იხსნება გვერდი, ამიტომ ყველაფერი უნდა დავაყენოთ პროცენტი. მოდით გავაკეთოთ ეს.
ამისათვის არის იგივე ფორმულა, რაც ფონტებისთვის
მიზანი / კონტექსტი = შედეგი
მოდით გადავიყვანოთ მთელი გვერდის ბლოკი პიქსელებიდან პროცენტებში.
#გვერდი (
ზღვარი: 36px ავტო;
სიგანე: 90%;
}
90% არჩეულია, რადგან ამ შემთხვევაში ჩვენ ასევე გვექნება ჩაღრმავები გასწვრივ კიდეებზე 5% . თუმცა, თქვენ შეგიძლიათ აირჩიოთ განსხვავებული მნიშვნელობა.
ჩვენ ვიყენებთ ჩვენს ფორმულას: 900 / 960 = 0.9357
მოდით გავამრავლოთ შედეგი 100 პროცენტის მისაღებად და ჩვენ დავარეგისტრირებთ მას ჩვენს css.
ბლოგი (
ზღვარი: 0 ავტო 53 პიქსელი;
სიგანე: 93,75%;
}
იგივე უნდა გაკეთდეს სვეტებთან, მაგრამ შენიშნეთ, რომ კონტექსტი შეიცვალა. იმიტომ რომ სვეტები არის კლასის მქონე ბლოკის შიგნით .ბლოგი, მაშინ ეს იქნება კონტექსტი. მოდით გავაკეთოთ მათემატიკა.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
ყველაფერს ვაქცევთ პროცენტებში და ვწერთ სტილის ფურცელში.
ბლოგი.მთავარი (
float: მარცხენა;
სიგანე: 62,8888889%;
}
ბლოგი .გვერდითი პანელი (
float: მარჯვნივ;
სიგანე: 36.7777778%;
}
ესე იგი! ახლა ჩვენ გვაქვს მოქნილი ბადე და შეგვიძლია მისი გამოყენება განლაგებისთვის.
როგორც ხედავთ, ყველაფერი ძალიან მარტივია. მოქნილი ბადის საფუძველი, მოქნილი შრიფტის მსგავსად, იგივე ფორმულაა, რომლის დამახსოვრებაც შეგიძლიათ მარტივად შექმნათ საპასუხო ვებსაიტები.
შენიშვნა!როგორც ხედავთ, ჩვენ დავასრულეთ საკმაოდ გრძელი პროცენტული მნიშვნელობები. ზოგიერთმა შეიძლება გირჩიოთ მათი დამრგვალება, მაგრამ ეს არასოდეს არ გააკეთოთ! გახსოვდეს!
და ეს ყველაფერი ჩემთვის, მადლობა ყურადღებისთვის და წარმატებული ადაპტაციური განლაგებისთვის!
ეს სტატია გვიჩვენებს, თუ როგორ მუშაობს ეს შედარებით ახალი ტექნოლოგია, ზუსტად როგორ მუშაობს და არა მხოლოდ თვისებების აღწერა ზედაპირული მაგალითებით.
თავად სტატია არის CSS Grid Tutorial-ის საპასუხო გაძლიერებული თარგმანი
CSS Grid მოდული შეიქმნა CSS სამუშაო ჯგუფის მიერ, რათა უზრუნველყოს საუკეთესო გზა CSS-ში შაბლონების შესაქმნელად. იგი შევიდა კანდიდატის რეკომენდაციაში 2017 წლის თებერვალში და მთავარმა ბრაუზერებმა დაიწყეს მისი მხარდაჭერა 2017 წლის მარტში.
CSS Grid მალე გახდება ნებისმიერი ფრონტის დეველოპერის ინსტრუმენტარიუმის განუყოფელი ნაწილი. და თუ თქვენ ერთ-ერთი მათგანი ხართ, მაშინ მოგიწევთ ისწავლოთ CSS Grid — რომელიც თითქმის დაუჯერებელი იქნება ნებისმიერი ფრონტის განვითარების პოზიციისთვის.
ამ ძლიერი ფუნქციონალურობითა და ინტუიციური სინტაქსით, ქსელის შაბლონები უდავოდ შეცვლიან ვებ-გვერდის აგებას.
შესავალი
CSS Grid არის ახალი შაბლონის მოდელი, რომელიც ოპტიმიზირებულია 2D შაბლონებისთვის. ეს არის იდეალური მოდელი ვებსაიტების შაბლონებისთვის, ფორმებისთვის, გალერეებისთვის და ყველაფრისთვის, რაც მოითხოვს ზუსტ და საპასუხო პოზიციონირებას.
ბოლო წლებში ვებ-გვერდის განვითარებასთან ერთად, ვებსაიტების შაბლონების შემუშავება სულ უფრო რთული ხდება. ინტერნეტის ადრეულ წლებში HTML ცხრილები ხშირად გამოიყენებოდა მრავალსვეტიანი შაბლონებისთვის, ფორმებისთვის და ა.შ. მაგრამ ამ მეთოდს აქვს თავისი ნაკლოვანებები. ეს ნიშნავს, რომ პრეზენტაცია უნდა გაკეთებულიყო მარკირების დონეზე, ამიტომ არ იყო განსხვავება პრეზენტაციასა და შინაარსს შორის. ფაქტობრივად, ცხრილები შეიქმნა ტაბულური მონაცემების შესანახად და არა შაბლონების შესაქმნელად. და სემანტიკური საკითხების შეხების გარეშე, ცხრილის შაბლონები არ არის შექმნილი საპასუხო დიზაინისთვის.
Floats-მა საბოლოოდ შეცვალა ცხრილის შაბლონები, როგორც საყოველთაოდ მიღებული და რეკომენდებული მეთოდი შაბლონების შესაქმნელად, რადგან ის საშუალებას გვაძლევს განვათავსოთ ელემენტები განლაგებისგან დამოუკიდებლად. თუმცა, მიუხედავად იმისა, რომ ეს მეთოდი ითვლებოდა მნიშვნელოვან გაუმჯობესებად ცხრილის განლაგებასთან შედარებით, მას ასევე ჰქონდა თავისი შეზღუდვები. Floats ძირითადად შექმნილი იყო დოკუმენტის შაბლონებისთვის და არ იყო შესაფერისი რთული განაცხადის შაბლონებისთვის, რომლებიც ახლა გავრცელებულია ინტერნეტში. მცურავი ელემენტების კონტროლი რთულია, განსაკუთრებით სხვადასხვა ზომის მოწყობილობებზე და ხედებზე. ამან გამოიწვია სხვადასხვა ქსელის მსგავსი ჰაკები, რომლებიც ნორმად იქცა, მათი უმეტესობა მოითხოვდა დამატებით მარკირებას, რომელიც არღვევდა შინაარსის გამიჯვნის მთელ კონცეფციას. ასე რომ, CSS სამუშაო ჯგუფი ეძებდა უკეთეს გადაწყვეტას.
CSS Grid მოდელი ეხება ამ და სხვა საკითხებს. ის საშუალებას გაძლევთ შექმნათ მოწინავე შაბლონები იმ დროის იმ ნაწილში, რომელსაც დახარჯავთ მათზე ფლოტებით და ნაკლები კოდირებით.
მაგრამ, რა თქმა უნდა, ამისათვის შეგიძლიათ გამოიყენოთ სხვადასხვა მნიშვნელობები, როგორიცაა 100px, 7em, 30% და ა.შ. თქვენ ასევე შეგიძლიათ მიანიჭოთ სახელები სიმებს მათ ზომებთან ერთად.
ბადე-თარგი-სვეტები: 1fr 1fr 1fr
ისევე, როგორც ზემოთ, განსაზღვრავს მხოლოდ სვეტებს ბადეებში.
ავლენს ხარვეზს. ანუ სივრცეები ქსელის ელემენტებს შორის. აქ ჩვენ ვიყენებთ სიგრძის vw ერთეულს, რომელიც შეფარდებითია ხედის სიგანის მიმართ, მაგრამ ასევე შეგვიძლია გამოვიყენოთ 10px, 1em და ა.შ. Grid-gap თვისება არის სტენოგრამა grid-row-gap და grid-column-gap. თვისებები.
კარგად, კოდის მეორე ნაწილი უბრალოდ ანიჭებს სხვადასხვა სტილს ბადის ელემენტებს.
#ბადე >
repeat() ფუნქცია
თქვენ შეგიძლიათ გამოიყენოთ repeat() ფუნქცია ელემენტის ზომის მნიშვნელობის განმეორებითი დეკლარაციის გასაკეთებლად. მაგალითად, ამის ნაცვლად:
ბადე-თარგი-რიგები: 1fr 1fr 1fr 1fr 1fr;
ჩვენ შეგვიძლია გავაკეთოთ ეს:
Grid-template-rows: repeat(5, 1fr);
რაც საგრძნობლად შეამცირებს კოდის რაოდენობას, რომელიც უნდა დაწეროთ, განსაკუთრებით თუ მუშაობთ დიდ და განმეორებით ბადეებთან.
ვებსაიტის შაბლონის შექმნა CSS Grid-ით
ბადეები მოიცავს "ASCII გრაფიკის" ინტუიციურ სინტაქსს, რომელშიც თქვენ შეგიძლიათ ვირტუალურად "ნახოთ" შაბლონი კოდში, რაც ძალიან აადვილებს თქვენი შაბლონის შექმნას და შეცვლას. მნიშვნელოვანი ცვლილებებიც კი შეიძლება განხორციელდეს რამდენიმე წამში. ეს ინტუიციური სინტაქსი ასევე ეხმარება საპასუხო ვებ დიზაინში. სხვადასხვა მოწყობილობებისთვის სხვადასხვა შაბლონების შექმნა საკმაოდ რთული ხდება ბადეების გამოყენებისას.
მოდით შევქმნათ ვებსაიტის შაბლონი, რომელიც ასე გამოიყურება:
და აქ არის კოდი ამ შაბლონისთვის:
მოდით უფრო ახლოს მივხედოთ ჩვენს კოდს. HTML მარკირება ასე გამოიყურება:
და ასე მოვიქცევით
ქსელის კონტეინერი, ამიტომ ყველა სხვა ელემენტი ხდება ბადის ელემენტი.ახლა მოდით გადავხედოთ ASCII გრაფიკას, რომელზეც ადრე ვისაუბრეთ.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
ეს ნაწილი განსაზღვრავს ჩვენს შაბლონს. მხოლოდ კოდის დათვალიერებისას, ჩვენ ვხედავთ, რომ ეს არის 3x3 ბადე (სამი მწკრივი და სამი სვეტი). ეს გვაძლევს ხუთ ბადის ზონას ცხრა ბადის უჯრედზე, ვინაიდან ზოგიერთი ბადის არე რამდენიმე უჯრედს მოიცავს.
ჩვენ ასევე ვხედავთ, რომ სათაური იკავებს სამი უჯრედის მთელ პირველ რიგს, ხოლო ქვედა სტრიქონი იკავებს მთელ ქვედა რიგს, ასევე იკავებს სამ უჯრედს. ნავიგაციის, შინაარსისა და რეკლამის სექციები იზიარებენ სივრცეს მეორე რიგში, სადაც თითოეული ეს ელემენტი იღებს ერთ უჯრედს.
ახლა ჩვენ შეგვიძლია მივანიჭოთ თითოეული ამ ბადის არეები თითოეულ ელემენტს:
#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )
Grid-area თვისება არის სტენოგრაფიული თვისება, რომელიც საშუალებას გაძლევთ მოათავსოთ ბადის ელემენტები ბადეზე. ჩვენს შემთხვევაში, ჩვენ უბრალოდ მივმართავთ სახელებს, რომლებიც ადრე მივუთითეთ ქსელის შაბლონის ზონებში.
შაბლონის უმეტესობა უკვე დასრულებულია. დანარჩენი კოდი უბრალოდ ეხება ზომებს, სივრცეებს და სიმაღლეებს, ზოგადად უფრო დეკორატიულ არეალს.
შემდეგი კოდი იძლევა რიგებისა და სვეტების ზომებს:
Grid-template-rows: 60px 1fr 60px;
ბადე-თარგი-სვეტები: 20% 1fr 15%;
პირველი და მესამე ხაზი ორივე 60 პიქსელის სიმაღლეა, ხოლო მეორე ხაზი იკავებს მთელ დარჩენილ ადგილს.
პირველი სვეტი არის 20%, ხოლო მესამე არის 15%. მეორე იკავებს მთელ დარჩენილ ადგილს.
შაბლონის შეცვლა
თქვენ შეგიძლიათ შეცვალოთ შაბლონი უბრალოდ ბადის არეების გადალაგებით grid-template-areas-ში.
ასე რომ, თუ ჩვენ შევცვლით შემდეგს:
Grid-template-areas: “nav header header” “nav article ads” “nav footer ads”;
შედეგად, ჩვენ ვიღებთ შემდეგ შაბლონს:
თუმცა, შეიძლება დაგჭირდეთ ზომების კორექტირება, თუ პატარა ბადე უფრო დიდ ადგილას გადაიტანეთ.
მაგალითად, ამის გასაკეთებლად:
ნავიგაცია ახლა იკავებს ადგილს, სადაც იყო შინაარსი, შესაბამისად ზომები დარეგულირდა. წინააღმდეგ შემთხვევაში, გვექნებოდა ვიწრო შინაარსი და ფართო ნავიგაცია. ასე რომ, კოდი ახლა ასე გამოიყურება.
Grid-template-areas: “header header header” “article nav ads” /* მანამდე იყო “nav article ads” */ “footer footer footer”;
grid-template-rows: 60px 1fr 60px;
ბადე-თარგი-სვეტები: 1fr 20% 15%; /* მანამდე იყო „20% 1fr 15%“ */
აი შედეგი:
ადაპტაციური ბადის შექმნა
ქსელის შაბლონს აქვს ისეთი მნიშვნელობები, როგორიცაა ავტომატური შევსება და ავტომატური მორგება, რაც საშუალებას გაძლევთ შექმნათ ბადე გარკვეული ზომის მრავალი ტრეკით, რომელიც ჯდება კონტეინერში. ეს შეიძლება ნიშნავს, რომ ბადე რეაგირებს, რაც იმას ნიშნავს, რომ ელემენტები იცვლებიან პოზიციას ბრაუზერის ფანჯრის ზომის შეცვლისას.
მასში სვეტებს ენიჭებათ მინიმალური ზომა 150 პიქსელი და მაქსიმუმ დარჩენილი სივრცე. ასეთი ბილიკები განმეორდება იმდენჯერ, რამდენჯერაც საჭიროა კონტეინერში მოთავსება.
Repeat() ფუნქცია იმეორებს ტრეკის განსაზღვრას პირველი პარამეტრით მითითებულ ჯერზე. ავტომატური შევსების გამოყენება გამოიწვევს ტრეკების გამეორებას რაც შეიძლება ბევრჯერ, სანამ არ შეავსებენ კონტეინერს.
ამ ტრეკების ზომა მითითებულია მეორე პარამეტრში. ჩვენს შემთხვევაში, ჩვენ ვიყენებთ minmax(150px, 1fr) იმის აღსანიშნავად, რომ სვეტის მინიმალური ზომა არის 150px და მაქსიმალური არის 1fr.
ავტომატური მორგება
ავტომატური მორგება მუშაობს ისევე, როგორც ავტომატური შევსება. ერთადერთი განსხვავება აქ არის ის, რომ ავტომატური მორგება აერთიანებს ყველა ცარიელ ტრასას განლაგების ბოლოს, ხოლო ავტომატური შევსება არა. აქ საუკეთესო გზაა დემონსტრირება შედარებით.
აქ ორი პატარა ბადის ელემენტის გამოყენება დაგეხმარებათ აჩვენოთ სამუშაოს მთელი კონცეფცია. ავტომატური შევსება ტოვებს ცარიელ ტრასებს ბოლოს მითითებულ ზომებზე, ხოლო ავტომატური მორგება აჭიმავს ცარიელ ტრასას, რის შედეგადაც ბილიკები ივსება დაჭიმული ელემენტებით სივრცის შესავსებად.
ბადეები მედია მოთხოვნებით
ბადეების ერთ-ერთი ძლიერი მხარე ის არის, რომ თქვენ შეგიძლიათ შექმნათ სრულიად განსხვავებული შაბლონი წამებში.
ეს ხდის ბადეებს იდეალურს მედია შეკითხვებისთვის. ჩვენ შეგვიძლია უბრალოდ გადავანაწილოთ მნიშვნელობები ASCII გრაფიკაში და შედეგი ჩავაფუთოთ მედია მოთხოვნაში.
ეს არის სამი სვეტის შაბლონი დიდ ხედზე და ის იკუმშება ერთ სვეტად მცირე მოწყობილობებზე. ასე რომ, ეს მაგალითი განსხვავებულად გამოიყურება ეკრანის ზომის მიხედვით. ნებისმიერ შემთხვევაში, აქ არის შესაბამისი კოდი სამსვეტიანი შაბლონისთვის ფართო ხედებისთვის.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
და აქ არის შესაბამისი კოდი მობილური ვერსიისთვის:
ბადე-თარგი-ზონები: „სათაური“ „სტატია“ „რეკლამები“ „nav“ „ძირი“;
ასე რომ, მთელი საქმე არის მნიშვნელობების ხელახლა მინიჭება ქსელის შაბლონის ზონაში.
ჩვენს შემთხვევაში, ჩვენ ჩავატარეთ მობილური ვერსია მედია მოთხოვნაში, ასე:
@media ყველა და (მაქს-სიგანე: 575 პიქსელი) ( ტექსტი ( ბადის შაბლონი - არეები: „სათაური“ „სტატია“ „რეკლამები“ „nav“ „ძირი“; ბადე-თარგი-რიგები: 80 პიქსელი 1fr 70 პიქსელი 1fr 70 პიქსელი; ბადე- თარგი-სვეტები: 1fr )
გთხოვთ გაითვალისწინოთ, რომ ჩვენ ასევე დავარეგულირეთ მნიშვნელობები grid-template-rows და grid-template-colones, რათა შეესაბამებოდეს ახალ შაბლონს. კერძოდ, უნდა იყოს მხოლოდ ერთი სვეტი და მან უნდა დაიკავოს მთელი თავისუფალი ადგილი. და რადგან ქსელის ყველა ელემენტი იქნება ერთ გროვაში, ჩვენ მივანიჭებთ 5 რიგს და განვსაზღვრავთ მათ სიმაღლეებს.
ბადის შერწყმა ბლოკთან
თქვენი შაბლონის მოთხოვნებიდან გამომდინარე, არაფერი გიშლით ხელს მობილური ვერსიის ჩვენებაზე შეცვლაში: დაბლოკვა. როგორც აქ:
@media ყველა და (მაქს. სიგანე: 575 პიქსელი) ( სხეული ( ჩვენება: ბლოკი; ) )
ეს იმუშავებს ისევე, როგორც ზემოთ მოცემულ მაგალითში, მაგრამ ნაგულისხმევად, ელემენტები გამოჩნდება თავდაპირველი თანმიმდევრობით. ზემოთ მოყვანილ მაგალითში, მობილური ვერსიას აქვს ნავი რეკლამების ქვემოთ, მაგრამ თუ ჩვენ გამოვიყენებდით ჩვენება: ბლოკი, მაშინ ნავი იქნება რეკლამების ზემოთ.
ასევე ამ მეთოდის გამოყენებით, შესაძლოა დაგჭირდეთ ზოგიერთი ბალიშის დამატება, რათა კომპენსირება მოახდინოს ქსელის ვერსიაში შეტანილი ხარვეზების ნაკლებობისთვის.
აშკარა და იმპლიციტური ბადეები
CSS Grid იყენებს აშკარა ბადის და იმპლიციტური ბადის კონცეფციას. ეს არის საკვანძო კონცეფცია, რომელსაც სიფრთხილე გმართებთ ბადეების შექმნისას, წინააღმდეგ შემთხვევაში თქვენ აღმოჩნდებით მწკრივებისა და სვეტების თაიგულთან, რომელთა არსებობასაც არასოდეს ელოდით.
გამოკვეთილი ბადე არის ბადე, რომელსაც თქვენ განსაზღვრავთ ბადე-თარგი-სტრიქონები, ბადე-თარგი-სვეტები და ბადე-თარგი-არეები.
თუმცა, შეიძლება კვლავ გქონდეთ ელემენტები, რომლებიც არ ჯდება თქვენს "მკაფიოდ" განსაზღვრულ ბადეში. მაგალითად, თქვენ განსაზღვრეთ ბადე, რომელიც იტევს მხოლოდ ექვს ელემენტს, მაგრამ თავად კონტეინერი შედგება ცხრა ელემენტისგან. მხოლოდ ექვსი ელემენტი ჯდება აშკარა ბადეში და სამი დარჩება. და სწორედ აქ შემოდის იმპლიციტური ბადეები.
იმპლიციტური ბადეები ავტომატურად იქმნება ქსელის კონტეინერის მიერ, როდესაც ბადის ელემენტები განლაგებულია აშკარა ბადის გარეთ. კონტეინერი წარმოქმნის იმპლიციტურ ბადის ტრეკებს ქსელში იმპლიციტური რიგების დამატებით. ეს ხაზები აშკარა ბადეებთან ერთად ქმნიან იმპლიციტურ ხაზებს. აი მაგალითი:
ამ მაგალითში ჩვენ ცალსახად განვსაზღვრავთ ორ სტრიქონს და ორ სვეტს, რომლებიც განთავსდება ბადის ოთხ ელემენტს. თუმცა, არსებობს ექვსი ბადის ელემენტი, ასე რომ, იმპლიციტური ბადე შეიქმნა ორი დამატებითი ელემენტის განსათავსებლად.
და ეს ძალიან კარგია, თუ იმპლიციტური ბადე არ შეიქმნა, მაშინ ორი დამატებითი ელემენტი შექმნიდა სრულ არეულობას ქსელში.
ტრეკის ზომის დაყენება იმპლიციტური ბადეებისთვის
თქვენ შეიძლება შეამჩნიეთ, რომ დამატებითი რიგი არ არის ისეთივე მაღალი, როგორც წინა ორი. ეს იმიტომ ხდება, რომ ჩვენ ვაყენებთ მწკრივის სიმაღლეს grid-template-rows თვისებაში, მაგრამ ეს ეხება მხოლოდ აშკარა ბადეებს. იმპლიციტურ ბადეებზე მწკრივის სიმაღლე უნდა დაყენდეს ბადე-ავტო-სტრიქონების თვისების გამოყენებით. მაგრამ რადგან ჩვენ ეს არ გავაკეთეთ, გამოდის, რომ იმპლიციტური მწკრივი იყენებს ავტო ტრეკის ზომას, რომელიც დაფუძნებულია შინაარსზე. ასე განლაგებულია ტრეკის ზომის თვისებები:
ზოგადად ასე მიდის:
აშკარა ბადე იყენებს ბადე-თარგი-სტრიქონებს და ბადე-თარგი-სვეტებს
იმპლიციტური ბადე იყენებს ბადის-ავტო-სტრიქონებს და ბადის-ავტო-სვეტებს
ამ შემთხვევაში, ჩვენ სულაც არ გვჭირდება პირველ ელემენტზე ბოლო მნიშვნელობების მითითება, რადგან ის მხოლოდ ერთ ტრეკს მოიცავს. იგივე შეიძლება ითქვას მეორე ბადის ელემენტზე. ნაგულისხმევად, თუ არ მიუთითებთ ბოლო ხაზს, ელემენტი მხოლოდ ერთ ტრეკს მოიცავს.
სინამდვილეში, ჩვენ არ დაგვჭირდა პირველი ბადის ელემენტისთვის რაიმე პოზიციონირების დაზუსტება, რადგან ის გარკვეულ პოზიციაზეა, ის მაინც იქ იქნებოდა. მაგრამ თუ ჩვენ არ გვქონდა განსაზღვრული პოზიციონირება მეორე ელემენტისთვის, მაშინ ის განლაგებული იქნებოდა პირველი ელემენტის შემდეგ და დაიკავებდა მხოლოდ 1 ტრასას.
ბადის ხაზების დასახელება
თქვენ ასევე შეგიძლიათ დაასახელოთ ბადის ხაზები, რათა მათ უფრო ადვილად მიმართოთ. ეს შეიძლება გაკეთდეს grid-template-rows და grid-template-columns თვისებების დაყენებით, მაგალითად, როგორც აქ:
#grid ( ჩვენება: ბადე; /* დააყენეთ ბილიკები და დაასახელეთ ხაზები */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; სიმაღლე: 90vh; ). .. /* ახლა მიმართეთ დასახელებულ ხაზებს */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end : col3 -ბოლო)
დასახელებული ხაზები შეიძლება იყოს როგორც აშკარა, ასევე იმპლიციტური. იმპლიციტური დასახელებული ხაზები იქმნება, როდესაც თქვენ ქმნით დასახელებულ ბადის არეებს grid-template-areas-ის გამოყენებით.
სახელი აღებულია ბადის არედან, ბოლოში დამატებულია -დაწყება და -end, იმისდა მიხედვით, არის ეს ხაზის დასაწყისი თუ დასასრული.
ამრიგად, თითოეული ბადის ფართობისთვის, სახელად სათაური, შეიქმნება ოთხი იმპლიციტური ხაზი. ორს სახელდება header-start და column-start დასახელებულ ბადის ზონაში, ხოლო ორს დასახელებულია header-end შესაბამისად.
დასახელებული ბადის სფეროები
ბადის არეები შეიძლება დასახელდეს თავად ქსელის კონტეინერის საკუთრებაში ბადე-თარგი-არეები. ეს არის ის, რაც ჩვენ გავაკეთეთ ადრე, როდესაც შევქმენით საიტის შაბლონი. ამის მეხსიერებაში აღსადგენად, ასე გამოიყურება:
#grid ( ჩვენება: ბადე; /* დაასახელეთ ბადის არე */ grid-template-areas: “a a” “b c”; ... ) ... /* ახლა გამოიყენეთ ბადის თითოეული ელემენტი დასახელებულ ბადის არეალში */ # a ( ბადის ფართობი: a; ) #b ( ქსელის ფართობი: b; ) #c ( ქსელის ფართობი: c; )
თქვენ შეგიძლიათ მიუთითოთ ცარიელი უჯრედი წერტილის (.) ან წერტილების სერიის გამოყენებით ინტერვალის გარეშე. მაგალითად:
ბადე-თარგი-უბნები: “a” “. ბ";
ან ბადე-თარგი-არეალები: “header header” “... content”;
არსებობს სამი მოკლე თვისება, რომელიც შეიძლება გამოყენებულ იქნას ზემოთ მოცემულ მაგალითებში ნახსენები გრძელი ბადის განლაგების თვისებების ნაცვლად. ეს არის სადაც ისინი ყველა შეესაბამება.
ქსელის ფართობი - ეს თვისება არის სტენოგრაფიული:
ბადე-სვეტი - ეს თვისება არის სტენოგრაფიული:
grid-column-start — მიუთითებს ბადის ელემენტის რომელი სვეტის ხაზი იწყება და რამდენ ტრეკზე ვრცელდება.
grid-column-end — მიუთითებს რომელ სვეტის ხაზებზე მთავრდება ბადის ელემენტი და რამდენ ტრეკზე ვრცელდება.
grid-row — ეს თვისება არის სტენოგრამა:
grid-row-start — მიუთითებს რომელი მწკრივის ხაზიდან იწყება ბადის ელემენტი და რამდენ ტრეკზე ვრცელდება.
grid-row-end - მიუთითებს რომელი მწკრივის ხაზი იქნება ბოლო ელემენტისთვის და რამდენ ტრეკზე გაიჭიმება იგი.
თქვენ ასევე შეგიძლიათ გამოიყენოთ grid-auto-flow თვისება, რომელიც აღნიშნული იყო წინა თავში. იგი განსაზღვრავს, თუ როგორ უნდა განთავსდეს ქსელში ავტომატურად განთავსებული ბადის ელემენტები. ავტომატურად განთავსებული ელემენტები არის ის ელემენტები, რომლებიც აშკარად არ არის განთავსებული ზემოთ მოცემული რომელიმე თვისების გამოყენებით.
შექმენით წყობილი ბადე
ქსელის ელემენტები თავად შეიძლება გახდეს ბადეები CSS Grid-ში. ანუ, თქვენ შეგიძლიათ მოათავსოთ ბადის ელემენტი სხვა ბადის ელემენტში, რითაც შექმენით წყობილი ბადე.
ასეთი ჩასმული ბადის შესაქმნელად, საკმარისია გამოვიყენოთ ეკრანი: ბადე (ან ეკრანი: inline-grid) ქსელის ელემენტზე და ის თავად ხდება ბადე. თქვენ ასევე შეგიძლიათ გამოიყენოთ ეკრანი: ქვექსელი ქვექსელის შესაქმნელად. როგორ ხდება.
მემკვიდრეობა
ბადის თვისებების უმეტესობა არ არის მემკვიდრეობით მიღებული, რაც იმას ნიშნავს, რომ თქვენი ჩადგმული ბადე არ მიიღებს მისი მშობელი ბადის მნიშვნელობებს. ეს საშუალებას გაძლევთ შეიტანოთ ცვლილებები მშობელთა ბადეში, ბავშვის ბადეზე უნებლიე ზემოქმედების გარეშე.
მაგალითად, თქვენ დააყენეთ grid-auto-flow: სვეტი მთავარ ბადეზე, მაგრამ თქვენ არ დააყენეთ თვისება ჩადგმულ ბადეზე. ამ შემთხვევაში, ჩადგმული ბადე დაყენდება მწკრივად, რადგან ეს არის ამ თვისების საწყისი მნიშვნელობა.
გაითვალისწინეთ, რომ მთავარ ბადეზე რიცხვები ვერტიკალურად მიდის სვეტების ქვემოთ, ვიდრე ჰორიზონტალურად მწკრივის გასწვრივ, მაგრამ წყობილი ბადე მაინც მიდის ჰორიზონტალურად მწკრივის გასწვრივ.
ქვექსელები
CSS Grid მოდული ადგენს ქვექსელის მნიშვნელობას ჩვენების თვისებისთვის. თუმცა, ყველა ბრაუზერი მას ჯერ არ უჭერს მხარს. ეს მნიშვნელობა საკმაოდ სასარგებლო უნდა იყოს.
Subgrid არის ჩადგმული ბადე, მაგრამ ჩვენებით: subgrid . ეს აქცევს მას სპეციალური ტიპის ბადის კონტეინერს, რომელიც მონაწილეობს ძირითადი ბადის კონტეინერის ბადის ზომის დადგენაში. სხვა სიტყვებით რომ ვთქვათ, ქვექსელის შინაარსი გავლენას ახდენს ძირითადი ბადის ზომაზე, რაც საშუალებას აძლევს კონტენტს გავრცელდეს ორ ბადეზე. ქვემოთ მოცემულია მაგალითი იმისა, თუ სად შეიძლება იყოს ეს ქონება სასარგებლო.
აქ არის ელემენტების სია:
და აქ არის CSS, სადაც სია არის ბადე, ხოლო სიის ელემენტები არის ქვებადეები.
Ul ( დისპლეი: ბადე; ბადე: ავტომატური ნაკადი / ავტომატური 1fr; ) li ( ჩვენება: ქვექსელი; ბადე-სვეტი: span 2; ზღვარი: 0.5em; საზღვარი: მყარი; padding: 0.5em; ) ლეიბლი (ბადის-სვეტი: 1; ) შეყვანა (ბადე-სვეტი: 2;)
ეს მაგალითი აჩვენებს ლეიბლს და შეყვანას ზედიზედ, სიის თითოეული ელემენტის გარშემო საზღვრით. სიის თითოეული ელემენტის ქვექსელის მინიჭება ნიშნავს, რომ არ უნდა იყოს პრობლემები შეყვანის ფორმების გასწორებასთან დაკავშირებით, რადგან სიის თითოეული ელემენტი მონაწილეობს მშობელი ბადის ზომის ფორმირებაში.
ავტომატური განთავსების ფორმები
თქვენ შეგიძლიათ გამოიყენოთ აშკარა ბადეები, როგორც უპირატესობა ფორმების ან ელემენტების სხვა კოლექციების შექმნისას, რომლებიც საჭიროებენ ბადის გასწორებას. მაგალითად, შეგიძლიათ გამოიყენოთ აშკარა ბადეები მსგავსი ფორმის შესაქმნელად:
და როდესაც თქვენ დაამატებთ ფორმის ელემენტებს თქვენს მარკირებაში, აშკარა ბადე დაამატებს რიგებს მათ დასაყენებლად. ასე რომ, ზემოთ ფორმის შესაქმნელად, ჩვენ გვჭირდება ეს მარკირება.
არ არის საჭირო დამატებითი მარკირება ყველაფრის სწორად მოწყობისთვის. და ასევე არ არის საჭირო დამატებითი კლასების დამატება ფორმის ელემენტებისთვის. ჩვენ ვამატებთ მხოლოდ ერთ კლასს
თქვენ შეგიძლიათ ავტომატურად დაამატოთ ფორმის ახალი ელემენტები და ისინი ავტომატურად მოერგებიან სხვებს, რადგან ისინი განთავსდება აშკარა ბადეში.
ეს შესაძლებელია, რადგან ჩვენ თავად ფორმა გავხადეთ ბადედ (ჩვენება: ბადე გამოიყენება .myForm-ზე). შემდეგ მათ მიუთითეს, რომ ეტიკეტები მიდის ერთ სვეტში, ხოლო კონტროლი მეორეში.
აი კიდევ ერთი მაგალითი, ამჯერად კიდევ უფრო მეტი ელემენტებით:
მას შემდეგ რაც ქვექსელები ფართოდ გავრცელდება ბრაუზერებს შორის, შესაძლებელი იქნება ფორმის ელემენტების გასწორება, რომლებიც არ არიან უშუალოდ შთამომავლები.