რატომ არის CSS Grid უკეთესი Bootstrap Framework-ზე? CSS 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 ბადეებზე. ჩვენ გადავხედავთ, რა არის ეს, რა განსხვავებაა FlexBox-თან და როგორ შეგიძლიათ იმუშაოთ CSS Grid-თან.
CSS ბადეები არის ახალი მიდგომა საპასუხო ვებსაიტების შესაქმნელად მრავალი ბლოკით, რომელიც მდებარეობს საიტის ნებისმიერ ადგილას. გარდა ამისა CSS ბადეასევე არსებობს ტექნოლოგია, რომელიც ძალიან ჰგავს ბადეებს. ჩვენ არ შევეხებით მათ შორის უმცირეს განსხვავებებს, რადგან ამას ცალკე სტატია დასჭირდება, მაგრამ მოკლედ აღვწერთ მთავარ განსხვავებებს.
CSS ბადეშეიძლება ეწოდოს უფრო მაგარი და გაუმჯობესებული ვერსია FlexBox, რადგან FlexBox საშუალებას გაძლევთ იმუშაოთ მხოლოდ ერთ სიბრტყეში: ან შექმენით სვეტები ან შექმენით რიგები.
CSS ბადეები საშუალებას გაძლევთ გააკეთოთ მეტი, რადგან ისინი მუშაობენ ორივე თვითმფრინავზე ერთდროულად. ამრიგად, ვებსაიტების ადაპტირებადი ბლოკების შექმნა ბევრად უფრო ადვილია, ხოლო ობიექტების მოწყობის შესაძლებლობები, როგორც გსურთ, უბრალოდ გაუთავებელია.
გეპატიჟებით უყუროთ სრულ ვიდეოს CSS ბადეების სწავლის შესახებ, რათა მყისიერად გაიგოთ არსი CSS ბადე:
- გაკვეთილი თემაზე;
გაკვეთილის განმავლობაში შეიქმნა სამი გვერდი, თითოეული გვერდის კოდი შეგიძლიათ დააკოპიროთ ქვემოთ.
პირველი ფაილი
მეორე ფაილი
მესამე ფაილი
ოპერაციული პრინციპი
ბადეებთან მუშაობა ძალიან მარტივია. აქ მოქმედებების ალგორითმი შემდეგია:
- ჩვენ ვქმნით ერთ მთავარ ბლოკს და ვათავსებთ მასში სხვა ბლოკებს ( სექციები);
- დაამატეთ ეკრანი: ქსელის თვისება მთავარ ბლოკში;
- CSS ქსელის თვისებები ახლა შეიძლება გამოყენებულ იქნას ბლოკის ყველა ძირითად ელემენტზე;
- სხვადასხვა თვისებების დამატება. თქვენ შეგიძლიათ იპოვოთ დოკუმენტაცია ყველა შესაძლო საკუთრებაზე;
თითოეული ბლოკის დაყენება შესაძლებელია სიგანეზე, სიმაღლეზე და ადგილმდებარეობის მიხედვით. ბლოკებს, რომლებიც იქმნება ბადეების საფუძველზე, დაუყოვნებლივ აქვთ ადაპტური დიზაინი, რომელიც არეგულირებს ბლოკებს ეკრანის სხვადასხვა რეზოლუციებზე.
ამ გზით შეგიძლიათ დაწეროთ ნაკლები და მიიღოთ მეტი. კიდევ რა შეიძლება იყოს უფრო მაგარი? გაუზიარეთ თქვენი გამოცდილება ბადეების გამოყენებასთან დაკავშირებით თქვენს პროექტებში ამ სტატიის კომენტარებში ⇣
დენი მარკოვი
დიზაინი საკმაოდ მარტივია - შედგება ცენტრში გასწორებული კონტეინერისაგან, რომლის შიგნით გვაქვს სათაური, ძირითადი განყოფილება, გვერდითი ზოლი და ქვედა კოლონტიტული. აქ არის ძირითადი „ტესტები“, რომლებიც უნდა ჩავატაროთ CSS და HTML რაც შეიძლება სუფთად შევინარჩუნოთ:
- მოათავსეთ განლაგების ოთხი ძირითადი განყოფილება.
- გახადეთ გვერდი რეაგირებადი (გვერდითი ზოლი იშლება ძირითადი შინაარსის ქვემოთ მცირე ეკრანებზე).
- სათაურის შინაარსის გასწორება - მარცხენა ნავიგაცია, მარჯვენა ღილაკი.
როგორც ხედავთ, შედარებისთვის, ჩვენ ყველაფერი მაქსიმალურად მარტივად შევინარჩუნეთ. დავიწყოთ პირველი ტესტით.
ტესტი 1: გვერდის სექციების განლაგება
Flexbox ხსნარი
ეკრანის დამატება: მოხარეთ კონტეინერზე და დააყენეთ ბავშვის ელემენტების ვერტიკალური მიმართულება. ეს ათავსებს ყველა მონაკვეთს ერთმანეთის ქვეშ.
კონტეინერი (ჩვენება: flex; flex-მიმართულება: სვეტი;)
ახლა ჩვენ უნდა დავრწმუნდეთ, რომ მთავარი განყოფილება და გვერდითი ზოლი ერთმანეთის გვერდით მდებარეობს. ვინაიდან მოქნილი კონტეინერები ჩვეულებრივ ცალმხრივია, საჭიროა დამატებითი ელემენტის დამატება.
ჩვენ შემდეგ დავაყენეთ ამ ელემენტის ჩვენება: flex და flex-direction საპირისპირო მიმართულებით.
მთავარი და გვერდითი ზოლის შეფუთვა (ჩვენება: მოქნილი; მოქნილი მიმართულება: მწკრივი; )
ბოლო ნაბიჯი არის ძირითადი განყოფილებისა და გვერდითი ზოლის ზომების დაყენება. ჩვენ გვინდა, რომ ძირითადი შინაარსი სამჯერ აღემატებოდეს გვერდითი ზოლის სიგანეს, რისი გაკეთებაც ადვილია მოქნილობის ან პროცენტების გამოყენებით.
როგორც ხედავთ, Flexbox-მა ყველაფერი კარგად გააკეთა, მაგრამ ჩვენ ასევე გვჭირდებოდა საკმაოდ ბევრი CSS თვისება და დამატებით HTML ელემენტი. ვნახოთ, როგორ იმუშავებს CSS Grid.
CSS Grid Solution
CSS Grid-ის გამოყენების რამდენიმე ვარიანტი არსებობს, მაგრამ ჩვენ გამოვიყენებთ grid-template-areas სინტაქსს, როგორც ყველაზე შესაფერისი ჩვენი მიზნებისთვის.
პირველ რიგში, ჩვენ განვსაზღვრავთ ოთხ ბადის ზონას, თითო გვერდის თითოეული განყოფილებისთვის:
ახლა ჩვენ შეგვიძლია დავაყენოთ ჩვენი ბადე და განვსაზღვროთ თითოეული ტერიტორიის მდებარეობა. კოდი შეიძლება ერთი შეხედვით საკმაოდ რთული ჩანდეს, მაგრამ როგორც კი გაეცნობით ქსელის სისტემას, უფრო ადვილი გასაგები ხდება.
კონტეინერი ( ჩვენება: ბადე; /* განვსაზღვროთ ჩვენი ბადის სვეტების ზომა და რაოდენობა. fr ერთეული მუშაობს Flexbox-ის მსგავსად: სვეტები ყოფენ მწკრივში არსებულ სივრცეს მათი მნიშვნელობების მიხედვით. გვექნება ორი სვეტი - პირველი არის სამჯერ აღემატება ბადეში -სვეტები: 3fr 1fr sidebar */ grid-template-areas: "header header" მთავარი sidebar" "footer footer"; /* ბადის უჯრედებს შორის მანძილი იქნება 60 პიქსელი */ grid-gap: 60px; )
ესე იგი! ჩვენი განლაგება ახლა მიჰყვება ზემოხსენებულ სტრუქტურას და ჩვენ დავაყენეთ ის ისე, რომ არ გვქონდეს საქმე ზღვრებთან ან ბალიშებთან.
ტესტი 2. გვერდის რეაგირება
Flexbox ხსნარი
ეს ნაბიჯი მკაცრად არის დაკავშირებული წინასთან. Flexbox-ის გადაწყვეტისთვის მოგვიწევს ფლექსის მიმართულების შეცვლა და ზღვრის კორექტირება.
@media (მაქსიმალური სიგანე: 600 პიქსელი) ( .main-and-sidebar-wrapper ( flex-direction: column; ) .main ( margin-right: 0; margin-bottom: 60px; ) )
ჩვენი გვერდი საკმაოდ მარტივია, ამიტომ მედიის მოთხოვნაში ბევრი სამუშაო არ არის, მაგრამ უფრო რთული განლაგება მოითხოვს ბევრ გადამუშავებას.
CSS Grid Solution
ვინაიდან ჩვენ უკვე განვსაზღვრეთ ბადის სფეროები, ჩვენ უბრალოდ უნდა განვსაზღვროთ მათი თანმიმდევრობა მედია მოთხოვნაში. ჩვენ შეგვიძლია გამოვიყენოთ იგივე დინამიკის დაყენება.
@media (მაქს-სიგანე: 600 პიქსელი) ( .კონტეინერი (/* ბადის არეების გასწორება მობილური განლაგებისთვის */ ბადის შაბლონის არეები: "სათაურის სათაური" "მთავარი მთავარი" "გვერდითი ზოლი" "ძირის ქვედა კოლონტიტული"; ) )
ან ჩვენ შეგვიძლია განვსაზღვროთ მთელი განლაგება ნულიდან, თუ ვფიქრობთ, რომ ეს გამოსავალი უფრო სუფთაა.
@media (მაქს-სიგანე: 600 პიქსელი) ( .კონტეინერი ( /* ბადის გადაქცევა ერთსვეტიან განლაგებად */ ბადის შაბლონი-სვეტები: 1fr; ბადის შაბლონის არეები: "სათაური" "მთავარი" "გვერდითი ზოლი" " ქვედა კოლონტიტული";))
ტესტი 3: სათაურის კომპონენტების გასწორება
Flexbox ხსნარი
ჩვენ უკვე გავაკეთეთ მსგავსი განლაგება Flexbox-თან ერთ-ერთ ძველ სტატიაში -. ტექნიკა საკმაოდ მარტივია:
ჰედერი (ჩვენება: მოქნილობა; დასაბუთება-შიგთავსი: სივრცე-შორის;)
ნავიგაციის სია და ღილაკი ახლა სწორად არის გასწორებული. რჩება მხოლოდ ნივთების შიგნით განთავსება
სათაურის ნავიგაცია (ჩვენება: მოქნილი; გასწორება-ერთეულები: საბაზისო; )
მხოლოდ ორი ხაზი! სულაც არ არის ცუდი. ვნახოთ, როგორ უმკლავდება ამას CSS Grid.
CSS Grid Solution
ნავიგაციისა და ღილაკის გამოსაყოფად სათაურს უნდა დავამატოთ ჩვენება: ბადე და დავაყენოთ ორსვეტიანი ბადე. ჩვენ ასევე დაგვჭირდება CSS-ის ორი დამატებითი ხაზი, რათა განვათავსოთ ყველაფერი შესაბამის საზღვრებზე.
Header( ჩვენება: ბადე; ბადე-თარგი-სვეტები: 1fr 1fr; ) header nav (გამართლება-თვითონ: დაწყება;) სათაურის ღილაკი (დასაბუთება-თარგი-სვეტები;)
რაც შეეხება ნავიგაციაში ერთი ხაზის ბმულებს, ჩვენ ვერ შევძელით ამის გაკეთება სწორად CSS Grid-ით. აი, როგორ გამოიყურება ჩვენი საუკეთესო მცდელობა:
სათაურის ნავიგაცია ( ჩვენება: ბადე; ბადე-თარგი-სვეტები: ავტომატური 1fr 1fr; ერთეულების გასწორება: დასასრული; )
გასაგებია, რომ CSS Grid-მა კარგად ვერ გაართვა თავი განლაგების ამ ნაწილს, მაგრამ ეს გასაკვირი არ არის – აქცენტი კონტეინერების გასწორებაზეა და არა მათ შიგნით არსებულ შინაარსზე. ეს სისტემა არ არის დასასრული.
დასკვნები
თუ წაიკითხავთ მთელ სტატიას (და ეს შესანიშნავი სამუშაოა!), დასკვნები არ უნდა გაგიკვირდეთ. უკეთესი სისტემა ნამდვილად არ არსებობს - ორივე Flexbox და CSS Grid კარგია საკუთარი გზებით და უნდა იქნას გამოყენებული ერთად და არა როგორც ერთმანეთის ალტერნატივა.
მათთვის, ვინც პირდაპირ გადახვედით ამ სტატიის დასკვნებზე (ნუ ინერვიულებთ, ჩვენც ამას ვაკეთებთ), აქ არის შედარების სწრაფი შეჯამება:
- CSS Grid შესანიშნავია დიდი სურათის შესაქმნელად. ეს სისტემა აადვილებს გვერდის განლაგების მართვას და შეუძლია გაუმკლავდეს არარეგულარულ და ასიმეტრიულ დიზაინებს.
- Flexbox შესანიშნავია ელემენტების შინაარსის გასწორებისთვის. გამოიყენეთ ეს სისტემა მცირე დიზაინის დეტალების დასაყენებლად.
- გამოიყენეთ CSS Grid 2D განლაგებისთვის (სტრიქონები და სვეტები).
- Flexbox უკეთ მუშაობს მხოლოდ ერთ განზომილებაში (სტრიქონები ან სვეტები).
- არ არსებობს მიზეზი, რომ გამოიყენოთ მხოლოდ CSS Grid ან მხოლოდ Flexbox. შეისწავლეთ ისინი და გამოიყენეთ ისინი ერთად.
დაახლოებით 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-ის გამოყენება, აქ მოცემულია რამდენიმე პრობლემა, რომელიც შეიძლება შეგხვდეთ წინა გადაწყვეტილებებთან დაკავშირებით:
- აბსოლუტური პოზიციონირებით, ელემენტებს შეუძლიათ ერთმანეთის გადახურვა;
- ჩვენების გამოყენებით: ცხრილი ტოვებს უამრავ არასაჭირო მარკირებას;
- ინლაინ-ბლოკის გამოყენებისას იქნება პრობლემები ცარიელი ადგილების გამო.
ავტორისგან:სტატია CSS Grid განლაგების სერიიდან. წინა გაკვეთილებზე ვისწავლეთ ბადის სინტაქსი, ვისწავლეთ ელემენტების გვერდზე მოწყობის რამდენიმე გზა და დავემშვიდობეთ ძველ ჩვევებს. ამ გაკვეთილზე ჩვენ მთელ ჩვენს ცოდნას პრაქტიკაში გამოვიყენებთ, რათა შევქმნათ საპასუხო განლაგება.
მედიის შეკითხვები
ავიღოთ წინა გაკვეთილის დემო ვერსია.
გვერდი შედგება ორი ბადისგან: მთავარი და ერთი ელემენტის შიგნით ჩასმული. ჩვენ შეგვიძლია გავაკონტროლოთ ჩვენი ბადეები მედია მოთხოვნების გამოყენებით. ეს ნიშნავს, რომ ჩვენ შეგვიძლია მთლიანად აღვადგინოთ განლაგება, რათა მოერგოს სხვადასხვა ეკრანის სიგანეს.
ჩვენ დავიწყებთ პირველი ბადის დეკლარაციის კოპირებით. მოდით გადავახვიოთ დუბლიკატი მედია მოთხოვნაში მობილური-პირველი ტექნიკის გამოყენებით. მე თვითნებურად ავიღე 500 პიქსელი, როგორც გარდამავალი წერტილი.
Grid-1 ( /* ბადის სტილები */ ) @media მხოლოდ ეკრანი და (წთ. სიგანე: 500 პიქსელი) ( .grid-1 ( /* ბადის სტილები */ ) )
ახლა ჩვენ შევცვლით ჩვენს ქსელს პირველ რეკლამაში, რათა ყველაფერი ერთ სვეტში მოვათავსოთ. ჩვენ ვაყენებთ ერთ სვეტს grid-template-columns თვისების გამოყენებით. შეამოწმეთ, რომ ჩვენი ოთხი მწკრივი დაყენებულია grid-template-rows თვისების გამოყენებით და ემთხვევა განლაგებას grid-template-areas თვისების გამოყენებით:
ბადე-1 ( დისპლეი: ბადე; სიგანე: 100%; ზღვარი: 0 ავტომატური; ბადე-თარგი-სვეტები: 1fr; ბადე-თარგი-სტრიქონები: 80 პიქსელი ავტომატური ავტო 80 პიქსელი; ბადის უფსკრული: 10 პიქსელი; ბადის შაბლონის არეები: " header" "მთავარი" "გვერდითი ზოლი" "footer";)
ბადე - 1 ( ჩვენება: ბადე; სიგანე: 100%; ზღვარი: 0 ავტო; ბადე-თარგი-სვეტები: 1fr; ბადე - შაბლონი - რიგები : 80 პიქსელი ავტომატური 80 პიქსელი ; ბადე-უფსკრული: 10px; ბადე - შაბლონი - სფეროები: "header" "მთავარი" "გვერდითი ზოლი" "ფუტერი"; |
მცირე ეკრანებზე მოსაწყობად, ჩვენ დავაყენეთ ქსელის უფსკრული ნაგულისხმევად 10 პიქსელზე. ეს არის ის, რაც მივიღეთ. თქვენ ასევე უნდა შეამჩნიოთ, რომ ჩვენ ვცვლით .grid-1 div ელემენტების padding და შრიფტის ზომის თვისებებს მედია მოთხოვნების გამოყენებით.
ჩვენი წყობილი ბადე
ზემოთ მოყვანილი კოდი ცვლის ჩვენს მთავარ განლაგებას. თუმცა, ჩვენ ჯერ კიდევ გვაქვს წყობილი ბადე, რომელიც ჯიუტად უარს ამბობს რომელიმე ეკრანზე თავისი ორი სვეტის მოშორებაზე. ამის გამოსასწორებლად ჩვენ ზუსტად იგივეს გავაკეთებთ, მაგრამ ავიღებთ სხვა გადასვლის წერტილს შინაარსის პირველი მეთოდის გამოყენებით:
Item-2 ( /* ბადის სტილები */ ) @media მხოლოდ ეკრანი და (წთ. სიგანე: 600 პიქსელი) ( .item-2 ( /* ბადის სტილები */ ) )
თუ ჩვენ ხელახლა გავაკეთებთ დემო ვერსიას ავტომატური შევსებით და შევცვლით სვეტის სიგანეს minmax-ზე (9em, 1fr), ბადე შეეცდება მოათავსოს რაც შეიძლება მეტი 9 ემ სიგანის ბილიკი და შემდეგ გააფართოვოს ისინი 1fr-მდე, სანამ მთელი კონტეინერი არ გაივსება:
მინუსი: ბადე გადაითვლის ტრეკებს მხოლოდ გადატვირთვის შემდეგ და არა მაშინ, როცა ფანჯრის სიგანე იცვლება. სცადეთ თქვენი ბრაუზერის ფანჯრის შევიწროება და გვერდის განახლება. მნიშვნელობების შესაცვლელად, შეგიძლიათ დააკავშიროთ მედია მოთხოვნები, მაგრამ ისინი კარგად არ მუშაობენ ბრაუზერის ფანჯრის სიგანის შეცვლით.
დასკვნა
მოდით შევაჯამოთ ყოველივე ზემოთ ჩამოთვლილი სიაში:
მედია მოთხოვნები საშუალებას გვაძლევს მთლიანად აღვადგინოთ ბადე, სხვადასხვა სცენარისთვის grid-template-areas თვისებების (და სხვა) შეცვლით.
გარდამავალი თვისება არ მოქმედებს ბადის განლაგებაზე.
ავტომატური შევსების საკვანძო სიტყვა კარგად მუშაობს ბადის კონტეინერის შესავსებად.
minmax() ფუნქცია შესანიშნავი დამატებაა ავტომატური შევსებისთვის, მაგრამ ის არ გვაძლევს რეალურ ადაპტირებას.
ახლა თქვენ მზად ხართ ბადეებთან მუშაობისთვის! თვალყური ადევნეთ CSS Grid-ის მეტ სტატიებს, პრაქტიკულ სავარჯიშოებსა და ქსელის საერთო პრობლემების გადაწყვეტილებებს.