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. Dahil pinapayagan ka ng modernong CSS na lumikha ng kumplikadong markup nang hindi nangangailangan ng JavaScript, mas malinis at mas madaling mapanatili ang iyong code.

Maaaring mas simple ang markup

Ang pagpapalit ng Bootstrap ng CSS Grid ay gagawing mas malinis ang HTML. Bilang halimbawa, isaalang-alang ang isang maliit na piraso ng pahina 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 malala 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 template, kailangan niyang magsimula sa pamamagitan ng pagbabago sa 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. kasi 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, gumagamit ito ng flexbox, na nagbibigay-daan din sa iyo na madaling pamahalaan ang markup sa pamamagitan ng CSS, ngunit sa ngayon ay hindi pa ito wala 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.

Mula sa may-akda: artikulo mula sa seryeng konsepto ng CSS Grid layout. Sa nakaraang mga aralin, natutunan namin ang grid syntax, natutunan ang ilang paraan upang ayusin ang mga elemento sa isang pahina, at nagpaalam sa ilang lumang gawi. Sa tutorial na ito gagamitin namin ang lahat ng aming kaalaman sa paglikha adaptive na layout sa pagsasanay.

Mga query sa media

Kunin natin ang demo mula sa nakaraang aralin.

Ang page ay binubuo ng dalawang grids: ang pangunahing grid at ang isa ay naka-nest sa loob ng isa sa mga elemento. Makokontrol namin ang aming mga mata gamit ang mga query sa media. Nangangahulugan ito na maaari naming ganap na muling buuin ang layout upang magkasya sa ibang lapad ng screen.

Magsisimula tayo sa pamamagitan ng pagkopya sa deklarasyon ng unang grid. I-wrap natin ang duplicate sa isang media query gamit ang mobile-first technique. Arbitraryong kinuha ko ang 500px bilang transition point.

Grid-1 ( /* grid styles */ ) @media only screen at (min-width: 500px) ( .grid-1 ( /* grid styles */ ) )

Ngayon ay babaguhin namin ang aming grid sa unang ad upang ilagay ang lahat sa isang column. Nagtakda kami ng isang column gamit ang grid-template-columns property. Tiyaking nakatakda ang aming apat na row sa grid-template-rows property at tumugma sa layout sa grid-template-areas property:

Grid-1 ( display: grid; lapad: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-area: " header" "pangunahing" "sidebar" "footer"; )

Para magkasya sa maliliit na screen, itinakda namin ang grid-gap sa 10px bilang default. Ito ang nakuha namin. Dapat mo ring mapansin na binabago namin ang mga katangian ng padding at laki ng font ng mga elemento ng .grid-1 div gamit ang mga query sa media.

Ang aming nested grid

Binabago ng code sa itaas ang aming pangunahing layout. Gayunpaman, mayroon pa rin kaming nested grid na matigas ang ulo na tumatangging tanggalin ang dalawang column nito sa anumang screen. Upang ayusin ito, gagawin namin ang parehong bagay, ngunit kumuha ng ibang transition point gamit ang content-first method:

Item-2 ( /* grid styles */ ) @media only screen at (min-width: 600px) ( .item-2 ( /* grid styles */ ) )

Kung gagawin naming muli ang demo gamit ang autofill at baguhin ang lapad ng column sa minmax(9em, 1fr), susubukan ng grid na magkasya sa pinakamaraming 9em-wide track hangga't maaari, at pagkatapos ay palawakin ang mga ito sa 1fr hanggang sa mapuno ang buong container:

Disadvantage: Kakakalkula lang ng grid ang mga track pagkatapos ng pag-reboot, at hindi kapag nagbago ang lapad ng window. Subukang paliitin ang window ng iyong browser at i-refresh ang page. Upang baguhin ang mga halaga, maaari mong ikonekta ang mga query sa media, ngunit hindi ito gumagana nang maayos sa pagbabago ng lapad ng window ng browser.

Konklusyon

Ibuod natin ang lahat ng nasa itaas sa isang listahan:

Nagbibigay-daan sa amin ang mga query sa media na ganap na muling buuin ang grid sa pamamagitan ng pagpapalit ng grid-template-areas property (at iba pa) para sa iba't ibang mga sitwasyon.

ari-arian ng paglipat hindi nakakaapekto sa layout ng grid sa anumang paraan.

Gumagana nang maayos ang auto-fill na keyword para sa pagpuno ng grid container.

Ang minmax() function ay isang mahusay na karagdagan sa autocomplete, ngunit hindi ito nagbibigay sa amin ng tunay na kakayahang umangkop.

Ngayon ay handa ka nang magtrabaho sa mga meshes! Manatiling nakatutok para sa higit pang mga artikulo ng CSS Grid, hands-on na pagsasanay, at solusyon sa mga karaniwang problema sa grid.

Sa artikulong ito makikita mo ang isang kumpletong kurso sa CSS grids. Titingnan natin kung ano ito, ano ang mga pagkakaiba sa FlexBox at kung paano ka makakapagtrabaho sa CSS Grid.

Ang mga CSS grid ay bagong diskarte upang lumikha ng mga adaptive na website na may maraming mga bloke na matatagpuan saanman sa site. tsaka CSS Grid Mayroon ding teknolohiya na halos kapareho ng mga meshes. Hindi kami pupunta sa pinakamaliit na pagkakaiba sa pagitan nila, dahil mangangailangan ito ng isang hiwalay na artikulo, ngunit maikli naming ilalarawan ang mga pangunahing pagkakaiba.

CSS Grid maaaring tawaging mas cool at pinahusay na bersyon FlexBox, dahil pinapayagan ka ng FlexBox na magtrabaho lamang sa isang eroplano: lumikha ng mga haligi o lumikha ng mga hilera.

Nagbibigay-daan sa iyo ang CSS grids na gumawa ng higit pa dahil gumagana ang mga ito sa parehong eroplano nang sabay. Kaya, ang paggawa ng mga adaptive na block ng website ay mas madali, at ang mga posibilidad para sa pag-aayos ng mga bagay ayon sa gusto mo ay walang katapusang.

Inaanyayahan ka naming manood ng isang buong video sa pag-aaral ng CSS grids upang agad na maunawaan ang kakanyahan CSS Grid:

• Aralin sa ;

Sa panahon ng aralin, tatlong pahina ang nilikha, ang code para sa bawat pahina ay maaaring kopyahin sa ibaba.

Unang file

Pangalawang file

Pangatlong file

Prinsipyo ng pagpapatakbo

Ang pagtatrabaho sa mga grids ay napaka-simple. Ang algorithm ng mga aksyon dito ay ang mga sumusunod:

1. Lumilikha kami ng isang pangunahing bloke at naglalagay ng iba pang mga bloke dito ( mga seksyon);
2. Idagdag ang display: grid property sa pangunahing bloke;
3. Ang mga katangian ng CSS grid ay maaari na ngayong ilapat sa lahat ng pangunahing elemento ng block;
4. Pagdaragdag ng iba't ibang mga katangian. Makakahanap ka ng dokumentasyon sa lahat ng posibleng pag-aari;

Ang bawat bloke ay maaaring itakda sa lapad, taas, at lokasyon. Ang mga bloke na nilikha batay sa mga grids ay mayroon kaagad tumutugon na disenyo, na nag-aangkop ng mga bloke sa iba't ibang mga resolution ng screen.

Sa ganitong paraan maaari kang magsulat ng mas kaunti at makakuha ng higit pa. Ano pa ang maaaring maging mas cool? Ibahagi ang iyong karanasan sa paggamit ng mga grids sa iyong mga proyekto sa mga komento sa artikulong ito ⇣

Noong unang panahon, sumulat ako tungkol sa isang hindi pangkaraniwang serbisyo, na isang AI para sa paglikha ng isang website. Sa paghusga sa kasalukuyang mga resulta, sila ay naging "kaya-kaya", lalo na kung isasaalang-alang ang nakasaad na presyo. sa bagay na ito sila ay magiging mas epektibo.

Ngayon gusto kong pag-usapan ang tungkol sa isang "teknolohiya" na katulad ng pangalan, ngunit ganap na naiiba sa esensya - CSS Grid! Ang post ay binubuo ng ilang bahagi:

Ang diskarte na ito sa pagbuo ng mga layout ay nagpapadali sa paggawa ng medyo nababaluktot na mga grids ng website gamit ang CSS. Sa hinaharap, ito ay malamang na gagamitin kahit saan. Kung naiintindihan ko nang tama, ito ay perpekto para sa parehong mga gawain tulad ng Flexbox, ngunit hindi katulad nito, maaari itong sabay na gumana sa dalawang-dimensional na sukat (mga hanay at mga hilera). Sa ibaba ay nag-aalok ako ng pagsasalin ng artikulo, na isang uri ng pagpapakilala sa paksa at naglalaman ng mga simpleng halimbawang pang-edukasyon. Pansin! Ang may-akda ng tala ay nagsasagawa ng isang libreng(!) na kurso sa CSS Grid sa Disyembre, kung gusto mo, magpadala ng kahilingan sa kanyang Email.

Nakakita rin ako ng kapaki-pakinabang na video sa paksa sa Internet. Marahil ay mas madaling madama ng isang tao ang impormasyong tulad nito:

Panimula sa CSS Grid

Sa taong ito, nakatanggap ang teknolohiyang ito ng built-in na suporta sa Chrome, FF, Safari, kaya malamang na ito ay magiging isang sikat na tool sa malapit na hinaharap. Ngunit sa ngayon, kailangan mong tandaan na pangalagaan ang mga luma at nahuhuli na mga web browser.

Ang pinakasimpleng mesh

Mayroong 2 pangunahing bagay dito:

• magulang / wrapper (pagbabalot ng lahat ng panloob na bloke na bumubuo dito);
• mga bata/mga bagay (ang mga elemento mismo).

Narito ang pinakasimpleng disenyo:

Wrapper (display: grid; )

Gayunpaman, kaagad pagkatapos nito, walang gaanong magbabago, dahil hindi tinukoy ang format ng display. Makakakita ka ng 6 na DIV na sumusunod sa isa't isa.

Mga Hanay at Hanay

Upang gawing two-dimensional ang iyong grid kailangan mong tukuyin ang mga parameter ng mga row at column - gamitin ang mga opsyon grid-template-row At grid-template-colum ayon sa pagkakabanggit:

Wrapper ( display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; )

Dahil mayroong tatlong mga halaga para sa mga haligi, ang parehong bilang ng mga ito ay bubuo, samakatuwid, mayroon lamang 2 mga hilera Ang mga numero sa mga pixel ay nagtatakda ng lapad ng mga elemento sa unang kaso (100px bawat isa), at ang taas (50px) sa pangalawa.

Narito ang isa pang halimbawa upang matulungan kang mas maunawaan kung paano ito gumagana:

Wrapper ( display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; )

Ang sumusunod na larawan ay ipapakita:

Lokasyon at sukat

Sa tampok na ito makakakuha ka ng talagang napakalakas na mga kakayahan para sa paglikha ng mga grids ng site. Sabihin nating mayroon tayong sukat na 3x3:

Wrapper ( display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; )

Kung ang HTML code, tulad ng sa aming halimbawa, ay may 6 na elemento ng DIV (tingnan sa pinakadulo simula), kung gayon sa kasong ito 2 mga hilera lamang ang ipapakita sa site, ang pangatlo ay pansamantalang hindi mapupunan. Gayunpaman, kapag nagsimula kaming mag-apply ng iba't ibang mga parameter para sa posisyon at laki ng mga bloke − grid-columnand grid-row, magbabago ang sitwasyon.

Nagtatalaga kami ng mga istilo sa isa sa mga bagay:

Item1 ( grid-column-start: 1; grid-column-end: 4; )

Nangangahulugan ito na ang DIV na may class item1 ay nagsisimula sa unang linya ng column sa grid at nagtatapos sa ika-4, iyon ay, pinupuno nito ang buong row.

Sa totoo lang, ngayon ang ilang mga bagay ay lumipat sa huling linya, na isinulat namin nang maaga (3x3). Mayroong isang mas simpleng pagpipilian:

Item1 ( grid-column: 1 / 4; )

Item1 ( grid-column-start: 1; grid-column-end: 3; ) .item3 ( grid-row-start: 2; grid-row-end: 4; ) .item4 ( grid-column-start: 2; grid-column-end: 4)

Nagbibigay ito sa amin ng sumusunod na larawan:

Nagawa mo bang malaman ito? Sa prinsipyo, hindi ito mahirap, ngunit kailangan mong maunawaan na ito lamang ang pangunahing bahagi ng mga nuances ng CSS Grid.

Prototyping at Layout Area na may CSS Grid

Ang markup code ay ang mga sumusunod (HTML):

Container ( display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; )

Kung ang lahat ay malinaw sa prinsipyo tungkol sa mga hilera, kung gayon ang mga haligi ay kailangang linawin. Dito sa kahulugan grid-template-column nilikha ang isang grid na binubuo ng 12 magkaparehong column (ang lapad ng bawat isa = 1/12 ng kabuuan) + 5px na mga margin sa pagitan ng mga ito (grid-gap).

Magdagdag ng grid-template-area

Ang pagpipiliang ito ay nagbibigay sa iyo ng higit pang kakayahang umangkop at kamangha-manghang mga tampok. Marahil ang syntax at pag-format ng parameter grid-template-area mukhang medyo hindi pangkaraniwan, ngunit mas mauunawaan mo kung bakit ang lahat ay eksaktong ganito:

Container ( display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h h" "m m c c c c c c c c c c c c f c" "f f f" ;)

Ito ay uri ng visual na representasyon ng grid ng iyong site sa CSS. Lahat ng character sa parameter na ito ay bumubuo ng 3 linya at 12 column, tinukoy ng string mas mataas. Ang bawat titik ay tumutugma sa isang cell. Ang mga pangalan sa halimbawa ay tumutugma sa mga bloke ng HTML code: header (h), menu (m), content (c) at footer (f), ngunit maaari mong gamitin ang anumang iba pang mga opsyon.

Pagtatalaga ng Mga Lugar ng Mga Template at Eksperimento

Sa susunod na hakbang, "lohikal mong i-link" ang mga simbolo ng container at ang mga elemento ng DIV:

Header ( grid-area: h; ) .menu ( grid-area: m; ) .content ( grid-area: c; ) .footer ( grid-area: f; )

Magpapakita ang site ng layout na tulad nito:

At ngayon magsisimula ang magic. Magpalit tayo ng ilang titik sa parameter grid-template-area, halimbawa, “c” at “m” sa mga lugar:

grid-template-area: "h h h h h h h h h h h h h h" "c c c c c c c c c c c c c m m" "f f f f f f f f f f f f f f";

Magiging iba ang hitsura ng grid:

Ang pagdaragdag ng kakayahang umangkop sa disenyo na ito sa pangkalahatan ay mukhang kamangha-manghang. Hindi mo ito magagawa sa HTML lang, ngunit sa CSS lahat ay posible: ". h h h h h h h h h h ."

"c c c c c c c c c m m" ". f f f f f f f f f f f f ." ;

grid-template-area: ". h h h h h h h h h h ."

"c c c c c c c c c m m" ". f f f f f f f f f f f f .";

Mukhang ganito ang website:

Walang mga script o HTML - ang magic lang ng CSS Grid!

Karagdagang Mga Halimbawa ng Grid at Flex

Mayroon kaming isang header at footer na nakaunat sa buong lapad, at sa pagitan ng mga ito ay may isang bloke ng nilalaman na may dalawang sidebar. Sa unang kaso, kapag ang screen ay nabawasan, ang lahat ng mga bagay ay mananatili sa parehong mga posisyon tulad ng dati.

Kung kailangan mo ang mga bloke na matatagpuan sa ibaba ng isa, kung gayon:

2 column na blog grid

Sabihin nating mayroon kaming isang malaking bloke ng nilalaman at isang sidebar sa gitna. Ang code sa ibaba ay nagpapanatili sa lahat ng mga bagay sa lugar kapag ang laki ng pahina ay nabawasan.

Ang pangalawang pamamaraan ay upang ayusin ang mga ito nang paisa-isa.

Pamamahagi ng lapad ng mga elemento

Biswal, ang halimbawa ay kahawig ng isang gallery, kapag ang lahat ng mga larawan ay magkatabi sa ilang column. Habang binabawasan mo ang laki, mas kakaunti ang mga ito ang lalabas sa bawat linya.

Larawan sa loob ng artikulo

Narito ang nilalaman ay nahahati sa 2 bahagi, at sa pagitan ng mga ito ay may isang full-screen na bloke.

Kabuuan. Sa pangkalahatan, natuklasan ko ang konsepto ng CSS Grid, na, sa totoo lang, kaaya-aya akong humanga - lalo na ang mga frame kung saan may mga layout ng sa iba't ibang letra. Siyempre, ang lahat ng ito ay ang mga pangunahing kaalaman lamang ng "teknolohiya", at hindi ko inilarawan nang detalyado ang bawat parameter ng code. SA huling seksyon Ang mga halimbawang artikulo ay mas kumplikado at dapat suriing mabuti. Pinagsasama nito ang Flex at Grid. Kung kawili-wili ang paksang ito, mag-subscribe sa mga kurso ng unang may-akda - Mga entry sa email sa orihinal na una o pangalawang tala.

Mayroon ka bang anumang idaragdag tungkol sa CSS Grid? — magsulat ng mga saloobin, payo o magpadala ng mga kawili-wiling link.

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, Mga HTML na talahanayan kadalasang ginagamit para sa mga template ng multi-column, 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, nilikha ang mga talahanayan 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 tabular na layout, 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.

Ngunit siyempre, maaari kang gumamit ng iba't ibang mga halaga para dito, tulad 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 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 sa tumutugon na disenyo ng web. Paglikha iba't ibang mga template para sa iba't ibang mga aparato ay nagiging isang maliit na bagay 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.

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:

Sinasakop na ngayon ng nabigasyon ang espasyo kung saan naroon ang nilalaman, kaya naayos na ang mga sukat. Kung hindi, magkakaroon tayo ng makitid na nilalaman at malawak na nabigasyon. Kaya ang code ngayon ay ganito ang hitsura.

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 pinakamababang 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.

Ginagawa nitong perpekto ang mga grid para sa mga query sa media. Maaari lamang nating italaga ang mga halaga sa ASCII graphics at ibalot ang resulta sa isang query sa media.

Ito ay isang template na may tatlong hanay sa isang malaking viewport at nag-compress ito sa isang template ng solong-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.

Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;

At narito ang kaukulang code para sa mobile na bersyon:

Grid-template-areas: “header” “article” “ads” “nav” “footer”;

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 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, magkakaroon ka ng 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.

Awtomatikong nabubuo ng grid container ang mga implicit na grid sa tuwing matatagpuan ang mga elemento ng grid 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 maibalik 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 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.

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.

Mana

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 ito sinusuportahan 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:

• Pangalan:
• Address:
• Telepono:

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 awtomatikong paglalagay

Maaari kang gumamit ng mga tahasang grid bilang isang kalamangan kapag gumagawa ng mga form o anumang iba pang koleksyon ng mga elemento na nangangailangan ng pag-align ng grid. 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 na may higit pang mga elemento:

Kapag naging laganap na ang mga subgrid sa mga browser, magiging posible na ihanay ang mga elemento ng form na hindi direktang mga inapo ng