Mula sa may-akda: Kapag gumagawa ng mga kumplikadong website, ang mga grids ay gumawa ng malaking pagkakaiba. Ang kanilang kahalagahan sa modernong disenyo ng web nagiging malinaw, kailangan mo lamang tingnan ang bilang ng mga balangkas kung saan ipinatupad ang teknolohiyang ito upang mapabilis ang pag-unlad.
Kapag pamilyar ka na sa detalye ng CSS Grid Layout, hindi mo na kakailanganin hiwalay na mga file styles kung gusto mong magtrabaho sa isang grid system. Walang kulang isang mahalagang kalamangan ay hindi ka na aasa sa inline at float na uri ng mga katangian upang iposisyon ang mga elemento sa pahina. Sa tutorial na ito matututunan natin ang mga pangunahing kaalaman ng mga grid system at lumikha din ng isang simpleng layout ng blog.
Suporta sa browser
Naka-on sa ngayon tanging IE 10+ at Edge lamang ang sumusuporta sa detalye ng Grid Layout - sa mga komersyal na site teknolohiyang ito hindi pa magagamit.
SA Chrome ito Maaaring i-activate ang opsyon sa pamamagitan ng flag na "Mga feature ng Experimental Web Platform" sa chrome://flags. Sa Firefox – layout.css.grid.enabled flag.
Ang isa pang pagpipilian ay ang paggamit ng polyfill, at oo, umiiral ang CSS Grid Polyfill! Maaari mong gamitin ang alinman sa tatlong inilarawang opsyon at pag-aralan ang Grid Layout habang nasa maagang yugto pa ito ng pag-unlad.
Pakitandaan: Sa IE ito ay kasalukuyang gumagana lumang bersyon mga pagtutukoy, na nangangahulugang hindi ganap na sinusuportahan ng browser bagong detalye. Kapag nakarating na tayo sa mga halimbawa, inirerekomenda kong gamitin mo ang Chrome o Firefox.
Mga Terminolohiya ng Grid System
Tulad ng para sa pagpoposisyon ng mga elemento, ang mga CSS Grid system ay ang parehong mga talahanayan. Gayunpaman kasangkapang ito mas makapangyarihan at iba-iba. SA ang seksyong ito Magsasalita ako tungkol sa ilang mga termino na kailangan mong tandaan kapag nagtatrabaho sa mga grids:
Mga yunit ng pagsukat fr: ginagamit ang mga ito upang itakda ang laki libreng espasyo. Ginagamit kasabay ng mga grid-row at grid-column. Mula sa pagtutukoy: "Ang paglalaan ng espasyo ay nangyayari lamang pagkatapos maabot ang lahat ng "haba" o laki ng mga hilera at hanay ng nilalaman maximum na sukat»
Mga Linya: Ang mga linya ay nagmamarka ng mga hangganan ng iba pang mga elemento. Pareho silang pahalang at patayo. Sa larawan sa ibaba mayroong 4 na patayo at 4 na pahalang na linya.
Mga Track: Ang mga track ay ang espasyo sa pagitan ng mga parallel na linya. Sa larawan sa ibaba mayroong 3 patayo at 3 pahalang na mga track.
Mga Cell: Ang mga cell ay ang mga bloke ng gusali ng isang grid. Mayroon lamang 9 na mga cell sa larawan sa ibaba.
Mga Lugar: Ang isang lugar ay isang parihaba ng isang arbitrary na bilang ng mga cell. Yung. ang track ay parehong lugar at cell.
Pagpoposisyon ng mga elemento sa isang grid
Magsimula tayo sa mga pangunahing kaalaman. Sa seksyong ito, ipapakita ko sa iyo kung paano gumamit ng grid upang maglagay ng mga elemento sa mga partikular na lugar. Upang gumana sa CSS Grid Layout kailangan mong lumikha elemento ng magulang at isa o higit pang mga bata. Halimbawa, kukunin ko ang markup sa ibaba:
< div class = "grid-container" > < div class = "grid-element item-a" >A< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >D< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div > |
Upang gumawa ng grid, dapat tukuyin ng container ang mga property na display:grid o display:inline-grid, pati na rin ang iba pang mga istilo:
Grid-container ( display: grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; )
Grid - lalagyan ( display:grid; grid - template - columns : 200px 10px 0.3fr 10px 0.7fr ; grid - template - rows : auto 20px auto ; |
Ang mga katangian ng grid-template-column at grid-template-rows ay nagtatakda ng lapad ng mga row at column. Sa halimbawa sa itaas gumawa ako ng 5 column. Ang isang 10px na lapad na column ay ginagamit bilang isang separator sa pagitan ng mga elemento. Ang unang column ay may lapad na 200px. Ang ikatlong hanay ay tumatagal ng 0.3 ng natitirang espasyo. At ang ikalimang column ay tumatagal ng 0.7 ng natitirang espasyo.
Dahil ang unang row ay nakatakda sa grid-template-rows: auto, pinapayagan nito ang row na lumawak habang nagdaragdag ng content. Ang 20px na linya ay gumagana bilang isang separator. Sa demo sa ibaba makikita mo na ang mga elemento ay mahigpit na nakadikit sa isa't isa.
Bigyang-pansin ang elemento B - ito ay matatagpuan sa pangalawang hanay, na ginagamit namin bilang isang separator. Kung ang pagpoposisyon ng mga elemento ay hindi naitakda nang manu-mano, ang browser ay maglalagay ng mga elemento sa mga cell mula kaliwa hanggang kanan, at kung hindi sila magkasya sa isang hilera, ang mga natitira ay talon sa pangalawang hilera. Kaya naman nag-iwan kami ng 4 na ekstrang column sa pangalawang linya.
Upang ilipat ang isang elemento sa isang ibinigay na grid cell, kailangan mong itakda ang pagpoposisyon ng elementong ito sa pamamagitan ng CSS. Bago ko ipaliwanag kung paano ilipat ang mga elemento ng mesh, tingnan ang larawan sa ibaba.
Sa halimbawang ito ay gagamit tayo ng linear element placement system. Linear na sistema nangangahulugan na ang mga linya sa grid ay gaganap ng isang nangingibabaw na papel sa paglalagay ng mga elemento. Kunin natin ang elemento B bilang isang halimbawa block na ito nagsisimula sa ikatlong linya at nagtatapos sa ika-4 na linya ng mga hanay. Maliban sa mga patayong linya elementong ito matatagpuan sa pagitan ng mga linya sa una at pangalawang hilera.
Upang itakda ang simula patayong linya elemento, gagamitin namin ang grid-column-start property. Sa aming kaso, ang halaga ay magiging 3. Ang grid-column-end property ay nagpapahiwatig ng dulong patayong linya ng elemento. Sa aming kaso ito ay 4. Ang mga halaga para sa mga pahalang na linya ay nakatakda sa parehong paraan.
Batay sa itaas, napagpasyahan namin na upang ilipat ang elemento B sa pangalawang cell, dapat mong gamitin ang code:
Element-b ( grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; )
Elemento - b ( grid - column - start : 3 ; grid - column - end : 4 ; grid - row - start : 1 ; grid - row - end : 2 ; |
Katulad nito, upang ilipat ang elemento F sa ikaanim na cell:
Element-f ( grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; )
Elemento - f ( grid - column - start : 5 ; grid - column - end : 6 ; grid - row - start : 3 ; grid - row - end : 4 ; |
Paggawa ng Basic Layout
Ngayon ay gagawa kami ng pangunahing layout ng blog, na magkakaroon ng header, footer, sidebar at dalawang seksyon para sa nilalaman. Una ang mga marka:
< div class = "grid-container" > < div class = "grid-element header" >Header< / div > < div class = "grid-element sidebar" >Sidebar< / div > < div class = "grid-element main" >Pangunahing Nilalaman< / div > < div class = "grid-element extra" >Karagdagang Impormasyon< / div > < div class = "grid-element footer" >Footer< / div > < / div > |
Tandaan na ang pagkakasunud-sunod kung saan inilalagay ang mga tag sa markup ay hindi nakakaapekto sa pagpoposisyon ng mga elemento sa web page. Nang hindi binabago ang CSS, maaari mong ilagay ang footer sa markup sa itaas ng header, ngunit ang pagpoposisyon ng mga elemento ay mananatiling pareho. Ngunit hindi ko inirerekomenda na gawin iyon. Ang pangunahing ideya dito ay hindi na sinasabi sa iyo ng markup kung saan matatagpuan ang elemento.
Ang kailangan lang nating gawin ay tukuyin ang mga halaga ng mga katangian tulad ng grid-row-end para sa lahat ng mga elemento. Tulad ng sa nakaraang halimbawa, gagamit kami ng grid diagram upang matukoy ang mga halaga ng ari-arian.
Napansin ko ang Grid technique mga isang taon na ang nakalipas. Pagkatapos ang pamamaraan na ito, pagkatapos ng isang napakababaw na pag-aaral, ay tila walang silbi at napaka-eksperimento sa akin; Ngunit ngayon ay nagiging mahirap na hindi mapansin ang bilang ng mga website na binuo sa grid, pati na rin ang bilang ng mga artikulo at mga tutorial tungkol dito. Salamat sa huli, naging mas madaling pag-aralan at maunawaan ang mga prinsipyo at konsepto, at gumawa ng higit pa o mas kaunting mga tunay na konklusyon. Ang aking konklusyon makalipas ang isang taon ay: “It’s simple and kapaki-pakinabang na solusyon na nilikha para sa layout ng mga web page, dapat malaman ng bawat may respeto sa sarili na web designer.”
Alam ng sinumang nakagawa na ng grid kung ano ang grid. mga graphic editor (Photoshop, Fireworks, Gimp, atbp.) at siyempre pinahahalagahan ang pangangailangan nito kapag lumilikha ng anumang disenyo. Ngunit paano magpatupad ng Grid sa web? Sa totoo lang Tabular ang layout ay isang tunay na disenyo ng web page na may Grid, walang alinlangan na napaka-maginhawa. Pero hindi nilalayong paggamit elemento mesa ay nakakatakot.
Sa kabutihang palad, ang napakalaking katanyagan ng mga pamantayan sa web ay lumago at patuloy na lumalaki mga nakaraang taon, pati na rin ang kanilang suporta sa mga modernong browser, ay nagbigay sa amin ng pagkakataong lumikha ng mga multi-functional na pahina na may napakaliit, lohikal na markup. Ang layout na ito ay tinawag I-block. Ngunit din I-block layout pala mahinang panig. Kapag lumilikha ng mga pahina na may malaking hanay ng mga elemento ng iba't ibang laki at kahulugan, ang pagmamarka sa mga naturang pahina ay naging isang napakahirap na gawain, at kung higit sa isang tao ang gumagana sa markup, ang gayong gawain ay maaaring maging isang bangungot.
At pagkatapos ay sumagip ang pamamaraan gamit ang Grid. Ang diskarteng ito ay isang hybrid sa pagitan I-block At Tabular layout. Ang paggamit nito ay nagbibigay sa amin ng:
- bilis at kadalian ng pag-unlad
- kalayaan sa pagpoposisyon
- proporsyonalidad ng mga elemento ng pahina at ang kanilang pagkakalagay
Ano ang layout sa Grid? Una sa lahat, ito ay isang konsepto. Isang konsepto na kinabibilangan ng maraming aspeto ng disenyo at napakakaunting mga panuntunan para sa pagpapatupad nito. Nagbibigay ito ng ganap na kalayaan at walang standardisasyon sa pagpapatupad nito. Sasabihin ko pa - ang parehong Grid ay maaaring ipatupad ng karamihan sa iba't ibang paraan. Kung nabasa mo na ang tungkol sa Grid, maaaring napansin mo na ang bawat may-akda ay nagsisimula sa bagong panig pagpunta sa masyadong malayo sa mga detalye, ito ay nakalilito upang sabihin ang hindi bababa sa. Sa kabutihang palad, nagsimula silang lumitaw Mga Sistema ng Grid- CSS library para sa pagtatrabaho sa Grid. At gamit ang kanilang halimbawa, maaari mong napakabilis na makabisado pangunahing mga prinsipyo pamamaraang ito.
Sa tingin ko, walang saysay na isulat ang tungkol sa lahat ng aspeto ng Grid, madali kang makakahanap ng impormasyon tungkol dito sa Internet. Iminumungkahi kong lumikha ng iyong sariling simple Sistema ng Grid.
Una kailangan mong maunawaan na ang grid ay binubuo ng mga haligi at mga puwang sa pagitan ng mga ito. Mayroong tatlong pangunahing mga halaga - ang lapad ng grid, ang lapad ng haligi, at ang lapad ng puwang sa pagitan ng mga haligi. Ang lapad ng mga haligi ay depende sa kanilang bilang.
Subukan nating gumawa ng grid na 950 pixels ang lapad na may 16 na column na may 10 pixel spacing, kaya ang isang column ay dapat na 50 pixels ang lapad. Ang pagkakaroon ng naiintindihan ang lahat ng mga halaga, binuksan namin ang anumang graphic editor na kilala sa amin at lumikha ng isang layout. Maaari ka ring magdagdag ng padding sa Grid sa kaliwa at kanan, sabihin nating 20 pixel bawat isa, at magreresulta ito sa isang layout na may lapad na 990 pixels. Makikita mo ang aking halimbawa.
Ngayon ay maaari na nating simulan ang paggawa ng ating library. Tulad ng karamihan sa mga aklatan ng CSS na kailangan namin ng pandaigdigang pag-reset, iminumungkahi ko ang Pag-reset ng CSS ni Eric Mayer, na pinapanatili reset.css gumawa tayo grid.css kung saan maaari kaming agad na magdagdag ng isang paraan para sa paglilinis ng mga lalagyan na naglalaman ng mga lumulutang na bloke - Clear Fix. Ang unang bagay na kailangan namin ay isang panuntunan para sa isang lalagyan na maglalaman ng lahat ng aming mga column. Ang lapad ng bawat lalagyan ay katumbas ng lapad ng aming grid.
.container(
margin: 0 auto;
lapad: 950px;
}
Ngayon ay maaari na tayong magdagdag ng panuntunan para sa ating mga column, naglalaman ito ng lapad at padding. Ang indent ay gumaganap bilang isang puwang (kanal) sa pagitan ng mga hanay.
.column(
lumutang: kaliwa;
margin-right: 10px;
overflow: nakatago;
lapad: 50px;
}
Ang huling column ay hindi nangangailangan ng indentation;
Ang aming mga lalagyan ay naglalaman ng mga haligi, ang mga haligi ay lumulutang na mga bloke, kaya kailangan nilang linisin. Upang maiwasan ang hindi kinakailangang .clearfix sa markup, maaari mong ilapat ang panuntunang ito sa mga container:
.clearfix:pagkatapos .lalagyan:pagkatapos{
nilalaman: ".";
display: block;
taas: 0;
malinaw: pareho;
visibility: hidden;
}malinaw na ayusin, .lalagyan( display: inline-block; )
/* Nagtago mula sa IE-mac \*/
*html.clearfix, *html.container(taas: 1%;)
.clearfix, .lalagyan(display: block;)
/* Tapusin ang pagtago mula sa IE-mac */
Ngayon ay maaari na tayong magsimula sa ating mga column. Ang mga hanay ay maaaring dalawa o tatlong lapad, at iba pa. Upang gawin ito, maaari naming ilapat ang mga sumusunod na patakaran sa kanila:
.span-1 ( lapad: 50px; )
.span-2 (lapad: 110px; )
.span-3 (lapad: 170px; )
.span-4 (lapad: 230px; )
.span-5 (lapad: 290px; )
.span-6 (lapad: 350px; )
.span-7 (lapad: 410px; )
.span-8 (lapad: 470px; )
.span-9 (lapad: 530px; )
.span-10 (lapad: 590px; )
.span-11 (lapad: 650px; )
.span-12 (lapad: 710px; )
.span-13 (lapad: 770px; )
.span-14 (lapad: 830px; )
.span-15 (lapad: 890px; )
.span-16 ( width: 950px; margin-right: 0; )
Sa prinsipyo, ito lang ang kailangan para sa mga pagpapatupad ng Grid; Lumikha tayo main.css at idagdag dito:
.wrapper(
margin: 0 auto;
lapad: 990px;
}
.overlay(
background: transparent na url(overlay.png) repeat-y scroll sa kaliwa sa itaas;
}
Narito kung ano ang maaaring hitsura ng layout:
Sa tingin ko ito ay sapat na para sa isang panimula.
Makikita mo ang aking halimbawa
Mula sa may-akda: artikulo mula sa serye ng konsepto CSS layout Grid. 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 umangkop sa iba't 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. Tingnan kung ang aming apat na row ay nakatakda sa pamamagitan ng grid-template-rows property at tumugma sa layout gamit ang 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"; )
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 - mga lugar : "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 nagbabago tayo mga katangian ng padding at laki ng font sa 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 autofill demo at babaguhin 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.
Mabuti para sa pagpuno ng isang lalagyan ng mesh keyword auto-fill
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.
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 sapat flexible meshes mga site mula sa 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 ; ) |
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 ; ) |
Wrapper ( display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; )
Ang sumusunod na larawan ay ipapakita:
Lokasyon at sukat
Gamit ang function na ito makakakuha ka ng talagang napaka makapangyarihang mga tampok sa paglikha ng mga network ng site. Sabihin nating mayroon tayong sukat na 3x3:
| .wrapper ( display : grid; grid-template-columns : 100px 100px 100px ; grid-template-rows : 100px 100px 100px ; ) |
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), pagkatapos ay sa sa kasong ito 2 row lang ang ipapakita sa site, pansamantalang hindi mapupunan ang pangatlo. Gayunpaman, kapag nagsimula kaming gumamit iba't ibang mga parameter para sa posisyon at laki ng 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 ; ) |
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 ay lumipat na ang ilang bagay huling linya, na isinulat namin nang maaga (3x3). Mayroong isang mas simpleng pagpipilian:
| .item1 ( grid-column : 1 / 4 ; ) |
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 ; |
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 cf f f f f f f " ;) |
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 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 na i-link" mo ang mga simbolo ng lalagyan at DIV elemento:
| .header ( grid-area : h; ) .menu ( grid-area : m; ) .content ( grid-area : c; ) .footer ( grid-area : f; ) |
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-areas : "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 f f f f f f f f f f f f f f f f f f f f f f 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 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
Sa ibang pagkakataon sa CSS Tricks, nakakita ako ng isa pang artikulo sa paksa, ang ilang mga opsyon mula dito ay maaaring maging kapaki-pakinabang sa iyo. Sundin ang mga link sa (logo sa block ng code sa kanang tuktok) upang makita ang halimbawang gumagana sa malaking screen.
Klasikong layout ng site
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 ang paksang ito kawili-wili, mag-subscribe sa mga kurso ng unang may-akda -
Mga tala sa email
Napansin ko ang Grid technique mga isang taon na ang nakalipas. Pagkatapos ang pamamaraan na ito, pagkatapos ng isang napakababaw na pag-aaral, ay tila walang silbi at napaka-eksperimento sa akin; Ngunit ngayon ay nagiging mahirap na hindi mapansin ang bilang ng mga website na binuo sa grid, pati na rin ang bilang ng mga artikulo at mga tutorial tungkol dito. Salamat sa huli, naging mas madaling pag-aralan at maunawaan ang mga prinsipyo at konsepto, at gumawa ng higit pa o mas kaunting mga tunay na konklusyon. Ang aking konklusyon makalipas ang isang taon ay ito: "Dapat malaman ng bawat may respeto sa sarili na web designer ang simple at kapaki-pakinabang na solusyong ito na nilikha para sa layout ng mga web page."
Alam ng sinumang nakatrabaho na ang mga graphic editor kung ano ang grid. (Photoshop, Fireworks, Gimp, atbp.) at siyempre pinahahalagahan ang pangangailangan nito kapag lumilikha ng anumang disenyo. Ngunit paano magpatupad ng Grid sa web? Sa totoo lang Tabular ang layout ay isang tunay na disenyo ng web page na may Grid, walang alinlangan na napaka-maginhawa. Ngunit hindi ang nilalayong paggamit ng mga elemento mesa ay nakakatakot.
Sa kabutihang palad, ang napakalaking katanyagan ng mga pamantayan sa web, na lumago at patuloy na lumalaki sa mga nakalipas na taon, gayundin ang kanilang suporta sa mga modernong browser, ay nagbigay sa amin ng pagkakataong lumikha ng mga richly functional na pahina na may napakakaunting, lohikal na markup. Ang layout na ito ay tinawag I-block. Ngunit din I-block ang layout ay naging mahinang punto. Kapag lumilikha ng mga pahina na may malaking hanay ng mga elemento ng iba't ibang laki at kahulugan, ang pagmamarka sa mga naturang pahina ay naging isang napakahirap na gawain, at kung higit sa isang tao ang gumagana sa markup, ang gayong gawain ay maaaring maging isang bangungot.
At pagkatapos ay sumagip ang pamamaraan gamit ang Grid. Ang diskarteng ito ay isang hybrid sa pagitan I-block At Tabular layout. Ang paggamit nito ay nagbibigay sa amin ng:
- bilis at kadalian ng pag-unlad
- kalayaan sa pagpoposisyon
- proporsyonalidad ng mga elemento ng pahina at ang kanilang pagkakalagay
Ano ang layout sa Grid? Una sa lahat, ito ay isang konsepto. Isang konsepto na kinabibilangan ng maraming aspeto ng disenyo at napakakaunting mga panuntunan para sa pagpapatupad nito. Nagbibigay ito ng ganap na kalayaan at walang standardisasyon sa pagpapatupad nito. Sasabihin ko pa - ang parehong Grid ay maaaring ipatupad sa iba't ibang paraan. Kung nabasa mo na ang tungkol sa Grid, maaaring napansin mo na ang bawat may-akda ay nagsisimula mula sa isang bagong anggulo, na lumalalim sa mga detalye, ito ay, upang ilagay ito nang mahinahon, nakakalito. Sa kabutihang palad, nagsimula silang lumitaw Mga Sistema ng Grid- CSS library para sa pagtatrabaho sa Grid. At gamit ang kanilang halimbawa, maaari mong napakabilis na makabisado ang mga pangunahing prinsipyo ng pamamaraang ito.
Sa tingin ko, walang saysay na isulat ang tungkol sa lahat ng aspeto ng Grid, madali kang makakahanap ng impormasyon tungkol dito sa Internet. Iminumungkahi kong lumikha ng iyong sariling simple Sistema ng Grid.
Una kailangan mong maunawaan na ang grid ay binubuo ng mga haligi at mga puwang sa pagitan ng mga ito. Mayroong tatlong pangunahing mga halaga - ang lapad ng grid, ang lapad ng haligi, at ang lapad ng puwang sa pagitan ng mga haligi. Ang lapad ng mga haligi ay depende sa kanilang bilang.
Subukan nating gumawa ng grid na 950 pixels ang lapad na may 16 na column na may 10 pixel spacing, kaya ang isang column ay dapat na 50 pixels ang lapad. Ang pagkakaroon ng naiintindihan ang lahat ng mga halaga, binuksan namin ang anumang graphic editor na kilala sa amin at lumikha ng isang layout. Maaari ka ring magdagdag ng padding sa Grid sa kaliwa at kanan, sabihin nating 20 pixel bawat isa, at magreresulta ito sa isang layout na may lapad na 990 pixels. Makikita mo ang aking halimbawa.
Ngayon ay maaari na nating simulan ang paggawa ng ating library. Tulad ng karamihan sa mga aklatan ng CSS na kailangan namin ng pandaigdigang pag-reset, iminumungkahi ko ang Pag-reset ng CSS ni Eric Mayer, na pinapanatili reset.css gumawa tayo grid.css kung saan maaari kaming agad na magdagdag ng isang paraan para sa paglilinis ng mga lalagyan na naglalaman ng mga lumulutang na bloke - Clear Fix. Ang unang bagay na kailangan namin ay isang panuntunan para sa isang lalagyan na maglalaman ng lahat ng aming mga column. Ang lapad ng bawat lalagyan ay katumbas ng lapad ng aming grid.
.container(
margin: 0 auto;
lapad: 950px;
}
Ngayon ay maaari na tayong magdagdag ng panuntunan para sa ating mga column, naglalaman ito ng lapad at padding. Ang indent ay gumaganap bilang isang puwang (kanal) sa pagitan ng mga hanay.
.column(
lumutang: kaliwa;
margin-right: 10px;
overflow: nakatago;
lapad: 50px;
}
Ang huling column ay hindi nangangailangan ng indentation;
Ang aming mga lalagyan ay naglalaman ng mga haligi, ang mga haligi ay lumulutang na mga bloke, kaya kailangan nilang linisin. Upang maiwasan ang hindi kinakailangang .clearfix sa markup, maaari mong ilapat ang panuntunang ito sa mga container:
.clearfix:pagkatapos .lalagyan:pagkatapos{
nilalaman: ".";
display: block;
taas: 0;
malinaw: pareho;
visibility: hidden;
}malinaw na ayusin, .lalagyan( display: inline-block; )
/* Nagtago mula sa IE-mac \*/
*html.clearfix, *html.container(taas: 1%;)
.clearfix, .lalagyan(display: block;)
/* Tapusin ang pagtago mula sa IE-mac */
Ngayon ay maaari na tayong magsimula sa ating mga column. Ang mga hanay ay maaaring dalawa o tatlong lapad, at iba pa. Upang gawin ito, maaari naming ilapat ang mga sumusunod na patakaran sa kanila:
.span-1 ( lapad: 50px; )
.span-2 (lapad: 110px; )
.span-3 (lapad: 170px; )
.span-4 (lapad: 230px; )
.span-5 (lapad: 290px; )
.span-6 (lapad: 350px; )
.span-7 (lapad: 410px; )
.span-8 (lapad: 470px; )
.span-9 (lapad: 530px; )
.span-10 (lapad: 590px; )
.span-11 (lapad: 650px; )
.span-12 (lapad: 710px; )
.span-13 (lapad: 770px; )
.span-14 (lapad: 830px; )
.span-15 (lapad: 890px; )
.span-16 ( width: 950px; margin-right: 0; )
Sa prinsipyo, ito lang ang kailangan para sa mga pagpapatupad ng Grid; Lumikha tayo main.css at idagdag dito:
.wrapper(
margin: 0 auto;
lapad: 990px;
}
.overlay(
background: transparent na url(overlay.png) repeat-y scroll sa kaliwa sa itaas;
}
Narito kung ano ang maaaring hitsura ng layout:
Sa tingin ko ito ay sapat na para sa isang panimula.
Makikita mo ang aking halimbawa
