8 State-of-the-Art CSS -ominaisuudet (ja niiden käyttö)

CSS kehittyy jatkuvasti ja jännittäviä uusia ominaisuuksia on lisätty, jotta spesifikaatio olisi vieläkin tehokkaampi ase Web Designerin työkalulla.

CSS Grid ottaa käyttöön uusia tasoja, joita ei ole nähty ennen, mukautetut ominaisuudet esittävät muuttujien käsitteen, kun taas ominaisuus kysely tarkistaa selaimen tukea. Media-kyselyt siirtävät tason uusilla esteettömyysominaisuuksilla, vaihtelevat fontit tarjoavat maksimaalisen luovuuden vähimmäiskoodilla, kun taas vieritysnopeus eliminoi JavaScriptin tarvetta. Tutustu viileään CSS-animaatio Esimerkkejä nähdäksesi, mitä voit luoda. Tai rakentaa sivusto ilman koodia Kokeile näitä Verkkosivuston rakentajat .

Niille, jotka haluavat saada luovaa, on CSS-muotoja ainutlaatuisille ulkoasuille ja useille sekoitustiloihin ja suodattimiin esitellä Photoshop Style Design Effects. Lue, että voit selvittää, miten voit käyttää näitä Täydellisiä ominaisuuksia uusimmissa rakenteissa. Mutta muista, että monimutkainen sivusto tarkoittaa, että tarvitset a sivujen ylläpito palvelu, joka voi tukea tarpeitasi.

01. Mukautetut ominaisuudet

Jos käytät esikäsittelyä, kuten Sass, tai todellakin ohjelmointikieli, kuten JavaScript, et tunne epäilemättä muuttujien käsite - arvot, jotka on määritelty uudelleenkäyttöön koko koodin ajan. Mukautetut ominaisuudet antavat meille mahdollisuuden tehdä tämän CSS: ssä ilman esikäsittelijöiden tarvetta. Muuttujat voidaan asettaa: juuritasolle (luomalla maailmanlaajuisia muuttujia) tai Scoped Select. Niitä voidaan sitten kutsua käyttämällä syntaksia Var (-> - myvariablename). Esimerkiksi voimme asettaa muuttujan --Primarycolor kuten tämä:

 / * juurielementistä (maailmanlaajuinen
muuttuja) * /
: root {
- PRIMARYCOLOR: # F45942;
}
/ * Scoped Selector * /
.my-komponentti {
- PRIMARYCOLOR: # 4171F4;
} 

Nyt voimme käyttää tätä muuttujaa kiinteistöarvona:

 H1 {
Väri: var (- - -Primarycolor);
} 

Mukautetut ominaisuudet ovat perinnöllisiä, joilla on erittäin hyödyllisiä vaikutuksia. Yksi niistä on teemaa. Ota edellä mainittu esimerkki: voimme määritellä maailmanlaajuisen muuttujan (# F45942 - kirkas oranssi punainen) --Primarycolor Juuritasolla, niin jokainen tapaus, jossa käytämme tätä muuttujaa, arvo on punainen. Mutta me myös määrittelemme samaa muuttujaa valitsimessa, jossa on eri arvo (# 4171F4 - keskikokoinen sininen). Joten jokaiseen tapaukseen, jossa käytämme --Primarycolor Muuttuja tässä valitsimessa, laskettu arvo on sininen.

Oletusasetukset

Muuttujien scoping on hieno ominaisuus, mutta se, joka saattaa sinut kiinni tilaisuudessa! Jos yrität käyttää muuttujaa, jota ei ole vielä määritelty, tuloksena oleva arvo putoaa selaimen oletusasetukselle tai perinnölliselle arvolle sen sijaan, että muuttuja määritetään edelleen kaskadiin. Joissakin tapauksissa saattaa olla tarkoituksenmukaista asettaa oletusarvo:

 H1 {
Väri: var (- - -Primarycolor, sininen);
} 

Miten mukautetut ominaisuudet poikkeavat esikäsittelymuuttujilta?

Mukautetut ominaisuudet eroavat esiprosessorimuuttujilta muutamassa keskeisellä tavalla. Preprocessor-muuttujat kootaan ennen kuin koodi lähetetään selaimeen. Selain ei koskaan näe, että arvo on muuttuja, se näkee vain lopputulos. Mukautetut ominaisuudet lasketaan selaimessa. Voit tarkastaa ne nykyaikaisissa kehittäjätyökaluissa, vaihda muuttuja ja katso ratkaistu arvo. Ne ovat dynaamisia muuttujia, joten niiden arvoja voidaan muuttaa CSS: ssä tai Runtime JavaScriptin kanssa.

Toisin kuin esikäsittelymuuttujat, mukautettuja ominaisuuksia ei voi käyttää valitsimissa, kiinteistönäppäimillä tai Media Query -ilmoituksissa - vain CSS-ominaisuusarvot. CSS: n esikäsittelijöillä on vielä runsaasti etuja, joten todennäköisesti näemme ne tarttumaan jonkin aikaa pidempään, mutta ne todennäköisesti käytetään useammin yhdessä mukautettujen ominaisuuksien kanssa.

02. Ominaisuudet Kyselyt

Ominaisuuskyselyt ovat tapa testata, tukee, että selain tukee tiettyjä CSS-kiinteistöarvoa CSS-tiedostossa. Ne poistavat käytännöllisesti katsoen tarvetta ominaisuuksien havaitsemiskirjastoista, kuten modernizr. Syntaksi on samanlainen kuin mediakysely: käytät sääntöjä @supports , jota seuraa omaisuusarvopari, kääriminen koodin suoritettavaksi, jos selain täyttää määritetyt ehdot.

Ominaisuuskyselyt ovat hyvin tuettuja nykyaikaisissa selaimissa, mutta ne ovat suhteellisen uusia, ja yksi "gotcha" on, että jotkin selaimet, joita haluat testata tukea, ei ehkä tue ominaisuus kyselyitä itseään. Usein paras tapa käsitellä tätä on tarjota sisäänkirjautumistyylit ensin (ominaisuuskyselyn ulkopuolella) ja kääri sitten parannukset tukemaan selaimia @supports sääntö.

Ole tietoinen, ominaisuuskyselyt on käytettävä vain säästeliäästi. Yksi CSS: n suurista ominaisuuksista on, että selaimet yksinkertaisesti sivuuttavat kaikki ominaisuudet tai arvot, joita he eivät ymmärrä. On parasta käyttää vain ominaisuuskyselyt, kun et tee niin, mikä aiheuttaisi visuaalisen virheen, muuten voit asettaa itsesi paljon ylimääräistä työtä.

Ominaisuuskyselyiden käyttö

Testata yksi kiinteän omaisuuden arvoa, voimme tarjota ensin takaisin. Tässä esimerkissä tarjoamme flexbox-varjostusta selaimille, jotka eivät tue Grid-asettelua.

 .MY-komponentti {
Näyttö: Grid;
}
@supports (näyttö: Grid) {
.my-komponentti {
Näyttö: Flex;
}
} 

03. Mediakyselyt

Olet todennäköisesti tottunut käyttämään mediakyselyjä näkymän leveyden ja korkeuden havaitsemiseksi ja median tyypin (yleisimmin näytön tai tulostuksen). Taso 5 Media Kyselyt eritelmä tuo meille joitain uudempia mediaominaisuuksia (valinnaisesti) testi, jotka on jo tuettu joissakin selaimissa. Nämä tarjoavat suuria etuja saavutettavuudesta.

Käyttäjät, joilla on vestibulaariset häiriöt, jotka kärsivät liikkumisesta, eivät välttämättä arvosta verkkosivuja paljon liikkeitä, kuten animaatioita ja parallax vieritysvaikutuksia. Käyttämällä mieluummin vähentyneen mediakyselyn avulla voimme tarjota käyttäjille, jotka estävät alennetun vaihtoehdon.

 .MY-elementti {
Animaatio: Ravista 500ms ease-in-out 5;
}
@Media (mieluummin vähentynyt: vähentää) {
.MY-elementti {
Animaatio: Ei mitään;
}
} 

Se on yhä suosittu verkkosivustoille, jotka tarjoavat vaihtoehtoisen tumman teeman. Prefersin värejä-järjestelmä antaa meille mahdollisuuden kyseenalaistaa, onko käyttäjä asettanut järjestelmän laajan etusijalle (käyttämällä avainsanoja tummaa, valoa tai ei-asetusta) ja näytä sopiva värijärjestelmä vastaavasti.

 / * Mediakyselyt 02 * /
elin {
Taustaa: Linear-gradientit (to
pohja, # b5faff, # FFE2B4);
}
@Media (mieluummin-väriaine: tumma) {
elin {
väri valkoinen;
Taustaa: Linear-gradientit (to
Pohja, # 0C1338, # 3E3599);
}
} 

04. Muuttuvat fontit

Yleensä, jos haluamme sisällyttää useita eri fontteja samasta perheestä verkkosivuillamme, meidän on ladattava sama määrä fonttitiedostoja. Mitä enemmän fonttitiedostoja, joita lataat, sitä enemmän painoa lisäät sivullesi, mikä vaikuttaa suorituskykyyn - joten yleensä viisas ladata enintään kolme tai neljä fonttitiedostoa (suorituskyvyn budjetista riippuen).

Muuttuvat fontit vaihtavat kaiken. Ne antavat meille mahdollisuuden ladata yhden fonttitiedoston koko fonttiperheelle. Vaikka tämä tiedosto on yleensä suurempi kuin yksi fontti, jos haluat hyödyntää eri painoja ja tyylejä, niin muuttuva fontti on enemmän esitysratkaisu. Jos olet ostanut koko fonttiperheen, muista siepata se turvallisesti pilvivarasto Joten et menetä tiedostoja!

Vaihto-akseli

Ei vain, mutta muuttuvilla fonteilla, emme ole rajoittuneet pieneen fontin painoihin. Säännöllisten fonttien yhteydessä käytettävissä olevat fonttimaksut annetaan 100: ssä. Tyypillisesti 400 voi olla säännöllinen paino, 300 kevyt paino ja 700 lihavoitu painoa - eri perheillä, jotka toimittavat enemmän painoja tai vähemmän. Muuttuvilla fonteilla on vaihteluväli, joka antaa meille erilaisia ​​arvoja ominaisuuksille, kuten fontin paino. Fontilla voi olla 1-900 akseli, joka tarjoaisi meille pääsyn 900 erilaiseen painoon!

Muutoksen akseli ei ole vain rajoitettu painoon. Muuttuvilla fonteilla voi olla erilaisia ​​akseleita x-korkeudelle, kalteville, serif-pituisille ja kontrastille (vain muutamia esimerkkejä) - tarkoittaa, että yksi fonttitiedosto voi antaa meille pääsyn satoihin tai jopa tuhansiin muunnelmiin! Voisimme jopa animoida nämä ominaisuudet, jolloin voimme saavuttaa todella hienoja vaikutuksia. Mandy Michael ( https://codepen.io/mandymichael ) Onko koko luovia demoja, jotka todella testaavat rajoja.

Selaimen tuki muuttuvien fonttien on melko hyvä, ja monet fonttivalimot kehittävät aktiivisesti uusia muuttuvia fontteja, joita voit aloittaa nyt - vaikka nämä usein tulevat palkkioon, varsinkin täydellisempään fonttiperheisiin. Jos haluat vain aloittaa pelaamisen vaihtelevilla fontteilla nähdäksesi, mitä he voivat tehdä, on olemassa useita muuttuvia fontti-leikkikentälle:

Huomaa, jos haluat käyttää muuttuvia fontteja juuri nyt sinun on varmistettava, että käytät ajantasaista käyttöjärjestelmää - ne eivät toimi vanhemmalla OSS: ssä.

Fontti-muunnelman asetukset

Vaikka voimme muuttaa fontin painoa tarpeeksi helposti fonttipaino CSS-ominaisuus, Fontti-muunnelman asetukset on uusi omaisuus, joka antaa meille täyden pääsyn fontin erilaisiin vaihteluvälineisiin. Näihin kuuluvat sekä rekisteröidyt akselit että mukautetut akselit.

Rekisteröityjä akseleita

Viisi erilaista rekisteröityä akselia, jotka vastaavat erilaisia ​​CSS-ominaisuuksia. Jokaisella näistä on mitä kutsutaan "Axis Tag". Rekisteröityjä akseleita ovat: wght (fonttipaino), wdth (font-stretch), slnt (Font-tyyli: vino / kulma), italia (Font-tyyli: kursiivi), opsz (fontti optinen mitoitus). Voimme käyttää näitä akseleita joko CSS-kiinteistössä tai Fontti-muunnelman asetukset .

Nämä akselit eivät välttämättä ole kaikki mukana jokaisessa muuttuvassa fontissa (joillakin voi olla vain yksi tai kaksi akselia), mutta ne ovat todennäköisesti yleisimpiä.

Mukautetut akselit

Mukautetut akselit ovat fonttisuunnittelijan sisältämät räätälöidyt akselit ja voi olla mitä tahansa. Ne voivat sisältää (esimerkiksi) serif pituuden, X-korkeuden, jopa jotain luovaa (ja vähemmän typografisesti tyypillistä), kuten kierto.

Molemmat akselit on ilmaistava neljänmeren tunnisteeksi. Rekisteröityjen akseleiden on oltava pieniä kirjaimia, kun taas mukautetut akselit ovat isoja kirjaimia. Molemmat voidaan yhdistää fontti-muunnelman asetusominaisuuksiin. Fontti-muunnelmat-asetukset ovat animaatiota, mikä voi sallia joitakin erittäin viileitä UI-vaikutuksia! Jotkut erittäin mielenkiintoiset kokeet on tuotettu myös kuvakefonttien avulla.

05. Graafiset vaikutukset

Jos olet perehtynyt suunnittelutyökaluihin, kuten Photoshop ja Illustrator, saatat olla tietoinen sekoitustilasta ja siitä, miten niitä voidaan käyttää erilaisten vaikutusten tuottamiseen kuviin. Tavoitteen yhdistelmät toimivat kaksi tai useampia kerroksia yhdessä käyttäen matemaattisia kaavoja laskemaan tuloksena olevan arvon jokaiselle pikselille. Kerrokset voivat olla mitään - kuvia, kaltevuuksia tai tasaisia ​​värejä. Jotkin sekoitustilat tuottavat tummennen tuloksen (esim. Kerro, mikä kertoo kerrosten pikseliarvot), jotkut kevyemmät (esim. Näyttö ja peitto). Meidän ei tarvitse ymmärtää matematiikkaa, jotta niitä voidaan käyttää. Eri sekoitusmoodien pelaaminen voi antaa meille hyvän tunnelman, josta heistä tuottavat halutut tulokset yhdistettynä eri kerroksiin.

CSS-ominaisuuksien kanssa MIX-BLEND-tila ja Tausta-Blend-tila , voimme saavuttaa Photoshopin kaltaiset kuvanvaikutukset selaimessa. Molemmat ominaisuudet ovat samat arvot, mutta työskentelevät hieman eri tavalla.

Tausta-Blend-tila

Tausta-Blend-tila Sekoita yhdessä kohdistamamme taustakerrokset. Meidän elementtimme voi olla taustakuvia, värejä ja kaltevuuksia, ja ne kaikki sekoitetaan toistensa kanssa vaikuttamatta etualan sisältöön. Voimme määrittää useita arvoja Tausta-Blend-tila , yksi jokaiselle taustakerrokselle.

 .MY-elementti {
Taustaa: URL (#MYURL),
Linear-gradientti (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Tausta-koko: kansi;
Tausta-Blend-tila: näyttö,
kerro;
} 

MIX-BLEND-tila

MIX-BLEND-tila vaikuttaa siihen, miten elementti sekoittuu vanhemmansa ja sen sisarustensa kanssa, mukaan lukien kaikki etualan ja taustasisällön sekä pseudo-elementit. Joitakin mielenkiintoisia luovia vaikutuksia voidaan saavuttaa sekoittamalla päällekkäisiä pseudo-elementtejä (:: Ennen ja:: jälkeen).

 .MY-elementti {
Taustaa: RGB (244, 65, 106);
Mix-Blend-tila: Kerro;
} 

CSS-suodattimet

CSS-suodattimia voidaan käyttää myös luomaan silmiinpistäviä visuaalisia vaikutuksia käyttäen suodattaa Kiinteistö- ja suodatinfunktion arvot. Toisin kuin sekoitustilat, ne soveltavat graafisen vaikutuksen suoraan kohdistamaan elementtiin, ja elementillä voi olla useita suodattimia.

Muunna harmaasävy

Voimme manipuloida elementin värejä, joilla on suurempi valvonta kuin seisoosat. Suodattimet voivat muuntaa kuvan harmaaseen, säätää kirkkautta, kontrastia ja kylläisyyttä, hämärtää elementtiä tai lisätä pudotusvarjon. Ne voivat myös olla myös animoituja ja näyttävät hyvältä hover vaikutuksella.

SVG-suodattimet

CSS-suodattimet ovat tosiasiassa yksinkertaistettuja SVG-suodattimien versioita. CSS suodattaa Omaisuus myös vie URL () Toiminto, jolloin voimme siirtyä URL-osoitteeseen SVG-suodattimeen. SVG-suodattimet ovat erittäin tehokkaita ja sallivat joitakin uskomattomia kuvavaikutuksia - mutta ne ovat myös paljon monimutkaisempia kuin CSS-suodatinfunktiot! Sara Soueidanilla on upea artikkeli sarjoja koodereita, jos olet kiinnostunut sukelluksesta koodaamaan omia Custom SVG -suodattimia. Tutustu artikkeliin osoitteessa https://tympanus.net/codrops/2019/01/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15/15

Leikkaaminen ja peittäminen: suorakulmioiden lisäksi

Olemme tapana käsitellä laatikot verkossa, mutta kaikki ei ole suorakulmainen! Leikkaaminen ja peittäminen ovat saman kolikon kaksi sivua ja ovat erilaisia ​​tapoja piilottaa ja näyttää eri osia elementistä niin, että tausta näkyy läpi. Tämä antaa meille voiman ottaa käyttöön mielenkiintoisia ja luovia muotoja malleillemme.

Leike

The Clip-polku () Kiinteistöjen avulla voimme "leikata" elementin määrittelemällä polun. Se vie useita perusmuototoimintoja, Inset (), ympyrä (), ellipsi () tai monikulmio () , joka antaa meille mahdollisuuden käsitellä monimutkaisempia katkaisuja muotoja käyttäen XY-koordinaatteja polun määrittämiseksi. Vaihtoehtoisesti voimme myös siirtää SVG-polun avulla polku () toiminto tai käyttäminen URL () SVG-polun tunnus.

Ei polun sisällä

Alkupyörän leikkaaminen kaikkiin määrittämäsi polun ulkopuolella, mutta elementti itsessään on edelleen suorakulmio. Jos sinulla on sisältöä, joka ulottuu leike polun rajasta, myös leikataan - se ei kääri muotoon.

Naamiokuva

naamiokuva Voit näyttää ja piilottaa kuvan osia kuvan (SVG tai läpinäkyvä PNG) tai gradientin naamiona. Toisin kuin leike , voimme lisätä tekstuurimme kuvioihimme peittämällä, koska maskinlähteen ei tarvitse olla polku - se mahdollistaa avoimuuden asteet.

06. CSS-muodot

CSS-muodot Specification ansiosta voimme kääriä tekstin kelluisille geometrisille muodoille, mikä luo mielenkiintoisia, aikakauslehtiä. Tämä on mahdollista käyttää muotoinen Omaisuus. Samanlainen kuin leike , voimme antaa tämän ominaisuuden perusmuototoiminnon ympyrä (), ellipsi (), inset (), monikulmio () tai URL-osoite SVG-polulle ja itse asiassa kaksi työtä harmoniassa hyvin! muotoinen Kääri tekstin tehokkaasti, mutta se ei vaikuta kellumaan elementtiin. Jos haluamme, että teksti näyttää siltä, ​​että se kääree kuvan tai kelluidun esineen ympärillä, voimme käyttää samaa arvoa leike . Käyttää muoto-marginaali Lisää välilyöntiä muotomuodon ja sen sisällön väliin. Katsokaa Stuff & amp; Hölynpöly Sivusto nähdä, miten CSS-muotoja käytetään kääritään tekstin ympärille keskuskuvaan.

Firefoxilla on a Shape-Path Editor Dev Tools-paneelissa, joka on erityisen hyödyllinen monimutkaisten muotojen kanssa. Käytä kuitenkin varoen. Tekstin kappaleen etureunan kääriminen on erinomainen taiteelliselle vaikutukselle, mutta se ei ole aina suuri käyttäjäkokemukselle. Monimutkaiset jagged muodot voivat tehdä tekstin lohkoja lukemaan. Tärkeä sisältö, voit halutessasi ohjata selkeää.

07. Scroll Snapping

Monet sivustot hyödyntävät JavaScript-kirjastoja, jotka tarjoavat liukas, natiivin App-kaltaisen vierityskokemuksen, jossa sisältö "napsahtaa" pisteisiin käyttäjän rullaksi. Nyt Scroll Snap -määrittelyssä voimme tehdä tämän oikein CSS-tiedostomme - siellä on vähän tarvetta tuoda raskas JS-moduulit pudota sivusi!

Voit toteuttaa vieritys-snappingin tarvitsemme elementin toimimaan vierityspakkauksemme. Säiliön suorat lapset sanovat pisteitä, jotka puretaan, ja ne voidaan kohdistaa eri tavoin nopeudella.

Scroll Snapping voi olla entistä tehokkaampi yhdistettynä toiseen uusiin CSS-kiinteistöarvoon - Paikka: tahmea . Tämä asennon arvo "tarttuu" elementtiin määritettyyn asentoon vierittämällä säiliössään - toinen käyttäytyminen, joka oli aiemmin mahdollista vain JavaScriptin kanssa. Tutustu tähän vieritysvaiheeseen asentoon: Sticky ja IntersectionObserver Esimerkki .

08. CSS-verkko ja ulkoasut

Etupään kehittäjät ovat hakkeroitu asettelu millä tahansa työkaluilla käytettäviksi tällä hetkellä - viimeksi Flexbox, jossa on paljon moderneja verkkojärjestelmiä. Mutta Flexboxia ei koskaan suunniteltu rakentamaan tiukkoja verkkoja - sen tarkoitus on joustavuus!

CSS-verkko on ensimmäinen eritelmä, joka on suunniteltu kaksiulotteiselle ulkoasuun, jolloin meillä on täydellinen ohjaus asettelun rakentamiseen ja kohteiden sijoittamiseen sekä riviin että sarakkeen akseliin. Ristiriitaisen asettelun rakentaminen verkkoon ei vaadi lasketta () tai hakkerointia negatiivisilla marginaaleilla. Salainen ase on FR-yksikkö - uusi yksikkö yksinomaan verkkoon. FR-yksikkökokoja ruudukko (rivit ja sarakkeet) suhteessa käytettävissä olevasta tilasta. Se ottaa huomioon kaikki kiinteät kappaleet, kourut ja sisältö ja jakaa jäljellä olevan tilan vastaavasti. Jen Simmons loi termi "Incinsic web design" kuvaamaan uuden aikakauden verkkoasettelun, joka risti ushers in.

Kuinka käyttää CSS-verkkoa

Grid vaatii elementin, jossa on näyttö ominaisuusarvo, joka on asetettu verkkoon, toimimaan ruudukkoastiaksi. Verkkosäiliön suorat lapset ovat kohteita, jotka voidaan sijoittaa verkkoon. Käytämme ominaisuuksia Grid-template-rivit ja Grid-template-sarakkeet määritellä ristikon kappaleet (rivit ja sarakkeet) ja sarake ja rivi Määritä vesikourut (raidien väliset aukot).

 .grid {
Näyttö: Grid;
Ruudukko-template-sarakkeet: Toista (4, 1FR);
Grid-template-rivit: toista (4, 200px);
Gap: 20px;
} 

Käytämme toistaa() Toiminto pitää koodin yhä tiivisnä, vaihtoehtona pitkäaikaiselle (esim. Grid-Template-sarakkeet: 1FR 1fr 1fr 1fr 1fr ). Tämä esimerkki käyttää myös lyhyttä kuilu varten rivi ja sarake .

Yllä oleva koodi antaa meille neljä riviä kappaletta, jokainen 100px korkea ja neljä sarakkeen kappaletta, jotka täyttävät yhtä suuren osan käytettävissä olevasta tilasta FR-yksiköllä.

On syytä huomata, että tämä ei ole ainoa tapa luoda verkkoruutuja. Myös implisiittiset kappaleet voidaan luoda asettamalla ruudukkotuotteet. On hyödyllistä lukea hieman tästä, jos käytät verkkoa, koska se maksaa syvemmän ymmärryksen siitä, miten verkko käyttäytyy eri olosuhteissa ja voi tehdä koodaamisen laajempaa.

Voimme sijoittaa kohteita verkkoon viittaamalla ruudukkojen rivinumeroita, jotka ovat numeerisia linjoja, jotka istuvat kunkin radan välillä. Tässä käytämme lyhyttä Grid-sarake ja ruudukko varten Grid-Column-Start , Grid-Column-End , Grid-ROW-START ja Grid-ROW-End . Nämä kertovat selaimesta, jossa kohteen pitäisi alkaa ja päätettävä jokaiseen akseliin.

 .item {
Grid-sarake: 1/4;
Grid-rivi: 2;
} 

Grid tarjoaa meille monia eri tapoja asettaa esineitä: voisimme nimetä verkkoyksiköt:

 .grid {
Näyttö: Grid;
Grid-Template-sarakkeet: [Image-Start] 1FR
 1fr 1fr [image-start] 1Fr;
Grid-template-rivit: 200px [image-start]
 200px 200px [image-end] 200px;
Gap: 20px;
} 

Vaihtoehtoisesti Grid-template-alue Kiinteistö antaa meille "piirtää" grid-asettelu tekstillä.

 .grid {
Näyttö: Grid;
Ruudukko-template-sarakkeet: Toista (4, 1FR);
Grid-template-rivit: toista (4, 200px);
Gap: 20px;
Grid-template-alueet:
". . . . "
"Kuvan kuva kuva".
"Kuvan kuva kuva".
". . . . ';
} 

Käyttämällä jompikumpi näistä menetelmistä voimme vain viitata vastaavan verkkoalueen, kun asetat verkko-kohteen:

 .kuva {
Grid-alue: kuva;
} 

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Osta nyt numero 290.

• 10 parasta CSS-kehystä vuonna 2019
• Kuinka lisätä Animaatio SVG: lle CSS: llä
• 52 Web-suunnittelutyökalut, joiden avulla voit työskennellä älykkäämpiä vuonna 2019