Verkkoasettelun hallinta ilman CSS: n hallintaa on suunnilleen yhtä toteutettavissa kuin uimisen oppiminen kuivalla maalla. Mutta toisin kuin uinti - joka kun se on hallittu, on taito, joka säilyy kanssasi koko elämän ajan - CSS: n hallitseminen on prosessi, joka ei koskaan lopu, koska itse CSS kehittyy jatkuvasti.

Haastetta pahentavat CSS: n toteutuksen ja tuen erot eri selaimissa (ja jopa saman selaimen eri versioissa) sekä erilaiset CSS-suositusten hyväksymisnopeudet. Hyvin yli vuosikymmenen ajan web-suunnittelijat ja kehittäjät ovat kamppailleet satunnaisista ja epäjohdonmukaisista lisäpurkauksista Tuetut CSS3-ominaisuudet jokaisessa uudessa selainversiossa.

Mutta olkoon niin kuin se onkin, CSS: n hallinta on ehdottoman välttämätön kaikille kiinteille aineille verkkosuunnittelija tai kehittäjä . Tässä artikkelissa käydään läpi joitain CSS-asettelun perusperiaatteita klassisista CSS2-tekniikoista uusimpiin CSS3: n asetteluihin.

HUOMAUTUS: Kaikki tämän artikkelin koodinäytteet käyttävät HTML5 elementit ja Sass syntaksi. Koko työkoodi voidaan kloonata https://github.com/laureanoarcanio/css-layout-examples .

Käytä koteloa

Yksi parhaista tavoista oppia tekniikka on saada tietty käyttötapaus, jota yrität tukea, tai tietty ongelma, jonka yrität ratkaista. Tätä tarkoitusta varten keskitymme käyttötapaukseen, jolla on tietyt vaatimukset.

Käyttötapamme koostuu Web-sovelluksen asettelusta, jolla on dynaamista käyttäytymistä. Sivulla on kiinteät elementit, kuten otsikko, alatunniste, navigointivalikko ja alisuunta sekä vieritettävä sisältöosio. Tässä ovat erityiset asetteluvaatimukset:

• Perusasettelu
  • Ylätunniste, alatunniste, navigointivalikko ja alivalikko pysyvät kiinteinä vierityksessä
  • Navigointi- ja ala-navigointielementit vievät kaiken vapaan pystysuoran tilan
  • Sisältö-osio käyttää kaiken jäljellä olevan vapaan tilan sivulla ja sillä on vieritettävä alue
• Dynaaminen käyttäytyminen
  • Navigointivalikko näyttää oletusarvoisesti vain kuvakkeet, mutta se voidaan laajentaa näyttämään myös tekstiä (ja voidaan sitten tiivistää näyttämään uudestaan ​​vain kuvakkeet)
• Asettelumuunnelmat
  • Joillakin sivuilla on alivalikko navigointivalikon vieressä ja joillakin ei

CSS-opetusohjelma perinteisten CSS2-tekniikoiden avulla

Ensinnäkin, tässä on HTML5-merkintä, jota käytämme esimerkkitoteutuksessamme perinteisen CSS: n avulla:

z-index

Kiinteä paikannus

CSS2: ssa voimme saavuttaa kiinteät elementit sivulla (otsikko, alatunniste jne.) Käyttämällä kiinteää paikannusta käyttävää sijoittelumallia.

Lisäksi käytämme z-index CSS-ominaisuus sen varmistamiseksi, että kiinteät elementtimme pysyvät sivun muun sisällön päällä. z-index ominaisuus määrittää elementin pinojärjestyksen, jossa suurempi pinon järjestys oleva elementti on aina matalamman pinon järjestyksessä olevan elementin päällä. Huomaa, että z-index omaisuus toimii vain sijoitettu elementtejä. Esimerkissä käytämme mielivaltaisesti width -merkkiä arvo 20 (mikä on oletusarvoa korkeampi) sen varmistamiseksi, että kiinteät elementtimme pysyvät visuaalisesti eturintamassa.

Asetamme myös #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; } ominaisuus 100%: iin, mikä kehottaa selainta käyttämään elementille koko käytettävissä olevaa tilaa vaakasuunnassa.

#nav

OK, joten se on otsikko ja alatunniste. Mutta entä #subnav ja #nav?

CSS-laajennus

#subnav ja top, käytämme hieman kehittyneempää tekniikkaa, joka tunnetaan nimellä CSS-laajennus , jota voidaan käyttää elementtien sijoittamisessa kiinteä (ts. kiinteässä paikassa sivulla) tai kuten ehdoton (ts. määrätyssä paikassa suhteessa lähimpään sijoitettu esivanhempaansa tai sisältävään lohkoon).

Pystysuuntainen laajennus saavutetaan asettamalla molemmat bottom ja left ominaisuudet kiinteään arvoon, joten elementti laajenee pystysuunnassa käyttääksesi jäljellä olevaa pystytilaa vastaavasti. Pohjimmiltaan mitä teet, on elementin yläosan sitominen tietylle etäisyydelle sivun yläosasta ja elementin alaosa tietylle etäisyydelle sivun alaosasta, joten elementti laajenee täyttämään koko pystysuoran tilan näiden kahden pisteen välillä.

Vastaavasti vaakasuuntainen laajentuminen saavutetaan asettamalla molemmat right ja #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; } elementin ominaisuudet kiinteään arvoon, joten elementti laajenee vaakasuunnassa käyttääksesi jäljellä olevaa vaakasuoraa tilaa vastaavasti.

Käyttötapauksessamme meidän on käytettävä vertikaalista laajennusta.

margin

Oletus (staattinen) paikannus

Pääkelattava sisältöalue voi yksinkertaisesti luottaa oletusasentoon (staattiseen), jolloin elementit hahmontuvat järjestyksessä, kun ne näkyvät dokumenttivirrassa. Koska kaikki muu sivullamme on kiinteässä asennossa, tämä elementti on ainoa, joka on dokumenttivirrassa. Tämän seurauksena meidän on vain määriteltävä se, jotta voimme sijoittaa sen oikein #main { margin: 6em 0 4em 20em; } ominaisuuden välttämiseksi päällekkäisyyksien kanssa kiinteän otsikon, alatunnisteen ja nav / subnav:

5em

Tämän lisäksi olemme täyttäneet CSS2: n käyttötapauksemme perusasetteluvaatimukset, mutta dynaamisen toiminnallisuuden lisävaatimukset on silti täytettävä.

Dynaaminen käyttäytyminen klassisten CSS2-tekniikoiden avulla

Vaatimusten mukaan navigointivalikossa näytetään oletusarvoisesti vain kuvakkeet, mutta se voidaan laajentaa näyttämään myös tekstiä (ja sitten se voidaan tiivistää näyttämään jälleen vain kuvakkeet).

Aloitetaan lisäämällä yksinkertaisesti #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } } navigointivalikon leveydelle, kun sitä laajennetaan. Teemme tämän luomalla 'laajennetun' CSS-luokan, jonka voimme lisätä dynaamisesti tai poistaa navigointivalikkoelementistä:

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav’').toggleClass('expanded'); });

Tässä on esimerkki JavaScript-koodista (tässä esimerkissä käytämme jQueryä), jota voidaan käyttää siirtymisvalikossa dynaamisesti laajennetun ja tiivistetyn tilan välillä sen perusteella, että käyttäjä napsauttaa nav-vaihtokuvaketta:

#subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Ja sen avulla nav-valikkomme voi nyt laajentua tai romahtaa dynaamisesti. Loistava.

No, tavallaan hienoa, mutta ei aivan. Vaikka nav-valikko voi nyt laajentua ja supistua, se ei toimi hyvin muun sivun kanssa. Laajennettu nav-valikko on nyt päällekkäinen alikanavan kanssa, mikä ei todellakaan ole toivottu käyttäytyminen.

Tämä paljastaa yhden CSS2: n keskeisistä rajoituksista; nimittäin on tapa liian paljon, joka on koodattava kiinteillä sijaintiarvoilla. Seurauksena on, että muut sivun elementit, jotka on sijoitettava uudelleen laajennetun nav-valikon sijoittamiseksi, on määriteltävä lisäksi 'Laajennetut' CSS-luokat vielä enemmän kiinteän sijainnin arvot.

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

Sitten meidän on laajennettava JavaScript-koodiamme lisäämään myös näiden muiden elementtien dynaaminen säätö, kun käyttäjä napsauttaa nav-kytkintä:

display: none

OK, se toimii paremmin.

Asettelumuunnelmat perinteisillä CSS2-tekniikoilla

Tarkastellaan nyt vaatimusta joidenkin sivujen piilottamisesta alavalikkovalikossa. Erityisesti haluamme, että alivalikkovalikko piilotetaan, kun käyttäjä napsauttaa pääkäyttäjän “käyttäjät” -kuvaketta.

Joten ensin luomme uuden luokan 'piilotettu', joka soveltuu .hidden { display: none; } :

#subnav

Ja vielä kerran käytämme JavaScriptiä (jQuery) 'piilotetun' CSS-luokan soveltamiseen $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); }); elementti, kun käyttäjä napsauttaa käyttäjäkuvaketta:

#subnav

Tämän lisäyksen myötä #subnav elementti piilotetaan oikein, kun käyttäjä napsauttaa 'käyttäjät' -kuvaketta, mutta sen käyttämä tila pysyy käyttämättömänä sen sijaan, että muut elementit laajenisivat käyttämään #subnav: n vapauttamaa tilaa elementti.

Saadaksesi halutun käyttäytymisen, kun piilotamme main elementtimme, käytämme yhtä vähemmän tunnettua, mutta erittäin hyödyllistä CSS-valitsinta, joka tunnetaan nimellä viereisen sisaruksen valitsin .

Vieressä oleva sisarus CSS-valitsin

viereisen sisaruksen valitsin voit määrittää kaksi elementtiä, valitsemalla vain toisen elementin esiintymät, jotka seuraavat välittömästi määritettyä ensimmäistä elementtiä.

Esimerkiksi seuraavassa valitaan vain ne elementit, joiden tunnus on subnav että heti seuraa elementtiä tunnuksella #subnav + #main { margin-left: 20em; } :

#main

Yllä oleva CSS-koodinpätkä asettaa 20em vasemman marginaalin kohteeseen #subnav jos ja vain jos se seuraa välittömästi näytettyä #nav.

Jos expanded on laajennettu (mikä aiheuttaa #main luokan lisäämisen myös #main: een, aikaisemman koodin perusteella), siirrämme #subnav + #main.expanded { margin-left: 25em; } 25em: iin.

#subnav

Ja jos #main on piilotettu, siirrämme #nav vasen marginaali aina 6emiin asti #subnav.hidden + #main { margin-left: 6em; } : n vieressä:

#subnav

(Huomaa: Viereisen sisaruksen valitsimen haittana on, että se pakottaa meidät aina olemaan #subnav läsnä DOM: ssa riippumatta siitä, näytetäänkö sitä vai ei.)

Lopuksi, jos #nav on piilotettu ja #main on laajennettu, asetamme 11em vasemman marginaalin klo #subnav.hidden + #main.expanded { margin-left: 11em; } :

calc()

Tämä antaa meille mahdollisuuden yhdistää asiat yhteen ilman raskasta JavaScript-koodia, mutta voimme myös nähdä, kuinka monimutkainen tämä koodi voi tulla, jos lisäämme sivulle lisää elementtejä. Näemme jälleen kerran, että CSS2: n kanssa paljon aseman arvojen kovakoodaamista tarvitaan, jotta asiat toimisivat kunnolla.

CSS3: n hyödyntäminen

CSS3 tarjoaa huomattavasti parannettuja toimintoja ja asettelutekniikoita, jotka helpottavat sen käyttöä ja ovat vähemmän riippuvaisia ​​kovakoodatuista arvoista. CSS3 on luonnostaan ​​suunniteltu tukemaan dynaamisempaa käyttäytymistä ja on siinä mielessä 'ohjelmoitavampi'. Tarkastellaan joitain näistä uusista ominaisuuksista, jotka liittyvät käyttötapaukseemme.

CSS3 calc() Toiminto

Uusi CSS3 calc() toiminto voidaan käyttää CSS-ominaisuusarvojen laskemiseen dynaamisesti (huomaa kuitenkin tuki vaihtelee selaimissa). +: Lle annettu lauseke Funktio voi olla mikä tahansa yksinkertainen lauseke, jossa yhdistetään aritmeettiset perusoperaattorit (-, *, /, calc()) operaattorin vakio-etusääntöjen avulla.

#nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; } -toiminto voi auttaa välttämään suurta osaa CSS2: n edellyttämien arvojen kovakoodauksesta. Meidän tapauksessamme tämän avulla voimme saavuttaa CSS-laajennuksen dynaamisemmin. Esimerkiksi:

height

Edellä mainituilla calc() määritys käyttämällä top:6em -toiminnon avulla saavutamme saman tuloksen kuin CSS2: ssa parametrilla bottom:4em ja top, mutta paljon joustavammin ja mukautuvammin ja ilman kovakoodaamista bottom ja display sijainti-arvot.

CSS3 Flexbox -asettelu

Flexbox on uusi ulkoasu, joka otettiin käyttöön CSS3: ssa ( tuki vaihtelee eri selaimissa ). Flexbox-asettelun avulla on helpompaa järjestää sivun elementit tavalla, joka käyttäytyy ennakoitavasti eri näytön kooissa, tarkkuuksissa ja laitteissa. Siksi se on erityisen hyödyllinen reagoiva web-suunnittelu .

Tärkeimpiä ominaisuuksia ovat:

• Lapsielementtien sijoittaminen on paljon helpompaa ja monimutkaiset asettelut voidaan saavuttaa yksinkertaisemmin ja puhtaammalla koodilla.
• Lapsielementit voidaan sijoittaa mihin tahansa suuntaan, ja niillä voi olla joustavat mitat sopeutua näyttötilaan.
• Lapsielementit laajentavat sopimusta automaattisesti sopeutuakseen käytettävissä olevaan vapaaseen tilaan.

Flexbox esittelee oman ainutlaatuisen joukon termejä ja käsitteitä. Muutamia näistä ovat:

• Flex-astia. Elementti sen flex ominaisuudeksi on asetettu inline-flex tai flex-directio joka toimii joustavien esineiden konttielementtinä.
• Joustava tuote. Mikä tahansa elementti joustavassa säiliössä. (Huomaa: Joustosäiliöön suoraan sisältyvä teksti kääritään nimettömään joustovälineeseen.)
• Kirveet . Jokaisessa flexbox-asettelussa on a flex-wrap n joka nimeää pääakseli jota pitkin joustavat esineet asetetaan. poikittaisakseli on sitten akseli kohtisuorassa pääakseliin nähden.
• Linjat. Joustavat esineet voidaan sijoittaa joko yhdelle tai useammalle viivalle main size omaisuus.
• Mitat. Flexbox-ekvivalentit korkeudelle ja leveydelle ovat cross size ja .layout-flexbox { display: flex; flex-direction: column; } , jotka määrittelevät vastaavasti joustavan säiliön pääakselin ja poikkiakselin koot.

OK, joten tässä lyhyessä johdannossa tässä on vaihtoehtoinen merkintä, jota voimme käyttää, jos käytämme flexbox-asettelua:

content-area

Esimerkkitapauksessamme pääasettelumme (otsikko, sisältö, alatunniste) on pystysuora, joten asetamme flexboximme käyttämään sarake-asettelua:

#nav

Vaikka pääasettelumme on pystysuora, sisältöalueemme elementit (nav, subnav, main) on sijoitettu vaakasuoraan. Jokainen joustava säiliö voi määrittää vain yhden suunnan (ts. Sen asettelun on oltava joko vaaka- tai pystysuora). Siksi, kun asettelu vaatii enemmän kuin tämä (yleinen tapaus on sovelluksen asettelua varten), voimme sijoittaa useita säiliöitä toistensa sisään, joista jokaisella on erilainen suuntautuminen.

Siksi olemme lisänneet ylimääräisen astian (jota olen kutsunut #subnav) kääreeksi #main, flex ja flex: ;. Tällä tavalla kokonaisasettelu voi olla pystysuora, kun taas sisältöalueen sisältö voidaan sijoittaa vaakasuoraan.

Nyt joustavien kohteidemme sijoittamiseksi aiomme käyttää ominaisuutta flex-grow se on lyhenne sanoista flex-shrink. Nämä kolme taipuisuusominaisuutta määräävät, kuinka joustotuotteemme jakavat niiden välillä jäljellä olevan vapaan tilan virtaussuunnassa seuraavasti:

• joustava kasvu: määrittää, kuinka paljon esine voi kasvaa suhteessa muihin saman säiliön sisällä oleviin joustaviin tuotteisiin
• joustava kutistuminen: määrittää, kuinka kohde voi kutistua muihin säiliön sisällä oleviin joustaviin esineisiin nähden
• joustopohja: määrittää kohteen alkuperäisen koon (ts. ennen kuin se kutistuu tai kasvaa)

Asetus #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; } ja flex-grow molemmat nollaan tarkoittaa, että kohteen koko on kiinteä ja se ei kasva tai kutistu vastaamaan enemmän tai vähemmän vapaata tilaa. Tätä teemme otsikossa ja alatunnisteessa, koska niillä on kiinteä koko:

flex-shrink

Jos haluat kohteen viemään kaiken vapaan tilan, aseta sen flex-basis ja auto arvoksi sekä 1 että asettaa sen content-area arvo display: flex. Tätä teemme sisältöalueelle, koska haluamme, että se vie kaiken vapaan tilan.

Ja kuten totesimme aiemmin, haluamme kohteet flex-direction: row; sijoittaa rivin suuntaan, joten lisäämme #nav; ja #subnav. Tämä tekee sisältöalueesta uuden joustavan säilön kohteille content-area, .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ } ja `#tärkein.

Joten tässä päädymme CSS: lle #nav

#subnav

Sisältöalueella molemmat flex ja #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; } on kiinteät koot, joten asetamme vain overflow-y: hidden omaisuus vastaavasti:

#main

(Huomaa, että olen lisännyt #main { flex: 1 1 auto; overflow-y: auto; } näihin CSS-määrityksiin voittaaksesi kontin korkeuden ylittävän ja ylittävän sisällön. Chrome ei todellakaan tarvitse tätä, mutta Firefox tarvitsee.)

layout-flexbox vie loput vapaan tilan:

layout-classic

Kaikki tämä näyttää hyvältä, joten nyt lisätään tähän dynaaminen käyttäytymisemme ja katsotaan miten se menee.

JavaScript on identtinen aikaisempien kanssa (paitsi tässä määrittelemämme CSS-elementtisäilöluokka on $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); }); taas ennen kuin se oli expanded):

#nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Lisätään display luokka CSS: lle seuraavasti:

fr

Ja voila!

Huomaa, että tällä kertaa meidän ei tarvitse ilmoittaa muille tuotteille leveyden muutoksesta, koska flexbox-asettelu hoitaa kaiken tämän meille.

Ainoa asia, joka jäljellä on, on alalaivaston piilottaminen. Ja arvaa mitä? Se 'toimii' myös ilman muita muutoksia käyttämällä samaa JavaScript-koodia kuin aiemmin. Flexbox tietää vapaasta tilasta ja se saa ulkoasumme toimimaan automaattisesti ilman ylimääräistä koodia. Aika siistiä.

Flexbox tarjoaa myös mielenkiintoisia tapoja keskittää sekä pysty- että vaakasuuntaiset elementit. Ymmärrämme täällä, kuinka tärkeää on, että esityskieli sisältää käsitteen vapaasta tilasta ja kuinka skaalautuvana koodistamme voi tulla tällaisten tekniikoiden avulla. Toisaalta käsitteet ja merkinnät voivat kestää hieman enemmän kuin klassinen CSS.

CSS3-ruudukon asettelu

Jos Flexbox-asettelu on CSS3: n etureunassa, ruudukkoasettelun voidaan sanoa olevan sen vuotavalla reunalla. W3C-määrittely on edelleen luonnostilassa ja on edelleen melko rajoitettu selaintuki . (Se on otettu käyttöön Chromessa kokeellisten Web-alustan ominaisuuksien kautta kromi: // liput ).

En todellakaan pidä tätä luonnosta vallankumouksellisena. Pikemminkin kuin HTML5-suunnitteluperiaatteet osavaltio: 'Kun käytäntö on jo levinnyt tekijöiden keskuudessa, harkitse sen omaksumista sen sijaan, että kieltäisit sen tai keksisit jotain uutta.'

Vastaavasti merkintäpohjaisia ​​ruudukkoja on käytetty pitkään, joten nyt CSS Grid Layout seuraa oikeastaan ​​vain samaa paradigmaa, tarjoten kaikki edut ja paljon muuta esityskerroksessa ilman merkintöjä.

Yleisenä ajatuksena on olla ennalta määritelty, kiinteä tai joustava ruudukkosuunnittelu, johon voimme sijoittaa elementtimme. Kuten flexbox, se toimii myös vapaan tilan periaatteella ja antaa meille mahdollisuuden määritellä sekä pysty- että vaakasuorat 'suunnat' samassa elementissä, mikä tuo etuja koodin koossa ja joustavuudessa.

Ruudukon asettelu esittelee kahden tyyppiset ruudukot; nimittäin, nimenomainen ja implisiittinen . Yksinkertaisuuden vuoksi keskitymme tässä nimenomaisiin ruudukoihin.

Kuten flexbox, Grid-asettelu esittelee oman ainutlaatuisen joukon termejä ja käsitteitä. Muutamia näistä ovat:

• Ruudukkoastia. Elementti sen .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; } ominaisuus asetettu “ruudukoksi” tai “inline-ruudukoksi”, johon sisältyvät elementit asetetaan sijoittamalla ja kohdistamalla ennalta määritettyyn ruudukkoon (eksplisiittinen tila). Ruudukko on leikkaava joukko vaakasuoria ja pystysuoria ruudukkoviivoja, jotka jakavat ruudukkosäiliön tilan ruudukkosoluiksi. Ruudukkoa on kaksi; yksi sarakkeiden määrittelemiseksi ja yksi sen kanssa kohtisuorassa rivien määrittelemiseksi.
• Ruudukko. Kahden vierekkäisen ruudukon välinen tila. Jokaiselle ruudukkoraidalle on määritelty koonmääritystoiminto, joka säätelee, kuinka leveä tai pitkä sarake tai rivi voi kasvaa ja siten kuinka kaukana toisistaan ​​sen rajaavat ruudukko viivat ovat.
• Ruudukko. Kahden vierekkäisen rivin ja kahden vierekkäisen pylväsristikkoviivan välinen tila. Se on pienin ruudukon yksikkö, johon voidaan viitata ruudukon kohteita sijoitettaessa.
• Joustava pituus. display: grid;: Lla määritetty ulottuvuus yksikkö, joka edustaa murto-osaa ritiläsäiliön vapaasta tilasta.

Tässä on vaihtoehtoinen merkintä, jota voimme käyttää, jos käytämme ruudukkoasettelua:

grid-template-columns

Huomaa, että tällä asettelulla me teemme ei tarvitsevat ylimääräisen kääreen sisältöalueelle, kuten teimme flexboxille, koska tämän tyyppinen asettelu antaa meille mahdollisuuden määrittää elementtitilan merkinnät molempiin suuntiin samassa ruudukkosäiliössä.

Kaivetaan nyt CSS: ään:

grid-template-rows

Olemme määrittäneet grid-template-columns: auto 0 auto 1em 1fr; kontillemme. auto ja #nav ominaisuudet määritetään kukin ruudukkoreittien välisten tilojen luettelona. Toisin sanoen nämä arvot eivät ole ruudukkoviivojen sijainti; pikemminkin ne edustavat paljon tilaa kahden raidan välillä.

Huomaa, että mittayksiköt voidaan määrittää seuraavasti:

• pituus
• prosenttiosuus ruudukkosäiliön koosta
• - sarakkeen tai rivin sisällön mittaus, tai
• murto-osa ruudukon vapaasta tilasta

Joten #subnav meillä tulee olemaan:

• 1 kappale määrittelee 2 saraketta auto leveys (#subnav välilyönti)
• 1 0-kouru (1em: n marginaali on elementtitasolla, koska sitä voi olla läsnä tai ei, tällä tavoin vältämme kaksinkertaisen kourun)
• 1 kappale määrittelee 2 saraketta 1fr leveys (#main välilyönti)
• 1 kouru auto
• 1 kappale käyttämällä #nav varten #subnav (vie kaikki jäljellä oleva tila)

Täällä käytämme voimakkaasti grid-template-rows: 5em 1em 1fr 1em 3em; raidan arvo, jonka avulla voimme luoda dynaamisia sarakkeita, joissa viivojen sijainti ja koko määritetään niiden enimmäispitoisuuden perusteella. (Siksi meidän on määritettävä #header ja #footer elementtien koot, minkä teemme pian.)

Vastaavasti riviriveillä meillä on 1em joka asettaa #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; } ja grid-column kiinteät ja kaikki elementit välillä käyttää jäljellä olevaa vapaata tilaa käytettäessä grid-row vesikourut.

Katsotaan nyt, kuinka sijoitamme varsinaiset elementit sijoitettavaksi määriteltyyn ruudukkoon:

grid-column-start

Tämä määrittää, että haluamme otsikkomme olevan ruudukon 1 ja 6 välissä (koko leveys) ja riveillemme ruudukon 1 ja 2 välissä. Sama alatunnisteessa, mutta kahden viimeisen rivin välissä (kahden ensimmäisen sijaan). Ja pääalue on asetettu sopivasti tilalle, jonka sen on tarkoitus käyttää.

Huomaa, että grid-column-end ja grid-row-start ominaisuudet ovat lyhyt kuvaus grid-row-end / #nav ja #subnav / #nav.

OK, palaa sitten #subnav -kohtaan ja #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; } . Koska olemme aiemmin sijoittaneet #nav ja #subnav raiteelle, jossa on automaattiset arvot, meidän on määritettävä, kuinka leveät nämä elementit (sama laajennetussa tilassa, muutamme vain sen leveyttä ja Ruudukkoasettelu huolehtii muusta).

Joten nyt voimme vaihtaa

|_+_|

ja myös piilota / poista

|_+_|

ja kaikki toimivat täydellisesti! Ruudukon asettelu antaa meille myös mahdollisuuden käyttää aliaksia riveillemme, joten lopulta ruudukkojen vaihtaminen ei hajota koodia, koska se on yhdistetty nimeen eikä ruudukkoon. Odotan varmasti, että useat selaimet tukevat tätä laajemmin.

Johtopäätös

Jopa perinteisillä CSS-tekniikoilla voidaan saavuttaa paljon enemmän kuin monet web-kehittäjät ymmärtävät tai hyödyntävät. Suuri osa tästä voi kuitenkin olla melko tylsiä, ja siihen voi liittyä arvojen kovakoodaaminen toistuvasti tyylisivulla.

CSS3 on alkanut tuottaa paljon kehittyneempiä ja joustavampia asettelutekniikoita, jotka on huomattavasti helpompi ohjelmoida ja jotka välttävät paljon aikaisempien CSS-spesifikaatioiden ikävyydestä.

Näiden tekniikoiden ja paradigmojen hallitseminen - sekä CSS2: n että CSS3: n osalta - on välttämätöntä kaiken CSS: n tarjoaman hyödyntämiseksi sekä käyttäjän kokemuksen että koodisi laadun optimoimiseksi. Tämä artikkeli edustaa oikeastaan ​​vain jäävuoren huippua kaikesta, mitä on opittava, ja kaiken, mikä voidaan saavuttaa CSS: n voimalla ja joustavuudella. Pidä siinä!

Liittyvät: * SMACSS: n tutkiminen: skaalautuva ja modulaarinen arkkitehtuuri CSS: lle *