8 uusinta CSS-ominaisuutta (ja miten niitä käytetään)

Huipputason CSS
(Kuvan luotto: Getty Images)

CSS kehittyy jatkuvasti ja joukko jännittäviä uusia ominaisuuksia on lisätty, jotta spesifikaatiosta tulee entistäkin tehokkaampi ase verkkosuunnittelijan työkalupaketissa.

CSS Grid vie asettelut uusille tasoille, joita ei ole ennen nähty, mukautetut ominaisuudet esittävät muuttujien käsitteen, kun taas ominaisuuskyselyt tarkistavat selaintuen. Mediakyselyt nousevat tasolle uusien esteettömyysominaisuuksien kanssa, vaihtelevat fontit tarjoavat maksimaalisen luovuuden ja koodin vähäisen paisumisen, kun taas vierityksen napsautus poistaa JavaScriptin tarpeen. Tutustu hienoon CSS-animaatio esimerkkejä siitä, mitä voit luoda. Tai kokeile näitä rakentaaksesi sivuston ilman koodia verkkosivujen rakentajat .



miten päästä taidekouluun

Niille, jotka haluavat olla luovia, on CSS-muodot ainutlaatuisille asetteluille sekä joukko sekoitustiloja ja suodattimia Photoshop-tyylisten suunnittelutehosteiden esittelemiseksi. Lue lisää siitä, miten voit käyttää näitä välttämättömiä ominaisuuksia uusimmissa rakennelmissasi. Mutta muista, että monimutkainen verkkosivusto tarkoittaa, että tarvitset sivujen ylläpito palvelu, joka voi tukea tarpeitasi.



01. Mukautetut ominaisuudet

Jos olet käyttänyt esiprosessoria, kuten Sass, tai itse ohjelmointikieliä, kuten JavaScriptiä, olet varmasti perehtynyt muuttujien käsitteeseen - arvot, jotka on määritelty uudelleenkäyttöä varten koko koodissasi. Mukautettujen ominaisuuksien avulla voimme tehdä tämän CSS: ssä ilman esiprosessoreita. Muuttujat voidaan asettaa: juuritasolle (luoda globaaleja muuttujia) tai laajentaa valitsimen sisällä. Niitä voidaan sitten kutsua syntaksin avulla var (- & rsaquo; -myVariableName). Voimme esimerkiksi asettaa muuttujan nimeltä --primaryColor kuten tämä:

/* On the root element (a global variable) */ :root { -​-primaryColor: #f45942; } /* Scoped to a selector */ .my-component { -​-primaryColor: #4171f4; }

Nyt voimme käyttää kyseistä muuttujaa ominaisuusarvona:



h1 { color: var(-​-primaryColor); }

Mukautetut ominaisuudet peritään, millä on erittäin hyödyllisiä vaikutuksia. Yksi niistä on teemalla. Otetaan yllä oleva esimerkki: Voimme määrittää globaalin muuttujan (# f45942 - kirkkaan oranssinpunainen) --primaryColor juuritasolla, joten jokaisessa esimerkissä, jossa käytämme tätä muuttujaa, arvo on punainen. Mutta määritämme uudelleen myös saman muuttujan valitsimessa eri arvolla (# 4171f4 - keskisininen). Joten jokaisessa tapauksessa, jossa käytämme --primaryColor muuttujan sisällä, laskettu arvo on sininen.

Oletusten asettaminen

Muuttujien laajuus on hieno ominaisuus, mutta sellainen, joka saattaa sinut kiinni toisinaan! Jos yrität käyttää muuttujaa, jota ei ole vielä määritelty, tuloksena oleva arvo laskee takaisin selaimen oletusarvoon tai perittyyn arvoon sen sijaan, että muuttuja määritettäisiin edelleen kaskadissa. Joissakin tapauksissa voi olla tarkoituksenmukaista asettaa oletusarvo:

h1 { color: var(-​-primaryColor, blue); }

Kuinka mukautetut ominaisuudet eroavat esiprosessorin muuttujista?

Mukautetut ominaisuudet eroavat esiprosessorin muuttujista muutamalla keskeisellä tavalla. Esiprosessorimuuttujat kootaan ennen koodisi lähettämistä selaimelle. Selain ei koskaan näe, että arvo on muuttuja, se näkee vain lopputuloksen. Mukautetut ominaisuudet lasketaan selaimessa. Voit tarkastaa ne nykyaikaisissa kehitystyökaluissa, muuttaa muuttujaa ja nähdä ratkaistun arvon. Ne ovat dynaamisia muuttujia, eli niiden arvoja voidaan muuttaa CSS: ssä tai ajon aikana JavaScriptin avulla.



Toisin kuin esikäsittelijän muuttujat, mukautettuja ominaisuuksia ei voida käyttää valintanimissä, ominaisuusavaimissa tai mediakyselyilmoituksissa - vain CSS-ominaisuusarvoissa. CSS-esiprosessoreilla on vielä paljon etuja, joten todennäköisesti näemme niiden olevan kiinni jonkin aikaa, mutta todennäköisesti niitä käytetään useammin yhdessä mukautettujen ominaisuuksien kanssa.

02. Ominaisuuskyselyt

Ominaisuuskyselyt ovat tapa testata, tukeeko selain tiettyä CSS-ominaisuus-arvoyhdistelmää CSS-tiedostossasi. Ne käytännöllisesti katsoen tarvitsevat ominaisuusentunnistuskirjastoja, kuten Modernizr. Syntaksi on samanlainen kuin mediakysely: Käytät at-sääntöä @support , jota seuraa omaisuus-arvo-parisi, käärimällä suoritettava koodi, 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, jotka haluat ehkä testata tueksi, eivät välttämättä tue itse ominaisuuskyselyjä. Usein paras tapa käsitellä tätä on tarjota ensin palautustyylit (ominaisuuskyselyn ulkopuolella) ja sitten kääri lisäosat selainten tukemiseksi @support sääntö.

Huomaa, että ominaisuuskyselyjä on käytettävä vain säästeliäästi. Yksi CSS: n hienoista ominaisuuksista on, että selaimet yksinkertaisesti jättävät huomiotta kaikki ominaisuudet tai arvot, joita he eivät ymmärrä. On parasta käyttää ominaisuuskyselyjä vain, jos se ei aiheuta visuaalista virhettä, muuten voit asettaa itsesi paljon ylimääräistä työtä varten.

CSS-ominaisuuskyselyt - caniuse.com

Tarkista caniuse.com-verkkosivustolta, että selain tukee ominaisuuskyselyjä(Kuvan luotto: caniuse.com)

Kuinka käyttää ominaisuuskyselyjä

Yhden ominaisuusarvon tuen testaamiseksi voimme tarjota ensin varakuvan. Tässä esimerkissä tarjoamme flexbox-varavoiman selaimille, jotka eivät tue ruudukkoasettelua.

.my-component { display: grid; } @supports (display: grid) { .my-component { display: flex; } }

03. Mediakyselyt

Olet todennäköisesti tottunut käyttämään mediakyselyjä havaitsemaan näkymän leveyden ja korkeuden sekä mediatyypin (yleisimmin näyttö tai tulostus). Tason 5 Media Queries -määrittely tuo meille (valinnaisesti) testattavia uudempia mediaominaisuuksia, joita joissakin selaimissa jo tuetaan. Nämä tarjoavat joitain suuria etuja saavutettavuudelle.

Käyttäjät, joilla on vestibulaarisia häiriöitä, ja ne, jotka kärsivät liikesairaudesta, eivät ehkä pidä arvosta paljon liikettä sisältäviä verkkosivuja, kuten animaatioita ja parallaksirullaustehosteita. Pienemmällä liikkeellä olevan mediakyselyn avulla voimme tarjota käyttäjille, jotka eivät halua käyttää rajoitetun liikkeen vaihtoehtoa.

.my-element { animation: shake 500ms ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; } }

Sivustojen on yhä suositumpi tarjota vaihtoehtoinen tumma teema. Prefers-colors-scheme antaa meille mahdollisuuden kysyä, onko käyttäjä asettanut järjestelmän laajuisen mieltymyksen (käyttämällä avainsanoja tumma, vaalea tai ei-etusija), ja näyttää sopiva värimalli vastaavasti.

/* Media queries 02 */ body { background: linear-gradient(to bottom, #b5faff, #ffe2b4); } @media (prefers-color-scheme: dark) { body { color: white; background: linear-gradient(to bottom, #0c1338, #3e3599); } }

04. Muuttuvat fontit

Muuttavat fontit

Katso Axis-Praxis, verkkosivusto, jolla voi pelata OpenType Variable -fontteilla(Kuvan luotto: AxisPraxis)

Yleensä, jos haluamme sisällyttää verkkosivustollemme useita saman perheen fontteja, meidän on ladattava sama määrä fonttitiedostoja. Mitä enemmän fonttitiedostoja lataat, sitä enemmän painoa lisätään sivullesi, mikä vaikuttaa suorituskykyyn - joten on yleensä viisasta ladata enintään kolme tai neljä fonttitiedostoa (suorituskykybudjetistasi riippuen).

Muuttuvat fontit muuttavat kaikkea sitä. Niiden avulla voimme ladata yhden kirjasintiedoston koko kirjasinperheelle. Vaikka tämä tiedosto on yleensä suurempi kuin yksi kirjasin, jos haluat hyödyntää erilaisia ​​painoja ja tyylejä, muuttuja fontti on tehokkaampi ratkaisu. Jos olet ostanut kokonaisen kirjasinperheen, muista säilyttää se turvallisesti pilvitallennus jotta et menetä tiedostojasi!

mikä on Google-dioiden koko

Vaihteluakseli

Paitsi että muuttuvilla kirjasimilla emme ole rajoittuneet pieneen osaan kirjasinten painoja. Kun työskentelet tavallisten kirjasinten kanssa, käytettävissä olevat kirjasinpainot ilmoitetaan 100: n kerrannaisina. Tyypillisesti 400 voi olla tavallinen paino, 300 kevyt paino ja 700 rohkea paino - eri perheiden toimittamalla enemmän tai vähemmän. Muuttuvilla kirjasimilla on vaihteluakseli, joka antaa meille arvon arvoja ominaisuuksille, kuten fontin paino. Fontin akseli voi olla 1–900, mikä antaisi meille pääsyn 900 eri painoon!

Vaihteluakseli ei rajoitu vain painoon. Muuttuvilla kirjasimilla voi olla eri akselit x-korkeudelle, vinolle, serif-pituudelle ja kontrastille (vain muutama esimerkki) - mikä tarkoittaa, että yksi kirjasintiedosto voi antaa meille pääsyn satoihin tai jopa tuhansiin muunnelmiin! Voisimme jopa animoida nämä ominaisuudet, jotta voimme saavuttaa todella hienoja vaikutuksia. Mandy Michael ( https://codepen.io/mandymichael ) on koko joukko luovia demoja, jotka todella testaavat rajoja.

Selaimen tuki muuttuville kirjasimille on melko hyvä, ja monet kirjasinten valimot kehittävät aktiivisesti uusia muuttuvia fontteja, joita voit aloittaa nyt - vaikkakin nämä ovat usein ensiluokkaisia ​​etenkin täysin varustelluille kirjasinperheille. Jos haluat vain aloittaa pelaamisen vaihtelevilla kirjasimilla nähdäksesi, mitä he voivat tehdä, on olemassa useita muuttuvan fontin leikkipaikkoja:

Huomaa, että jos haluat käyttää muuttuvia fontteja juuri nyt, sinun on varmistettava, että käytät päivitettyä käyttöjärjestelmää - ne eivät toimi vanhemmissa käyttöjärjestelmissä.

Font-variation-settings

Vaikka voimme muuttaa fontin painoa riittävän helposti fontin paino CSS-ominaisuus, font-variation-settings on uusi ominaisuus, joka antaa meille täyden pääsyn fontin eri muunnosakseleihin. Näihin kuuluvat sekä rekisteröidyt akselit että mukautetut akselit.

Rekisteröidyt akselit

Rekisteröityjä akseleita on viisi, jotka vastaavat erilaisia ​​CSS-ominaisuuksia. Jokaisella näistä on ns. Akselimerkki. Rekisteröityjä akseleita ovat: wght (fontin paino), wdth (font-stretch), OVAT (kirjasintyyli: vino / kulma), juoda (kirjasintyyli: kursiivi), opsz (fontin optinen mitoitus). Voimme käyttää näitä akseleita joko CSS-ominaisuudella tai font-variation-settings .

Nämä akselit eivät välttämättä sisälly kaikkiin muuttujan kirjasimiin (joillakin voi olla vain yksi tai kaksi akselia), mutta ne ovat todennäköisesti yleisimpiä.

Mukautetut akselit

Mukautetut akselit ovat kirjasinsuunnittelijan sisällyttämiä räätälöityjä akseleita, ja ne voivat olla mitä tahansa. Ne voivat sisältää (esimerkiksi) serifin pituuden, x-korkeuden, jopa jotain luovempaa (ja vähemmän typografisesti tyypillistä), kuten kierto.

Molemmat akselityypit on ilmaistava nelimerkkisenä tunnisteena. Rekisteröityjen akseleiden on oltava pieniä, kun taas mukautetut akselit ovat isoja. Molemmat voidaan yhdistää font-variation-settings -ominaisuuteen. Font-variation-settings on animoitava, mikä voi sallia joitain erittäin hienoja käyttöliittymätehosteita! Myös mielikuvakirjasimilla on tuotettu joitain mielenkiintoisia kokeita.

05. Graafiset tehosteet

CSSgram - pieni kirjasto Instagram-suodattimien luomiseen

CSSgram on pieni kirjasto Instagram-suodattimien luomiseen(Kuvan luotto: CSSGram)

Jos olet perehtynyt suunnittelutyökaluihin, kuten Photoshop ja Illustrator, saatat olla tietoinen sekoitustiloista ja siitä, miten niitä voidaan käyttää erilaisten kuvatehosteiden tuottamiseen. Sekoitustilojen toimintatapa on sekoittaa kaksi tai useampia kerroksia yhteen matemaattisten kaavojen avulla laskemaan tuloksena oleva arvo kullekin pikselille. Tasot voivat olla mitä tahansa - kuvia, kaltevuuksia tai tasaisia ​​värejä. Jotkut sekoitustilat tuottavat tummemman tuloksen (esim. Kerro, joka kertoo kerrosten pikseliarvot), toiset vaaleamman (esim. Näyttö ja päällekkäisyys). Meidän ei kuitenkaan tarvitse ymmärtää matematiikkaa voidaksemme käyttää niitä. Eri sekoitustilojen kanssa pelaaminen voi antaa meille hyvän tuntuman siitä, kumpi niistä tuottaa halutut tulokset yhdistettynä eri kerroksiin.

CSS-ominaisuuksien kanssa sekoita-sekoita-tila ja tausta-sekoitustila , voimme saavuttaa Photoshopin kaltaiset kuvatehosteet selaimessa. Molemmat ominaisuudet ottavat samat arvot, mutta toimivat hieman eri tavalla.

kuinka tehdä säteittäisiä viivoja kuvittajaan

Tausta-sekoitustila

Tausta-sekoitustila yhdistää kohteena olevan elementin taustakerrokset. Elementissämme voi olla taustakuvia, värejä ja kaltevuuksia, ja ne kaikki sekoitettaisiin toisiinsa vaikuttamatta etualan sisältöön. Voimme määrittää useita arvoja kohteelle tausta-sekoitustila , yksi jokaiselle taustakerrokselle.

.my-element { background: url(#myUrl), linear-gradient(45deg, rgba(65, 68, 244, 1), rgba(203, 66, 244, 0.5)), rgba(244, 65, 106, 1); background-size: cover; background-blend-mode: screen, multiply; }

Sekoita-sekoita-tila

Sekoita-sekoita-tila vaikuttaa siihen, miten elementti sekoittuu vanhempiinsa ja sisaruksiinsa, mukaan lukien mahdolliset etualan ja taustan sisällöt sekä näennäiset elementit. Joitakin mielenkiintoisia luovia vaikutuksia voidaan saavuttaa sekoittamalla päällekkäisiä pseudoelementtejä (:: ennen ja :: jälkeen).

.my-element { background: rgb(244, 65, 106); mix-blend-mode: multiply; }

CSS-suodattimet

CSS-suodattimia voidaan käyttää myös silmiinpistävien visuaalisten tehosteiden luomiseen suodattaa ominaisuus- ja suodatintoimintojen arvot. Toisin kuin sekoitustilat, ne käyttävät graafista vaikutusta suoraan kohteelle, johon he kohdistavat, ja elementissä voi olla useita suodattimia.

Muunna harmaasävyksi

Voimme manipuloida elementin värejä suuremmalla hallinnalla kuin luottaa sekoitustiloihin. Suodattimet voivat muuntaa kuvan harmaasävyksi, säätää kirkkautta, kontrastia ja kylläisyyttä, sumentaa elementin tai lisätä varjon. Ne voidaan myös animoida, ja näyttävät hyvältä leijutehosteilla.

SVG-suodattimet

CSS-suodattimet ovat itse asiassa yksinkertaistettuja versioita SVG-suodattimista. CSS suodattaa omaisuus vie myös URL () toiminto, jonka avulla voimme siirtää URL-osoitteen SVG-suodattimeen. SVG-suodattimet ovat erittäin tehokkaita ja mahdollistavat uskomattomia kuvatehosteita - mutta ne ovat myös paljon monimutkaisempia kuin CSS-suodatintoiminnot! Sara Soueidanilla on upea artikkelisarja Codropsista, jos olet kiinnostunut sukeltamaan omien mukautettujen SVG-suodattimiesi koodaamiseen. Katso artikkeli osoitteessa https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Leikkaus ja peittäminen: suorakulmioiden ulkopuolella

Olemme tottuneet käsittelemään laatikoita verkossa, mutta kaiken ei tarvitse olla suorakaiteen muotoinen! Leikkaus ja peittäminen ovat saman kolikon kaksi puolta, ja ne ovat erilaisia ​​tapoja piilottaa ja näyttää elementin eri osat niin, että tausta näkyy läpi. Tämä antaa meille voimaa esitellä mielenkiintoisia ja luovia muotoja malleihimme.

Clip-polku

clip-polku () ominaisuuden avulla voimme 'leikata' elementin määrittelemällä polun. Se vie useita muodon perustoimintoja, insertti (), ympyrä (), ellipsi () tai monikulmio () , jonka avulla voimme muotoilla monimutkaisempia aukkomuotoja polun määrittelemiseksi xy-koordinaattipareilla. Vaihtoehtoisesti voimme myös ohittaa SVG-polun käyttämällä polku () toiminto tai URL () antaa SVG-polun tunnus.

Ei polun sisällä

Elementin leikkaaminen leikkaa kaiken määrittämäsi polun ulkopuolella, mutta itse elementti on edelleen suorakulmio. Jos sinulla on sisältöä, joka ulottuu leikepolun rajojen ulkopuolelle, myös se leikataan - se ei kääri muodon sisään.

Naamio-kuva

naamio-kuva avulla voimme näyttää ja piilottaa kuvan osat käyttämällä kuvaa (SVG tai läpinäkyvä PNG) tai liukuvärjäystä maskina. Toisin kuin clip-polku , voimme lisätä tekstuuria kuviimme peittämällä, koska maskin lähteen ei tarvitse olla polku - se mahdollistaa läpinäkyvyyden.

06. CSS-muodot

CSS Shapes -määrittely antaa meille mahdollisuuden kiertää tekstiä kelluvien geometristen muotojen ympärille ja luoda mielenkiintoisia, aikakauslehtiä muistuttavia asetteluja. Tämä on mahdollista käyttämällä muoto-ulkopuolella omaisuus. Samanlainen kuin clip-polku , voimme antaa tälle ominaisuudelle perustoiminnon ympyrä (), ellipsi (), insertti (), monikulmio () , tai URL-osoite SVG-polulle, ja itse asiassa nämä kaksi toimivat sopusoinnussa hyvin! muoto-ulkopuolella kääri tekstiämme tehokkaasti, mutta se ei vaikuta kelluneeseen elementtiin. Jos haluamme tekstin näyttävän käärivän kuvan tai kelluvan objektin ympärille, voimme käyttää samaa arvoa clip-polku . Käyttää muoto-marginaali lisätä välilyönnin muodon polun ja sitä ympäröivän sisällön väliin. Katsokaa Kamaa ja hölynpölyä nähdäksesi kuinka CSS-muotoja käytetään tekstin käärimiseen keskuskuvan ympärille.

Firefoxilla on shape-path-editori dev-työkalupaneelissa, mikä on erityisen hyödyllinen monimutkaisten muotojen kanssa työskentelyssä. Käytä kuitenkin varoen. Kappaleen etureunan kääriminen on hienoa taiteelliselle vaikutukselle, mutta ei aina hienoa käyttökokemukselle. Monimutkaiset rosoiset muodot voivat vaikeuttaa tekstilohkojen lukemista. Tärkeää sisältöä kannattaa ehkä välttää.

07. Vierityksen napsautus

Vierityksen napsautus

Michelle Barkerin CodePen osoittaa vierityksen napsautuksen toiminnassa(Kuvan luotto: CodePen - Michelle Barker)

Monet verkkosivustot hyödyntävät JavaScript-kirjastoja tarjotakseen tyylikkään, alkuperäisen sovelluksen kaltaisen vierityskokemuksen, jossa sisältö 'napsahtaa' pisteisiin käyttäjän vierittäessä. Nyt Scroll Snap -määrityksen avulla voimme tehdä tämän oikein CSS-tiedostossamme - sinun ei tarvitse juurikaan tuoda raskaisiin JS-moduuleihin sivusi paisuttamiseksi!

Vierityksen napsautuksen toteuttamiseksi tarvitsemme elementin, joka toimii vieritysastiana. Säiliön suorat lapset sanelevat napsautettavat pisteet, jotka voidaan kohdistaa eri tavoin napsautusalueella.

Vierityksen napsautus voi olla vieläkin tehokkaampaa, kun se yhdistetään toiseen uuteen CSS-ominaisuusarvoon - asento: tahmea . Tämä sijainti-arvo 'kiinnittää' elementin määritettyyn sijaintiin vierittäessä sen säilöä - toinen toimintatapa, joka aiemmin oli mahdollista vain JavaScriptin avulla. Katso tämä vierityspainike asennolla: tahmea ja leikkaava havainto-esimerkki .

08. CSS-ruudukko ja asettelut

Etupään kehittäjät ovat hakkeroitu ulkoasuun kaikilla käytettävissä olevilla työkaluilla - viimeksi flexboxilla, jota monet modernit ruudukkojärjestelmät käyttävät. Mutta flexboxia ei koskaan suunniteltu tiukkojen verkkojen rakentamiseen - sen tarkoitus on joustavuus!

CSS Grid on ensimmäinen määritys, joka on suunniteltu kaksiulotteiselle asettelulle, jonka avulla voimme hallita ulkoasun rakentamista ja sijoittaa kohteita sekä rivin että sarakkeen akselille. Reagoivan asettelun rakentaminen Gridillä ei vaadi calc (): ta tai hakkerointia negatiivisilla marginaaleilla. Salaisuus on fr-yksikkö - uusi yksikkö, joka on yksinomaan ruudukkoon. Fr-yksikkö mitoittaa ruudukon jäljet ​​(rivit ja sarakkeet) suhteessa käytettävissä olevaan tilaan. Se ottaa huomioon kaikki kiinteät raidat, kourut ja sisällön, ja jakaa sitten jäljellä olevan tilan vastaavasti. Jen Simmons loi termin 'sisäinen web-suunnittelu' kuvaamaan Gridin johtamaa web-asettelun uutta aikakautta.

kuinka käyttää MacBook Prota monitorina

Kuinka käyttää CSS Gridiä

Ruudukko vaatii elementin, jonka näytön ominaisuusarvo on asetettu ruudukoksi, toimimaan ruudukkosäiliönä. Ruudukon kontin suorat lapset ovat kohteita, jotka voidaan sijoittaa ristikkoon. Käytämme ominaisuuksia ruudukko-malli-rivit ja ruudukko-malli-sarakkeet määrittää ruudukon jäljet ​​(rivit ja sarakkeet) ja sarakeväli ja riviväli määritellä kourut (raot raiteiden välillä).

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; }

Käytämme toistaa() toiminto pitämään koodin ytimekkäämpänä vaihtoehtona pitkäkätiselle (esim. ruudukko-malli-sarakkeet: 1fr 1fr 1fr 1fr ). Tässä esimerkissä käytetään myös lyhennettä aukko varten riviväli ja sarakeväli .

Yllä oleva koodi antaa meille neljä riviraitaa, kukin 100px korkea, ja neljä sarakeraitaa, jotka kukin täyttävät yhtä suuren osan käytettävissä olevasta tilasta fr-yksikön avulla.

On syytä huomata, että tämä ei ole ainoa tapa luoda ruudukon jälkiä. Implisiittisiä raitoja voidaan luoda myös sijoittamalla ruudukkokohteita. On hyödyllistä lukea tästä hieman, jos käytät Gridiä, koska kannattaa saada syvällisempi käsitys siitä, miten Grid käyttäytyy eri olosuhteissa, ja se voi helpottaa asettelun koodaamista.

Voimme sijoittaa kohteita ruudukkoon viittaamalla ruudukon rivinumeroihin, jotka ovat numeerisia viivoja, jotka istuvat kunkin raidan välissä. Tässä käytämme lyhytnimeä ruudukko-sarake ja ristikkorivi varten ruudukko-sarake-alku , ruudukko-sarake-pää , ruudukko-rivi-alku ja ruudukko-rivin pää . Nämä kertovat selaimelle, millä rivillä tuotteemme pitäisi alkaa ja päättyä kullakin akselilla.

.item { grid-column: 1 / 4; grid-row: 2; }

Ruudukko tarjoaa meille monia erilaisia ​​tapoja sijoittaa kohteita: voimme sen sijaan nimetä ruudukon viivat:

.grid { display: grid; grid-template-columns: [image-start] 1fr 1fr 1fr [image-start] 1fr; grid-template-rows: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }

Vaihtoehtoisesti ruudukko-malli-alue ominaisuuden avulla voimme 'piirtää' ruudukon asettelun tekstillä.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; grid-template-areas: ‘. . . .’ ‘image image image .’ ‘image image image .’ ‘. . . .’; }

Jommallakummalla näistä menetelmistä voimme yksinkertaisesti viitata vastaavaan ruudukkoalueeseen sijoitettaessa ruudukko-osaa:

.image { grid-area: image; }

Tämä artikkeli julkaistiin alun perin luovan verkkosivujen lehdessä Nettisivujen suunnittelija . Osta numero 290 nyt.