Sinasabi namin sa iyo kung paano CSS Grid nagbibigay-daan sa iyo na lumikha ng mataas na kalidad na tumutugon na markup nang hindi gumagamit ng mga third-party na frameworks tulad ng Bootstrap.
Nag-aalok ang native grid ng maraming pakinabang sa mga framework, lalo na kung ihahambing sa pinakasikat sa lahat: Bootstrap. Salamat sa katotohanan na modernong CSS nagbibigay-daan sa iyo na lumikha ng kumplikadong markup nang hindi nangangailangan ng JavaScript, ang code ay mas malinis at mas madaling mapanatili.
Maaaring mas simple ang markup
Ang pagpapalit ng Bootstrap ng CSS Grid ay gagawin Mas malinis ang HTML. Bilang halimbawa, isaalang-alang ang isang maliit na piraso ng page na kailangan nating i-layout, ganito ang hitsura:
Bootstrap
Una, tingnan natin ang halimbawang code para sa pahinang ito sa Bootstrap.
Mayroong ilang mga bagay na dapat bigyang pansin:
— Ang bawat hilera ay dapat na matatagpuan sa sarili nitong div.
- Dapat kang gumamit ng mga pangalan ng klase upang lumikha ng markup (col-xs-2).
— Habang lumalaki at nagiging mas kumplikado ang template, ganoon din ang mangyayari sa HTML code.
Kung pag-uusapan natin ang tungkol sa pagtugon, ang markup ay magiging mas masahol pa:
CSS Grid
Ngayon tingnan natin ang parehong halimbawa ng markup sa purong CSS:
Ang markup na ito ay mas madaling basahin. Ang kalat ng mga klase ay nawala at ang bilang ng mga div ay nabawasan.
Siyempre, hindi tulad ng halimbawa na may Bootstrap na konektado sa pahina, dito kailangan mong ilarawan ang mga estilo sa iyong sarili:
Higit na kakayahang umangkop
Pagsikapan natin ang kakayahang umangkop. Halimbawa, tanggalin natin ang MENU mula sa itaas na hilera Para sa mga mobile screen. Sa madaling salita, baguhin natin ito:
CSS Grid
Ang muling pagtatayo ng CSS grid ay napakadali. Ang kailangan mo lang gawin ay magdagdag lang ng media query at ilarawan kung ano ang dapat mangyari sa mga elemento ng page.
Sa ganitong paraan, hindi mo na kailangang buksan ang HTML upang muling idisenyo ang pahina.
Bootstrap
Kung kailangan ng isang developer na baguhin ang isang bagay sa isang Bootstrap na template, kailangan niyang magsimula sa pamamagitan ng pagpapalit ng HTML mismo. Sa katunayan, kailangan mong ilipat ang MENU upang ito ay nasa itaas ng HEADER.
Sa kasong ito, ang pagpapalit lang ng gawi ng mga istilo sa query ng media ay hindi gagana. Upang malutas ito, kailangan mong gumamit ng JavaScript.
Wala nang 12 column na limitasyon
Hindi sa ito ay isang seryosong limitasyon, ngunit sa ilang mga kaso nagdudulot ito ng abala. Since Bootstrap grid ay karaniwang nahahati sa 12 column, maaaring lumitaw ang mga problema sa paghahati, halimbawa, sa 5, 7 o 9 na column.
Binibigyang-daan ka ng CSS Grid na lumikha ng maraming column sa isang row hangga't kailangan mo.
Ginagawa ito sa pamamagitan ng pagtatakda ng halaga ng pag-aari ng grid-template-columns:
Sa pamamagitan ng paraan, ito ay gumagamit ng flexbox, na nagbibigay-daan din sa iyo upang madaling pamahalaan ang markup sa pamamagitan ng CSS, ngunit sa sa ngayon Hindi pa ito lumalabas sa beta.
Suporta sa browser
Sa pagsulat na ito, 75% porsyento ng mga browser ang sumusuporta sa CSS Grid.
Walang makakapigil sa maraming developer na magsimulang gumamit ng CSS Grid sa ngayon, ngunit, sa kasamaang-palad, hindi lahat ng proyekto ay handang gumana sa pamamaraang ito ng layout. Gayunpaman, maraming mga kilalang developer, tulad ng Morten Rand-Eriksen mula sa LinkedIn at Jen Simmons mula sa Mozilla, ay kumbinsido na ang diskarteng ito sa paglikha ng mga pahina ay ang hinaharap: visual na representasyon dapat na ihiwalay sa lohika ng JavaScript at umangkop nang hiwalay dito.
Hi sa lahat! Ngayon ay pag-uusapan natin ano ang mga grid system? o kaya lang flexible grids sa adaptive layout.
Una, tukuyin natin kung ano ito Sistema ng Grid.
Sistema ng Grid- isang koleksyon ng mga istilong nakabatay sa klase na nagpapahintulot sa user na kontrolin ang layout ng page gamit ang isang sistema ng mga row at column.
Isipin natin na mayroon tayong blog page. Nahahati ito sa 2 column: ang pangunahing bahagi sa kaliwa, at ang sidebar sa kanan. Subukan nating gumawa ng flexible grid para sa naturang page.
Buweno, kailangan muna nating gumawa ng isang pangunahing bagay, ngunit... html mga marka
Narito mayroon kaming isang bloke na naglalaman ng buong pahina, naglalaman ito ng isang bloke na may isang blog, na naglalaman ng 2 mga bloke: ang pangunahing bahagi ng pahina at ang sidebar.
Kaya ang aming buong pahina ay magiging laki 960px. Ang buong grid ay nahahati sa 12 column 69px. bawat isa. Malapad ang bahagi ng blog 900px. Ang pangunahing bahagi ng pahina ay magiging 566px, sidebar - 331px.
Ito ang makukuha natin sa huli
#pahina (
margin: 36px auto;
lapad: 960px;
}
Blog (
margin: 0 auto 53px;
lapad: 900px;
}
Blog.main (
lumutang: kaliwa;
lapad: 566px;
}
Blog .sidebar (
lumutang: kanan;
lapad: 331px;
}
Magiging maayos ang lahat, ngunit, tulad ng nakikita mo, ang lahat ng ito ay static, na tinukoy sa mga pixel. Gusto naming baguhin ng aming grid ang laki nito depende sa kung saang screen tinitingnan ang page, samakatuwid, kailangan naming itakda ang lahat porsyento. Gawin natin ito.
Para dito mayroong parehong formula tulad ng para sa mga font
layunin / konteksto = resulta
I-convert natin ang isang bloke ng buong page mula sa mga pixel patungo sa mga porsyento.
#pahina (
margin: 36px auto;
lapad: 90%;
}
90% pinili dahil sa kasong ito magkakaroon din tayo ng mga indent sa mga gilid kasama 5% . Gayunpaman, maaari kang pumili ng ibang halaga.
Ginagamit namin ang aming formula: 900 / 960 = 0.9357
I-multiply natin ang resulta sa 100 upang makatanggap ng interes, at irerehistro namin ito sa aming css.
Blog (
margin: 0 auto 53px;
lapad: 93.75%;
}
Ang parehong bagay ay kailangang gawin sa mga hanay, ngunit mapansin na ang konteksto ay nagbago. kasi ang mga column ay nasa loob ng isang bloke na may klase .blog, pagkatapos ito ang magiging konteksto. Gawin natin ang matematika.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
Kino-convert namin ang lahat sa mga porsyento at isulat ito sa style sheet.
Blog.main (
lumutang: kaliwa;
lapad: 62.8888889%;
}
Blog .sidebar (
lumutang: kanan;
lapad: 36.7777778%;
}
yun lang! Ngayon ay mayroon na kaming nababaluktot na grid at magagamit namin ito para sa layout.
Tulad ng nakikita mo, ang lahat ay napaka-simple. Ang batayan ng isang flexible grid, tulad ng isang flexible font, ay ang parehong formula, na naaalala kung alin, madali kang makakagawa ng mga tumutugon na website.
Tandaan! Tulad ng nakikita mo, naging maganda kami mahabang halaga porsyento. Maaaring payuhan ka ng ilan na bilugan sila, ngunit hindi mo dapat gawin ito! Tandaan!
At iyon lang para sa akin, salamat sa iyong pansin at matagumpay na adaptive layout!
Ipinapakita ng artikulong ito kung paano ito paghahambing bagong teknolohiya, ito ay gumagana, at hindi lamang isang paglalarawan ng mga katangian na may mababaw na mga halimbawa.
Ang artikulo mismo ay isang tumutugon na augmented na pagsasalin ng CSS Grid Tutorial
Ang CSS Grid module ay binuo ng CSS Working Group upang magbigay ng pinakamahusay na paraan upang lumikha ng mga template sa CSS. Kasama ito sa Rekomendasyon ng Kandidato noong Pebrero 2017, at sinimulan itong suportahan ng mga pangunahing browser noong Marso 2017.
Ang CSS Grid ay malapit nang maging mahalagang bahagi ng toolkit ng anumang front-end na developer. At kung isa ka sa kanila, kakailanganin mong matutunan ang CSS Grid — na halos tiyak na isang hindi mapag-usapan na kasanayan para sa anumang posisyon sa pag-unlad sa harap.
Gamit ang malakas na functionality at intuitive na syntax na ito, walang alinlangan na babaguhin ng mga template ng grid ang paraan ng pagkakabuo ng web.
Panimula
Ang CSS Grid ay bagong modelo template, na-optimize para sa dalawang-dimensional na template. Ito ay isang perpektong modelo para sa mga template ng website, mga form, mga gallery at anumang bagay na nangangailangan ng tumpak at tumutugon na pagpoposisyon.
Sa pag-unlad ng web sa mga nakaraang taon, ang pagbuo ng mga template ng website ay lalong naging mahirap. Sa mga unang taon ng web, ang mga HTML na talahanayan ay kadalasang ginagamit para sa mga multi-column na template, form, atbp. Ngunit ang pamamaraang ito ay may mga kawalan nito. Nangangahulugan ito na ang pagtatanghal ay kailangang gawin sa antas ng markup, kaya walang pagkakaiba sa pagitan ng pagtatanghal at nilalaman. Sa katunayan, ang mga talahanayan ay nilikha upang maglaman ng data sa tabular, hindi upang lumikha ng mga template. At nang walang pagpindot sa mga isyu sa semantiko, ang mga template ng talahanayan ay hindi nilikha para sa tumutugon na disenyo.
Sa kalaunan ay pinalitan ng Floats ang mga template ng talahanayan bilang ang pangkalahatang tinatanggap at inirerekomendang paraan para sa paggawa ng mga template, dahil pinapayagan kaming iposisyon ang mga elemento nang hiwalay sa layout. Gayunpaman, habang ang pamamaraang ito ay itinuturing na isang makabuluhang pagpapabuti sa layout ng tabular, mayroon din itong mga limitasyon. Ang mga float ay pangunahing idinisenyo para sa mga template ng dokumento at hindi angkop para sa mga kumplikadong template ng application na karaniwan na ngayon sa web. Ang mga lumulutang na elemento ay mahirap kontrolin, lalo na sa mga device at viewport iba't ibang laki. Ito ay humantong sa iba't ibang mga hack na tulad ng grid na naging karaniwan, karamihan sa mga ito ay nangangailangan ng karagdagang markup na nakakabawas sa buong konsepto ng paghihiwalay ng nilalaman. Kaya't ang CSS Working Group ay naghahanap ng isang mas mahusay na solusyon.
Tinutugunan ng modelo ng CSS Grid ang mga isyung ito at higit pa. Pinapayagan ka nitong lumikha ng mga advanced na template sa isang maliit na bahagi ng oras na gugugulin mo sa mga ito gamit ang mga fleet at mas kaunting coding.
Pero syempre magagamit ng isa iba't ibang kahulugan, gaya ng 100px , 7em , 30% at iba pa. Maaari ka ring magtalaga ng mga pangalan sa mga string kasama ng kanilang mga laki.
grid-template-column: 1fr 1fr 1fr
Pareho sa itaas, tumutukoy lamang sa mga column sa mga grid.
Naglalantad ng puwang. Iyon ay, mga puwang sa pagitan ng mga elemento ng grid. Dito ay gumagamit kami ng vw unit ng haba, na nauugnay sa lapad ng viewport, ngunit maaari rin kaming gumamit ng 10px, 1em, atbp. Ang grid-gap property ay shorthand para sa grid-row-gap at grid-column-gap ari-arian.
Well, ang ibang bahagi ng code ay itinatalaga lamang iba't ibang istilo mga elemento ng grid.
#grid >
repeat() function
Maaari mong gamitin ang function na repeat() upang gumawa ng mga paulit-ulit na deklarasyon ng halaga ng laki ng elemento. Halimbawa, sa halip na gawin ito:
Grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
Magagawa natin ito:
Grid-template-rows: repeat(5, 1fr);
Na makabuluhang bawasan ang dami ng code na kailangan mong isulat, lalo na kung nagtatrabaho ka sa malaki at paulit-ulit na grids.
Paglikha ng Template ng Website gamit ang CSS Grid
Kasama sa mga grid ang isang intuitive na "ASCII graphics" na syntax kung saan maaari mong halos "makita" ang template sa code, na ginagawang napakadaling gawin at baguhin ang iyong template. Kahit na ang mga makabuluhang pagbabago ay maaaring gawin sa loob ng ilang segundo. Nakakatulong din ang intuitive syntax na ito tumutugon sa disenyo ng web. Paglikha iba't ibang mga template Para sa iba't ibang mga aparato nagiging isang piraso ng cake kapag gumagamit ng mga grids.
Gumawa tayo ngayon ng template ng website na ganito ang hitsura:
At narito ang code para sa template na ito:
Tingnan natin ang aming code. Ang HTML markup ay ganito ang hitsura:
At gayon ang gagawin natin
grid container, kaya lahat ng iba pang elemento ay nagiging grid elements.Ngayon tingnan natin ang ASCII graphics na pinag-usapan natin noon.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
Tinutukoy ng bahaging ito ang aming template. Sa pagtingin pa lamang sa code, makikita natin na ito ay isang 3x3 grid (tatlong hilera at tatlong hanay). Nagbibigay ito sa amin ng limang grid area sa siyam na grid cell, dahil ang ilang grid area ay sumasaklaw sa maraming cell.
Nakikita rin namin na ang header ay sumasakop sa buong unang hilera ng tatlong mga cell, at ang footer ay sumasakop sa buong ilalim na hilera, na kumukuha din ng tatlong mga cell. Ang mga seksyon ng nabigasyon, nilalaman at advertising ay nagbabahagi lahat ng espasyo sa pangalawang row, kung saan ang bawat isa sa mga elementong ito ay nakakakuha ng isang cell.
Ngayon ay maaari na nating italaga ang bawat isa sa mga grid area na ito sa bawat elemento:
#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )
Ang grid-area property ay isang shorthand property na nagbibigay-daan sa iyong maglagay ng mga elemento ng grid sa isang grid. Sa aming kaso, tinutukoy lang namin ang mga pangalan na dati naming tinukoy sa grid-template-area.
Karamihan sa template ay nakumpleto na. Ang natitirang bahagi ng code ay haharap lamang sa mga sukat, espasyo at taas, sa pangkalahatan ay higit pa sa isang pandekorasyon na lugar.
Ang sumusunod na code ay nagbibigay ng mga laki ng mga row at column:
Grid-template-rows: 60px 1fr 60px;
grid-template-column: 20% 1fr 15%;
Ang una at ikatlong linya ay parehong 60px ang taas, at ang pangalawang linya ay tumatagal ng lahat ng natitirang espasyo.
Ang unang column ay 20% at ang pangatlo ay 15%. Ang pangalawa ay tumatagal ng lahat ng natitirang espasyo.
Pagbabago ng template
Maaari mong baguhin ang template sa pamamagitan lamang ng muling pagsasaayos ng mga grid area sa grid-template-area .
Kaya kung babaguhin natin ito:
Grid-template-area: “nav header header” “nav article ads” “nav footer ads”;
Bilang resulta, nakukuha namin ang sumusunod na template:
Gayunpaman, maaaring kailanganin mong ayusin ang mga sukat kung ililipat mo ang isang mas maliit na grid sa isang mas malaking lokasyon.
Halimbawa, upang gawin ito:
Grid-template-areas: “header header header” “article nav ads” /* Bago ito ay may “nav article ads” */ “footer footer footer”;
grid-template-rows: 60px 1fr 60px;
grid-template-column: 1fr 20% 15%; /* Bago ito ay ‘20% 1fr 15%’ */
Paglikha ng adaptive Grid
Ang grid template ay may mga value gaya ng auto-fill at auto-fit na nagbibigay-daan sa iyong gumawa ng grid na may maraming track ng isang partikular na laki na magkakasya sa isang lalagyan. Maaaring mangahulugan ito na tumutugon ang grid, ibig sabihin, nagbabago ang posisyon ng mga elemento habang binabago mo ang window ng browser.
Halimbawa ng paggamit ng Auto-fill:
Narito ang resulta:
Ang code na responsable para dito:
Grid-template-columns: ulitin(auto-fill, minmax(150px, 1fr));
Sa loob nito, binibigyan ang mga column ng minimum na laki na 150px at maximum ng natitirang espasyo. Ang mga naturang track ay uulitin nang maraming beses hangga't kinakailangan upang magkasya sa lalagyan.
Inuulit ng function na Repeat() ang kahulugan ng track sa dami ng beses na tinukoy ng unang parameter. Ang paggamit ng auto-fill ay magiging sanhi ng pag-ulit ng mga track nang maraming beses hangga't maaari hanggang sa mapuno ng mga ito ang lalagyan.
Ang laki ng mga track na ito ay tinukoy sa pangalawang parameter. Sa aming kaso, ginagamit namin ang minmax(150px, 1fr) upang isaad na ang minimum na laki ng column ay 150px at ang maximum ay 1fr.
Auto-fit
gumagana ang auto-fit na halos kapareho ng auto-fill. Ang pagkakaiba lang dito ay ang auto-fit ay pinagsasama-sama ang lahat ng walang laman na track sa dulo ng placement, habang ang auto-fill ay hindi. Ang pinakamahusay na paraan dito ay isang pagpapakita na may paghahambing.
Ang paggamit ng dalawang maliit na elemento ng grid dito ay makakatulong na ipakita ang buong konsepto ng trabaho. Ang auto-fill ay nag-iiwan ng mga walang laman na track sa dulo sa mga tinukoy na dimensyon, at ang auto-fit ay umaabot sa walang laman na track, na nagreresulta sa mga track na mapupuno ng mga nakaunat na elemento upang punan ang espasyo.
Mga grid na may mga query sa media
Ang isa sa mga lakas ng grids ay na maaari kang lumikha ng isang ganap na naiibang template sa ilang segundo.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
Ginagawa nitong perpekto ang mga grid para sa mga query sa media. Maaari lang nating italaga ang mga halaga sa ASCII graphics at ibalot ang resulta sa isang query sa media.
Ito ay isang template ng tatlong column sa isang malaking viewport at nag-compress ito sa isang column sa maliliit na device. Kaya ang halimbawang ito ay magmumukhang iba depende sa laki ng screen. Sa anumang kaso, narito ang nauugnay na code para sa template na may tatlong hanay para sa malalawak na viewport.
Kaya ang buong punto ay muling italaga ang mga halaga sa pag-aari ng grid-template-area.
Sa aming kaso, binalot namin ang mobile na bersyon sa isang media query, tulad nito:
@media lahat at (max-width: 575px) ( body ( grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- template-column: 1fr;
Pakitandaan na inayos din namin ang mga halaga sa grid-template-rows at grid-template-column upang tumugma sa bagong template. Sa partikular, dapat ay mayroon lamang isang column at dapat itong kunin ang lahat ng libreng espasyo. At dahil ang lahat ng mga elemento ng grid ay nasa isang bunton, magtatalaga kami ng 5 mga hilera at tutukuyin ang kanilang mga taas.
Pinagsasama ang grid na may block
Depende sa mga kinakailangan ng iyong template, walang pumipigil sa iyo na baguhin ang mobile na bersyon upang ipakita: i-block . Tulad dito:
@media lahat at (max-width: 575px) ( body ( display: block; ) )
Ito ay gagana katulad ng sa halimbawa sa itaas, ngunit bilang default, ang mga elemento ay lilitaw sa kanilang orihinal na pagkakasunud-sunod. Sa halimbawa sa itaas, ang mobile na bersyon ay may nav sa ibaba ng mga ad, ngunit kung ginamit namin ang display: block, ang nav ay nasa itaas ng mga ad.
Gamit din ang paraang ito, maaaring kailanganin mo ring magdagdag ng ilang padding upang mabayaran ang kakulangan ng mga puwang na kasama sa bersyon ng grid.
Tiyak at Implicit na mga Grid
Ginagamit ng CSS Grid ang konsepto ng tahasang grid at implicit grid. Ito ay isang pangunahing konsepto na kailangan mong maging maingat sa paggawa ng mga grids, kung hindi, mapupunta ka sa isang grupo ng mga row at column na hindi mo inaasahan na naroroon.
Ang tahasang grid ay isang grid na iyong tinukoy sa grid-template-rows, grid-template-colums, at grid-template-area.
Gayunpaman, maaaring mayroon ka pa ring mga elemento na hindi akma sa iyong "hayagang" tinukoy na grid. Halimbawa, tinukoy mo ang isang grid na maaari lamang maglaman ng anim na elemento, ngunit ang lalagyan mismo ay talagang binubuo ng siyam na elemento. Anim na elemento lang ang magkakasya sa tahasang grid at tatlo ang mananatili. At doon pumapasok ang mga implicit na grid.
Ang mga implicit na grid ay awtomatikong nabubuo ng grid container sa tuwing ang mga elemento ng grid ay matatagpuan sa labas ng tahasang grid. Bumubuo ang container ng mga implicit na grid track sa pamamagitan ng pagdaragdag ng mga implicit na row sa grid. Ang mga linyang ito, kasama ng mga tahasang grid, ay bumubuo ng mga implicit. Narito ang isang halimbawa:
Sa halimbawang ito, tahasan naming tinukoy ang dalawang row at dalawang column, na magtataglay ng apat na elemento ng grid. Gayunpaman, mayroong anim na elemento ng grid, kaya isang implicit na grid ang ginawa upang ma-accommodate ang dalawang karagdagang elemento.
At ito ay napakahusay kung ang implicit na grid ay hindi nagawa, pagkatapos ay dalawa karagdagang elemento lilikha ng kumpletong gulo sa grid.
Pagtatakda ng laki ng track para sa mga implicit na grid
Maaaring napansin mo na ang sobrang row ay hindi kasing taas ng naunang dalawa. Ito ay dahil itinakda namin ang taas ng row sa property ng grid-template-rows, ngunit nalalapat lang ito sa mga tahasang grid. Ang taas ng row sa mga implicit na grid ay dapat itakda gamit ang grid-auto-rows property. Ngunit dahil hindi namin ginawa ito, lumalabas na ginagamit ng implicit na row ang laki ng auto track, na nakabatay sa nilalaman. Ganito matatagpuan ang mga katangian para sa pagtatakda ng laki ng track:
Sa pangkalahatan ito ay ganito:
Ang tahasang grid ay gumagamit ng mga grid-template-row at grid-template-column
Gumagamit ang implicit na grid ng mga grid-auto-row at grid-auto-column
Sa kasong ito, hindi namin kailangang tukuyin ang mga end value sa unang elemento dahil sumasaklaw lang ito sa isang track. Ang parehong ay maaaring sinabi tungkol sa pangalawang elemento ng grid. Bilang default, kung hindi ka tumukoy ng end line, isang track lang ang sasakupin ng elemento.
Sa katunayan, hindi namin kailangang tukuyin ang anumang pagpoposisyon para sa unang elemento ng grid, dahil ito ay nasa isang tiyak na posisyon, ito ay naroroon pa rin. Ngunit kung hindi namin tinukoy ang pagpoposisyon para sa pangalawang elemento, ito ay matatagpuan kaagad pagkatapos ng unang elemento, na sumasakop lamang sa 1 track.
Pagpangalan ng mga linya ng grid
Maaari mo ring pangalanan ang mga linya ng grid para mas madaling i-refer ang mga ito. Magagawa ito sa pamamagitan ng pagtatakda ng mga katangian ng grid-template-row at grid-template-columns, halimbawa tulad dito:
#grid ( display: grid; /* Itakda ang mga track at pangalanan ang mga linya */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; ) . .. /* Sumangguni ngayon sa mga pinangalanang linya */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end : col3 -end)
Ang mga pinangalanang linya ay maaaring tahasan o implicit. Ang mga implicit na pinangalanang linya ay nilikha sa tuwing gagawa ka ng pinangalanang mga lugar ng grid gamit ang grid-template-areas .
Ang pangalan ay kinuha mula sa lugar ng grid na may idinagdag na -start at -end sa dulo, depende sa kung ito ay simula o dulo ng linya.
Kaya, para sa bawat grid area na pinangalanang header, apat na implicit na linya ang gagawin. Dalawa ang pinangalanang header-start at column-start sa pinangalanang grid area at dalawa ang pinangalanang header-end ayon sa pagkakabanggit.
Pinangalanang mga lugar ng grid
Maaaring pangalanan ang mga grid area sa grid-template-areas property ng grid container mismo. Ito ang ginawa namin noon noong ginawa namin ang template ng site. Upang ibalik ito sa memorya, ganito ang hitsura:
#grid ( display: grid; /* Pangalanan ang grid area */ grid-template-areas: “a a” “b c”; ... ) ... /* Ngayon ilapat ang bawat grid element sa pinangalanang grid area */ # a ( grid-area: a; ) #b ( grid-area: b; ) #c ( grid-area: c; )
Maaari mong ipahiwatig ang isang walang laman na cell sa pamamagitan ng paggamit ng isang tuldok (.) o isang serye ng mga tuldok na walang mga puwang. Halimbawa:
Grid-template-area: "a" ". b";
O grid-template-area: “header header” “... content”;
Mga Katangian ng Paglalagay ng Grid
May tatlong maiikling property na maaaring gamitin bilang kapalit ng mahabang grid layout properties na binanggit sa mga halimbawa sa itaas. Dito nababagay silang lahat.
grid-area - Ang property na ito ay shorthand para sa:
grid-column - Ang property na ito ay shorthand para sa:
grid-column-start — nagsasaad kung saang column line ng grid element ang nagsisimula at kung gaano karaming mga track ito umaabot.
grid-column-end — nagsasaad kung sa aling mga linya ng column nagtatapos ang elemento ng grid at kung gaano karaming mga track ito umaabot.
grid-row — ang property na ito ay shorthand para sa:
grid-row-start — ay nagsasaad kung saang row line magsisimula ang elemento ng grid at kung gaano karaming mga track ito umaabot.
grid-row-end - nagsasaad kung aling linya ng hilera ang huling para sa elemento at kung gaano karaming mga track ang aabutin nito.
Maaari mo ring gamitin ang grid-auto-flow property, na binanggit sa kabanata bago ang isang ito. Tinutukoy nito kung paano dapat ilagay ang awtomatikong mga elemento ng grid sa grid. Ang mga awtomatikong inilagay na elemento ay ang mga hindi tahasang inilalagay gamit ang alinman sa mga katangian sa itaas.
Gumawa ng nested grid
Ang mga elemento ng grid ay maaaring maging mga grid sa CSS Grid. Iyon ay, maaari kang mag-nest ng isang elemento ng grid sa loob ng isa pang elemento ng grid, sa gayon ay lumikha ng isang nested grid.
Para gumawa ng ganoong nested grid, ang kailangan mo lang gawin ay ilapat ang display: grid (o display: inline-grid) sa grid element at ito ay magiging grid mismo. Maaari mo ring gamitin ang display: subgrid para gumawa ng subgrid. paano ito nangyayari.
Karamihan sa mga katangian ng grid ay hindi minana, na nangangahulugan na ang iyong nested grid ay hindi magmamana ng mga halaga ng kanyang parent grid. Nagbibigay-daan ito sa iyong gumawa ng mga pagbabago sa parent grid nang hindi sinasadyang naaapektuhan ang child grid.
Halimbawa, nagtakda ka ng grid-auto-flow: column sa parent grid, ngunit hindi mo itinakda ang property sa nested grid. Sa kasong ito, ang nested grid ay itatakda sa row dahil iyon ang paunang halaga para sa property na ito.
Tandaan na sa parent grid, ang mga numero ay bumababa nang patayo sa mga column sa halip na pahalang sa kahabaan ng row, ngunit ang nested grid ay papunta pa rin nang pahalang sa kahabaan ng row.
Mga subgrid
Ang CSS Grid module ay nagtatakda ng subgrid na halaga para sa display property. Gayunpaman, hindi pa sinusuportahan ito ng lahat ng browser. Ang halagang ito ay dapat na maging kapaki-pakinabang.
Ang subgrid ay isang nested grid, ngunit may display: subgrid . Ginagawa nitong isang espesyal na uri ng grid container na nakikilahok sa pagtatakda ng laki ng grid ng parent grid container. Sa madaling salita, ang nilalaman ng subgrid ay nakakaimpluwensya sa laki ng parent grid, na nagbibigay-daan sa nilalaman na ikalat sa dalawang grids. Nasa ibaba ang isang halimbawa kung saan maaaring maging kapaki-pakinabang ang property na ito.
Narito ang listahan ng mga elemento:
At narito ang CSS, kung saan ang listahan ay isang grid, at ang mga elemento ng listahan ay mga subgrid.
Ul ( display: grid; grid: auto-flow / auto 1fr; ) li ( display: subgrid; grid-column: span 2; margin: 0.5em; border: solid; padding: 0.5em; ) label ( grid-column: 1; ) input ( grid-column: 2; )
Ipapakita ng halimbawang ito ang label at input sa isang hilera, na may hangganan sa paligid ng bawat item sa listahan. Ang pagbibigay sa bawat elemento ng listahan ng subgrid ay nangangahulugan na hindi dapat magkaroon ng anumang mga problema sa pagkakahanay ng mga input form, dahil ang bawat elemento ng listahan ay lalahok sa paghubog ng laki ng parent grid.
Mga form ng auto-placement
Maaari mong gamitin ang mga tahasang grids bilang isang kalamangan kapag gumagawa ng mga form o anumang iba pang koleksyon ng mga elemento na nangangailangan ng grid alignment. Halimbawa, maaari kang gumamit ng mga tahasang grid upang lumikha ng isang form na tulad nito:
At habang nagdaragdag ka ng mga elemento ng form sa iyong markup, ang tahasang grid ay magdaragdag ng mga row upang ma-accommodate ang mga ito. Kaya upang lumikha ng hugis sa itaas, kailangan namin ang markup na ito.
Hindi na kailangan ng karagdagang mga marka para maayos ang lahat. At hindi na rin kailangang magdagdag ng mga karagdagang klase para sa mga elemento ng form. Nagdaragdag lang kami ng isang klase para sa
Maaari kang awtomatikong magdagdag ng mga bagong elemento ng form at awtomatiko silang mag-a-adjust sa iba, dahil ilalagay sila sa isang tahasang grid.
Posible ito dahil ginawa naming grid ang mismong form (display: grid na inilapat sa .myForm). At pagkatapos ay ipinahiwatig nila na ang mga label ay napupunta sa isang column, at mga kontrol sa isa pa.
Narito ang isa pang halimbawa, sa pagkakataong ito ay may higit pa isang malaking bilang elemento:
Kapag lumaganap na ang mga subgrid sa mga browser, magiging posible na ihanay ang mga elemento ng form na hindi direktang mga inapo ng
