Mikä on joustava ruudukko reagoivassa asettelussa? Ruudukkoviivojen nimeäminen. Merkintä voisi olla yksinkertaisempaa
Erityisesti sivuston käyttäjille tarjoamme käytännön opetusta 960 Grid -järjestelmän käytöstä. Kuvittele, että meille annettiin suunnittelu taittoa varten. Ensin meidän on hahmoteltava sivustorakenteen toteuttamissuunnitelma ja vasta sitten siirryttävä suoraan koodiin. Tämän artikkelin tutkimisen jälkeen pystyt käsittelemään mitä tahansa klassista asettelua mahdollisimman lyhyessä ajassa ja luonnollisen hiusvärin useiden vuosien ajan (ilman harmaita hiuksia). Joten tässä on suunnittelumme:
1. Luo verkko
Kuten jo tiedät, 960 Grid -järjestelmä käyttää useita luokkia ja on saatavana useissa versioissa (12 sarakkeen ja 16 sarakkeen versiot). Pääsäilö on sarakkeiden lukumäärästä riippumatta aina 960 pikseliä leveä. Tätä mallia varten valitsemme 12 pylvään järjestelmän. Jokaisen 960 Grid -järjestelmän lohkon ulkoinen marginaali on 0 10 pikseliä. Tämä takaa meille tasaisen, suhteellisen 20 pikselin pehmusteen. Niille, jotka ovat hämmentyneitä 960 kuvapisteen koosta, suosittelen katsomaan tätä kaaviota. Tämä koko on optimaalinen suurimmalle osalle näyttötarkkuuksista. Joten meillä on mahdollisuus luoda tämän levyisiä lohkoja:
- 140 pikseliä
- 220 pikseliä
- 300 pikseliä
- 380 pikseliä
- 460 pikseliä
- 540 pikseliä
- 620 pikseliä
- 700 pikseliä
- 780 pikseliä
- 860 pikseliä
- 940 pikseliä
Jokaisella koolla on oma luokkansa, jonka nimi perustuu grid_X-skeemaan, jossa X on sarakkeiden lukumäärä. Jos tarvitset 960px-lohkon, valitse grid_12-luokka. 960 Grid -järjestelmän aktivoimiseksi sinun on asetettava ylätason säilöksi luokka kontti_12 tai säilö 16. Alla on pieni esimerkki sivu, joka koostuu 3 lohkosta. Ensimmäisen leveys on yhtä suuri kuin 960 pikselin leveys, loput 2 ovat puolet pienempiä:
Muista, että kun täytät rivin lohkoilla grid_X-luokassa, varmista, että niiden yhteenlaskettu summa on enintään 12. Esimerkiksi kuten meillä - kaksi lohkoa grid_6 + grid_6 = 12. Vähemmän on mahdollista: 6, 4 , 2 jne. d. Nyt kun olemme käyneet läpi perusperiaatteet, voimme aloittaa käytännön harjoituksen:
2. Luo malli
Yritetään rakentaa kaavio siitä, mitä meidän on tehtävä. Ensinnäkin tarvitsemme 2 960 pikselin lohkoa. Toinen logolle, toinen navigointiin. Seuraavaksi 2 lohkoa (yhdellä rivillä), juliste- ja verkkosivuesittelyä varten, erotinlohko (täysleveä), 4 saraketta (yhdellä rivillä), jälleen erotinlohko ja alatunniste. Jotain tällaista:
Uskon, että kuvan nähtyäsi tiedät jo, mitä luokkia tarvitsemme. Kokeile niitä itse ja katso sitten alla olevaa koodia nähdäksesi, ajatteletko oikein:
Muista, että jokaisen rivin lopussa meidän on lisättävä
normaaliin näyttöön kaikissa selaimissa. Älä unohda sisällyttää myös 960 Grid CSS sivullesi head-osioon.Eli luuranko on valmis, joten on aika aloittaa koristelu. Aseta korkeus ja taustaväri lohkojen erottimet. Valikkolohkon korkeus riippuu itse valikosta. Muista myös lisätä logosi:
Div.spacer ( taustaväri: #8FC73E; korkeus: 1em; ) div#navbar ( taustaväri: #8FC73E; täyte: 10px 0; )
Tämä meidän pitäisi saada:
Emme ole tällä hetkellä kiinnostuneita tiedoista, joten voit lisätä sisältöä täältä keskisarakkeisiin tämä sivu. Ennen kuin teemme yläosan, tehdään alaosa. Suunnittelussamme alatunnisteen tausta on harmaa. Päällä Tämä hetki emme voi toteuttaa tätä, koska jos muistat, lohkojen välissä on sisennystä, joka ei salli meidän maalata tätä aluetta kokonaan. Tämän ongelman ratkaisemiseksi siirretään 3 alatunnisteeseen liittyvää lohkoa erillisiin lohkoihin id = alatunniste. Vielä yksi yksityiskohta: kun käytämme luokkia luokkien sisällä, olisi hyvä asettaa alfa-arvot (jotka osoittavat, mikä lohko on ensimmäinen ja omega - viimeinen):
Div#footer ( taustaväri: #e5e5e6; )
Täydellinen! Alatunnisteessamme on nyt taustaväri. Lisää siihen tekstiä ja siirrytään navigointilohkoon. Kaikkien lakien mukaan nykyaikaisia periaatteita asettelu, navigointi on numeroimaton luettelo. Lisää seuraava koodi ja tyyli:
- Artikkelit
- Aiheet
- Noin
- Toimittajat
- Ottaa yhteyttä
Div#navbar ul ( listatyyli: ei mitään; näyttö: lohko; marginaali: 0 10px; ) div#navbar ul li ( kelluva: vasen; marginaali: 0 1,5 em; fontti: lihavoitu 1em Arial; )
Viileä! Meillä kaikki menee hyvin. Jäljellä on vain lohko, jossa on juliste ja sivuston esittely, mutta ennen kuin aloitamme niiden toteuttamisen, haluaisin sanoa muutaman sanan CSS-kehyksistä yleisesti.
3. CSS-kehykset eivät ratkaise kaikkia ongelmiasi
Ennen kuin aloitat suunnittelusi CSS-kehyksen avulla, sinun tulee ottaa huomioon näiden järjestelmien haittoja. Tätä artikkelia lukiessasi et voinut olla huomaamatta, että sivun rakentamisen säännöt ovat erittäin tiukat. Kaikella on omansa kiinteä koko. Kun muutat yhden lohkon leveyttä, sinun on vaihdettava muita. Joka tapauksessa jotain on uhrattava. Mitä teet esimerkiksi, jos sinulla on 1000 pikselin suunnittelu ja 960 ruudukon avulla voit luoda maksimileveyden 960 pikseliä... Ja haluat 1000 pikseliä! Ilman massiivisia koodimuutoksia tämä on mahdoton toteuttaa. Esimerkiksi asiakas halusi laajemman sivuston tai suunnittelija on eri mieltä toteutuksestasi. Toinen ongelma liittyy kaiuttimien korkeuteen. Jos kolmella sarakkeella on sama taustaväri (kuten alatunnisteessa), on välttämätöntä, että nämä sarakkeet ovat samaa korkeutta. Toinen merkittävä haitta: ylimääräisten sisennysten käyttö ja kehysten luominen johtaa koko asettelun tuhoamiseen. Jotta voit lisätä tarpeellisen ja olla tuhoamatta mitään, sinun on kompensoitava lisätyt mitat. Nyt näytän sinulle kuinka. Aloitetaan yläosan viimeistely.
4. Yläosa
Ensin ratkaistaan sarakkeen korkeuden ongelma - korjaa se. Seuraavaksi luomme tyhjiä divejä yhteen ja toiseen lohkoon. Ne sisältävät piirustuksen tai tekstitietoa. Emme aseta sisäisiä pehmusteita, koska... voit muuttaa ruudukon leveyden osuutta. Tehdään p-tunnisteille pieni ulompi sisennys, jotta teksti näyttää hyvältä.
SISÄÄN tässä tapauksessa tyyliä varten on parempi luoda luokka tunnuksen sijaan, koska meidän on sovellettava sitä useisiin lohkoihin. Tarvittaessa tämä mahdollistaa myös korkeuden muuttamisen kahdessa erässä. Tältä meidän tunnit näyttävät:
Div.topSection div ( reunus: kiinteä 10px #e5e5e6; korkeus: 280px; ) div.topSection div p ( marginaali: 10px; )
Viileä! Katsotaan mitä saamme:
Oletko valmis täyttämään? Lisää sitten tekstiä vasempaan lohkoon, mutta älä liioittele sitä, jotta korkeus ei ylity. Itse asiassa todellisissa projekteissa suunnittelijan on laskettava kaikki tämä (merkkien määrä, joka täyttää lohkokoon); Ennen kuin lisäät kuvan oikeaan lohkoon, sinun on päätettävä sen mitat, jos et ole jo tehnyt niin. Tämä voidaan tehdä suunnittelun alussa tai FireBugin kautta. Napsauta Tarkista. Napsauta tarvitsemaamme div-osaa. Valitse Asettelu-välilehti. Tämän jälkeen näet kaikki tarvitsemasi tiedot. Seuraava kuva auttaa sinua:
Kuvakaappauksessa juliste on kooltaan 360 x 280. Etsi kuva ja muotoile se:
Img#juliste (leveys: 360px; korkeus: 280px; )
Siinä kaikki! Malli on valmis. Nyt ei enää tarvitse kuin täyttää se todellisella sisällöllä ja julkaista se verkkoon:
5. Tiedä vaihtoehtosi
Nyt kun kaikki on valmis, tehdään yhteenveto. 960 Grid antoi meille mahdollisuuden niittaa mallin 15 minuutissa. Viileä? Joo! Olemmeko testanneet sitä IE6:ssa, IE7:ssä? Ei! On pakko? Ei. Tämä on vasta alkua! Joten mikä nyt on? Nyt sinun täytyy näyttää se asiakkaalle ja nähdä reaktio. Jos hän on tyytyväinen tähän, voimme aloittaa testauksen, mutta jos ei, ja asiakas haluaa jotain monimutkaisempaa, hänen on kirjoitettava kaikki tyhjästä itse. Toistan sen uudelleen. CSS-kehykset eivät ratkaise kaikkia ongelmia. Tästä huolimatta tuhannet kehittäjät käyttävät niitä tavallisena verkkokehitystyökaluna, koska, kuten kaikilla työkaluilla, CSS-kehyksillä on oma alansa laajalle sovellukselle. Joka tapauksessa, jos suunnittelupyynnöt eivät ole superspesifisiä (80 % tapauksista), 960 Gridin avulla voit säästää paljon aikaa - ja aika on rahaa!
Kerromme sinulle, kuinka CSS Gridin avulla voit luoda korkealaatuisia responsiivisia merkintöjä turvautumatta kolmannen osapuolen kehyksiin, kuten Bootstrap.
Alkuperäinen ruudukko tarjoaa lukuisia etuja kehyksiin verrattuna, etenkin verrattuna suosituimpaan niistä: Bootstrapiin. Kiitokset moderni CSS voit luoda monimutkaisia merkintöjä ilman JavaScriptiä, koodi on selkeämpi ja helpompi ylläpitää.
Merkintä voisi olla yksinkertaisempaa
Bootstrapin korvaaminen CSS Gridillä riittää HTML on siistimpi. Harkitse esimerkiksi pientä osaa sivusta, joka meidän on asetettava, se näyttää tältä:
Bootstrap
Katsotaanpa ensin tämän sivun esimerkkikoodia Bootstrapissa.
On syytä kiinnittää huomiota muutamaan asiaan:
— Jokaisen rivin tulee sijaita omassa divisioonsa.
- Sinun on käytettävä luokkien nimiä merkintöjen luomiseen (sarake-xs-2).
— Kun malli kasvaa ja monimutkaistuu, sama tapahtuu HTML-koodin kanssa.
Jos puhumme reagoivuudesta, merkintä näyttää vielä pahemmalta:
CSS-ruudukko
Katsotaanpa nyt samaa esimerkkiä merkinnöistä puhtaassa CSS:ssä:
Tämä merkintä on paljon helpompi lukea. Luokkien sotku on poissa ja divien määrä on vähentynyt.
Tietenkin toisin kuin esimerkki, jossa on kytketty Bootstrap-sivu, tässä sinun täytyy kuvailla tyylejä itse:
Lisää joustavuutta
Tehdään töitä sopeutumiskyvyn parissa. Poistetaan esimerkiksi MENU mobiilinäyttöjen ylimmälle riville. Toisin sanoen muutetaan tämä:
CSS-ruudukko
CSS-ruudukon uudelleen rakentaminen on erittäin helppoa. Sinun tarvitsee vain lisätä mediakysely ja kuvata, mitä sivun elementeille pitäisi tapahtua.
Tällä tavalla sinun ei tarvitse edes avata HTML:ää suunnitellaksesi sivua uudelleen.
Bootstrap
Jos kehittäjän on muutettava jotain Bootstrap-mallissa, hänen on aloitettava muuttamalla itse HTML. Itse asiassa sinun on siirrettävä VALIKKO niin, että se on HEADERin yläpuolella.
Tässä tapauksessa pelkkä tyylien toiminnan muuttaminen mediakyselyssä ei toimi. Tämän ratkaisemiseksi sinun on turvauduttava JavaScriptiin.
Ei enää 12 sarakkeen rajaa
Tämä ei ole vakava rajoitus, mutta joissakin tapauksissa se aiheuttaa haittaa. Koska Bootstrap-ruudukko on natiivisti jaettu 12 sarakkeeseen, jakamisessa esimerkiksi 5, 7 tai 9 sarakkeeseen voi olla ongelmia.
CSS-ruudukon avulla voit luoda niin monta saraketta riville kuin tarvitset.
Tämä tehdään asettamalla grid-template-columns-ominaisuuden arvo:
Se käyttää muuten flexboxia, joka helpottaa myös merkintöjen hallintaa CSS:n kautta, mutta tällä hetkellä se ei ole vielä edes poistunut beetaversiosta.
Selaimen tuki
Tätä kirjoittaessa 75 % selaimista tukee CSS Gridiä.
Mikään ei estä monia kehittäjiä aloittamasta CSS Gridin käyttöä juuri nyt, mutta valitettavasti kaikki projektit eivät ole valmiita toimimaan tällä asettelumenetelmällä. Monet tunnetut kehittäjät, kuten Morten Rand-Eriksen LinkedInistä ja Jen Simmons Mozillasta, ovat kuitenkin vakuuttuneita siitä, että tämä lähestymistapa sivujen luomiseen on tulevaisuutta: visuaalinen esitys tulee erottaa JavaScript-logiikasta ja mukautua siitä riippumatta.
Vuoden 2012 tai 2013 tienoilla minut tutustuttiin verkkokehitykseen. Vähitellen aloin opiskella tätä suuntaa itse. Tajusin pian, että CSS tekee monista asioista merkityksellisiä, mutta se ei luo riittävää merkintää. Hakkereita on niin paljon, että niitä on liian vaikea ymmärtää. Siksi nykyaikaisissa standardeissa, joista keskustellaan tässä artikkelissa, erityistä huomiota kiinnitettiin merkintöjen kanssa työskentelemiseen.
Mitä opit tästä artikkelista:
- miten työskentelit CSS-merkintöjen kanssa;
- ero perinteisten lähestymistapojen ja nykyaikaiset standardit;
- miten pääset alkuun uusien standardien kanssa (Flexbox ja Grid);
- miksi sinun pitäisi välittää näistä nykyaikaisista standardeista.
Kuinka työskentelimme CSS-merkintöjen kanssa
Tehtävä
Simuloillaanpa hyvin vakiotehtävä: Miten luodaan sivu, jossa on kaksi osaa - sivupalkki ja pääsisältöalue - joilla on sama korkeus sisällön koosta riippumatta?
Tässä on esimerkki siitä, mitä tavoittelemme:
Sivupalkki ja pääsisältöalue ovat samalla korkeudella sisällön koosta riippumatta
Ensin näytän sinulle, kuinka tämä ongelma ratkaistaan käyttämällä vanhoja lähestymistapoja.
1. Luo div, jossa on kaksi elementtiä
Esimerkiksi,
Ilmeisesti main on enemmän tekstiä.
Korostetaan sivuun väri, jotta se on helpompi erottaa:
Sivulle (väri: #fff; taustaväri: #8cacea; )
2. Aseta molemmat osat vierekkäin
Tätä varten kirjoitamme seuraavan:
Sivussa, pää( kellua: vasen; )
Tämä tyyli jakaa käytettävissä olevan tilan tarvittaviin mittasuhteisiin ja asettaa sivuun ja päähän kellumaan.
Kaksi lohkoa vierekkäin
Kellumiseen tuntemattomille se on suhteellisen vanha tapa siirtää elementtejä vasemmalle tai oikealle.
Kuten yllä olevasta kuvasta näet, tehtävää ei ole vieläkään suoritettu - sivupalkin korkeus ei vastaa pääalueen korkeutta. Korjataan tämä.
3. Käytä näyttöä: pöytätemppu
Tämän ongelman ratkaisemiseksi sinun on käytettävä näyttöä: table .
Jos et ole perehtynyt siihen, toimi seuraavasti:
- Teemme pääsäiliöstä (tapauksessamme body-elementistä) taulukon: body ( näyttö: taulukko; )
- Poistamme floatin ja teemme alielementit sivuun ja päätaulukon solut: aside, main( display: table-cell; )
Kun olemme tehneet tämän, voidaan katsoa, että ongelma on ratkaistu. Näin se ainakin ratkesi ennen.
Molemmat lohkot ovat nyt samalla korkeudella.
Ero vanhojen lähestymistapojen ja nykyaikaisten standardien välillä
Nyt kun sinulla on käsitys siitä, kuinka ongelma on ratkaistu aiemmin, katsotaanpa, mitä Flexbox ja Grid voivat tehdä.
Flexbox ja Grid ovat ihanteellisia ratkaisuja CSS-merkintöihin ja ovat moderneja standardeja. Jos sinun on kirjoitettava CSS-koodi hyvällä tasolla, muista tutkia niitä.
Ongelman ratkaiseminen Flexboxilla
Flexbox-muotoilukonteksti alustetaan luomalla joustava säilö.
Pääelementti on body. Se sisältää sivupalkin ja pääalueen. Luo säilö:
Runko (näyttö: flex; )
Flexbox toiminnassa
Älä unohda mittasuhteita:
Sivu (leveys: 25%; ) pää (leveys: 75%; )
Ongelma ratkaistu
Voit tehdä monia erilaisia asioita Flexboxilla:
Ja olen koskettanut vain Flexbox-jäävuoren huippua.
Flexbox on saatavilla useimmissa tuetuissa selaimissa. Sitä voidaan käyttää täysin Firefoxissa versiosta 28 alkaen, Chromessa versiosta 29 alkaen, Safarissa versiosta 6.1 ja Edgessä versiosta 12 alkaen.
Huomautus käännös Meidän avullamme ymmärrät Flexboxin.
Ongelman ratkaiseminen Gridin avulla
Toisin kuin Flexbox, joka toimii enimmäkseen yhdessä ulottuvuudessa, CSS Gridissä voit käyttää sekä rivejä että sarakkeita. Katsotaanpa kuinka ratkaista ongelmamme sen avulla.
Kaikki alkaa samalla tavalla kuin Flexboxin tapauksessa. Luo säilö:
Runko ( näyttö: ruudukko; )
Tässä kaikki CSS:
Runko ( näyttö: ruudukko; taustaväri: #eeeeee; ) sivuun ( väri: #fff; taustaväri: #8cacea; )
Ja tämän saamme:
Ensisijainen vaihtoehto
Grid on saatavilla useimmissa tuetuissa selaimissa, vaikkakin pienempiä määriä. Sitä voidaan käyttää täysin Firefoxissa versiosta 52 alkaen, Chromessa versiosta 57 alkaen, Safarissa 10.1 alkaen ja Edgessä 16.
Uusin kuvamme ei silti eroa aiemmista. Joten mikä on taikuutta?
Entä jos jaamme leveyssuhteet kuten ennen:
Sivu (leveys: 25%; ) pää (leveys: 75%; )
Lapsielementtien suhteellinen leveysjakauma
Kyllä, tulos on erilainen, mutta se ei sovi meille. Sivupalkki ei ole vielä sijoitettu pääalueen puolelle.
Tässä tulemme ruudukon merkinnän olemukseen. Kun olet alustanut Grid-säiliön, jossa on display: grid, sinun on määritettävä sen sisällä olevat rivit ja rivit.
Näin se tehdään:
Runko (ruudukko-malli-sarakkeet: 30 % 70 %; )
Yksirivinen ratkaisu on kaunis, eikö? grid-template-columns määrittää sarakkeiden suhteet ruudukossa.
Ongelma ratkaistu
Mutta voit tehdä paljon enemmän Gridillä.
Lisätään ensin hieman väriä päälohkoon, jotta esimerkit olisivat selvempiä:
Pää ( taustaväri: rgba(39,174,96,1); väri: #fff; )
Tämä meidän pitäisi saada:
Pääsisältöalueen täyttäminen väreillä
Katsotaan mitä hyvällä Gridillä on tarjottavanaan:
- Voit määrittää sarakkeiden välisen raon: body ( grid-column-gap: 15px; )
Tässä on tulos:
Se näyttää paljon siistimmältä, kun sarakkeiden välissä on rako.
Sivu- ja päälohkoihin ei tarvitse lisätä pehmustetta: grid-column-gap tekee sen.
- Voit tehdä niin monta saraketta kuin tarvitset. Yllä olevissa esimerkeissä käytettiin vain yhtä elementtiä sivuun ja pääelementtiin. Lisätään vielä kaksi:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies, muualle luokittelemattomat, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies, muualle luokittelemattomat, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies, muualle luokittelemattomat, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies, muualle luokittelemattomat, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lisätty rivinvaihto
Tämän yksinkertaistamiseksi voit käyttää pikakuvaketta: grid-gap: 15 px grid-row-gap ja grid-column-gap sijaan.
- Voit määrittää rivien koot: body ( grid-template-rows: 200px 300px 400px; )
Eri rivikorkeudet
Nyt ensimmäisen, toisen ja kolmannen rivin korkeus on 200, 300 ja 400 pikseliä.
Tämä riittää alkuun - mutta tässä ei vielä kaikki.
Kuinka päästä alkuun uusien standardien kanssa?
Olet nähnyt esimerkin siitä, kuinka Flexbox ja Grid tarjoavat parempia asetteluratkaisuja. Joten miten aloittaa?
Miksi sinun pitäisi välittää näistä standardeista?
Jos et vieläkään ymmärrä, miksi sinun pitäisi käyttää Flexboxia ja Gridia, tässä on muutamia ongelmia, joita saatat kohdata aiempien ratkaisujen yhteydessä:
- jos käytät kelluvia lohkoja ja clearfixia, tiedät, että ne voivat aiheuttaa ongelmia;
- absoluuttisella sijoittelulla elementit voivat mennä päällekkäin;
- näyttöä käyttämällä: taulukko jättää paljon tarpeettomia merkintöjä;
- Inline-blockia käytettäessä tyhjien tilojen kanssa tulee ongelmia.
Tämä artikkeli näyttää, kuinka tämä suhteellisen uusi tekniikka toimii, miten se toimii, eikä vain ominaisuuksien kuvausta pinnallisilla esimerkeillä.
Itse artikkeli on responsiivinen lisätty käännös CSS Grid Tutorialista
CSS-työryhmä on kehittänyt CSS Grid -moduulin tarjoamaan parhaan tavan luoda malleja CSS:ssä. Se sisällytettiin ehdokassuositukseen helmikuussa 2017, ja suurimmat selaimet alkoivat tukea sitä maaliskuussa 2017.
CSS Gridistä tulee pian olennainen osa kaikkien etupään kehittäjien työkalupakkia. Ja jos olet yksi heistä, sinun on opittava CSS Grid —joka on lähes varmasti ehdoton taito mihin tahansa etupään kehitysasemaan.
Tämän tehokkaan toiminnon ja intuitiivisen syntaksin ansiosta ruudukkomallit muuttavat epäilemättä tapaa, jolla verkko rakennetaan.
Johdanto
CSS Grid on uusi mallimalli, joka on optimoitu 2D-malleille. Se on ihanteellinen malli verkkosivustomalleille, lomakkeille, gallerioille ja kaikkeen, joka vaatii tarkkaa ja reagoivaa paikannusta.
Webin kehityksen myötä viime vuodet, verkkosivustomallien kehittäminen on muuttunut yhä vaikeammaksi. Internetin alkuvuosina HTML-taulukoita käytetään usein monisarakkeisiin malleihin, lomakkeisiin jne. Mutta tällä menetelmällä on haittapuolensa. Tämä tarkoittaa, että esitys oli tehtävä merkintätasolla, joten esityksen ja sisällön välillä ei ollut eroa. Itse asiassa taulukot luotiin sisältämään taulukkotietoja, ei luomaan malleja. Ja käsittelemättä semanttisia kysymyksiä, taulukkomalleja ei luoda reagoivaa suunnittelua varten.
Floats korvasi lopulta taulukkopohjat yleisesti hyväksytyksi ja suositelluksi mallien luomismenetelmäksi, koska sen avulla voimme sijoittaa elementtejä asettelusta riippumatta. Vaikka tätä menetelmää pidettiin merkittävänä parannuksena taulukkoasetteluun verrattuna, sillä oli kuitenkin myös rajoituksensa. Floatit suunniteltiin ensisijaisesti asiakirjamalleille, eivätkä ne sopineet monimutkaisille sovellusmalleille, jotka ovat nykyään yleisiä verkossa. Kelluvia elementtejä on vaikea hallita, etenkin laitteissa ja kuvaporteissa eri kokoja. Tämä johti erilaisiin ruudukkomaisiin hakkerointiin, joista tuli normi, joista useimmat vaativat lisämerkintöjä, jotka heikensivät koko sisällön erottamisen käsitettä. Joten CSS-työryhmä etsi parempaa ratkaisua.
CSS Grid -malli ratkaisee nämä ongelmat ja paljon muuta. Sen avulla voit luoda kehittyneitä malleja murto-osassa ajasta, jonka käytät niihin kalustolla ja vähemmällä koodauksella.
Mutta tietysti voit käyttää tähän erilaisia arvoja, kuten 100px, 7em, 30% ja niin edelleen. Voit myös antaa merkkijonoille nimiä ja niiden kokoja.
ruudukko-malli-sarakkeet: 1fr 1fr 1fr
Sama kuin yllä, määrittää vain sarakkeet ruudukoissa.
Paljastaa aukon. Eli ruudukon elementtien väliset tilat. Tässä käytetään vw-pituusyksikköä, joka on suhteessa näkymän leveyteen, mutta voimme myös käyttää 10px, 1em jne. Grid-gap-ominaisuus on lyhenne sanoille grid-row-gap ja grid-column-gap ominaisuuksia.
No, koodin toinen osa yksinkertaisesti määrittää eri tyylejä ruudukkoelementeille.
#ruudukko >
toista()-funktio
Repeat()-funktiolla voit määrittää elementin kokoarvon toistuvasti. Esimerkiksi tämän sijaan:
Ruudukkomalli-rivit: 1fr 1fr 1fr 1fr 1fr;
Pystymme tähän:
Grid-template-rows: toista(5, 1fr);
Tämä vähentää merkittävästi kirjoitettavan koodin määrää, varsinkin jos työskentelet suurten ja toistuvien ruudukoiden kanssa.
Verkkosivustomallin luominen CSS-ruudukon avulla
Gridit sisältävät intuitiivisen "ASCII-grafiikka"-syntaksin, jossa voit käytännössä "nähdä" mallin koodissa, mikä tekee mallin luomisesta ja muokkaamisesta erittäin helppoa. Jopa merkittävät muutokset voidaan tehdä muutamassa sekunnissa. Tämä intuitiivinen syntaksi auttaa myös reagoivassa web-suunnittelussa. Luominen erilaisia malleja varten erilaisia laitteita siitä tulee melkoinen pala kakkua ritilöitä käytettäessä.
Luodaan nyt verkkosivustomalli, joka näyttää tältä:
Ja tässä on tämän mallin koodi:
Katsotaanpa koodiamme tarkemmin. HTML-merkintä näyttää tältä:
Ja niin me teemme
ruudukkosäiliö, joten kaikista muista elementeistä tulee ruudukkoelementtejä.Katsotaan nyt ASCII-grafiikkaa, josta puhuimme aiemmin.
Grid-template-areas: "header header header" "nav-artikkelimainokset" "alatunniste alatunniste";
Tämä kappale määrittelee mallimme. Vain katsomalla koodia voimme nähdä, että se on 3x3 ruudukko (kolme riviä ja kolme saraketta). Tämä antaa meille viisi ruudukkoaluetta yhdeksässä ruudukon solussa, koska jotkut ruudukkoalueet kattavat useita soluja.
Näemme myös, että ylätunniste kattaa koko ensimmäisen kolmen solun rivin ja alatunniste koko alimman rivin, ja se vie myös kolme solua. Navigointi-, sisältö- ja mainososat jakavat tilan toisella rivillä, jossa jokainen näistä elementeistä saa yhden solun.
Nyt voimme määrittää jokaisen näistä ruudukkoalueista jokaiselle elementille:
#sivuHeader ( grid-area: header; ) #pageFooter ( grid-area: alatunniste; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )
Grid-area-ominaisuus on lyhennelmäominaisuus, jonka avulla voit sijoittaa ruudukkoelementtejä ruudukkoon. Meidän tapauksessamme viittaamme yksinkertaisesti nimiin, jotka olemme aiemmin määrittäneet grid-template-alueilla.
Suurin osa mallista on jo valmis. Loput koodista käsittelevät yksinkertaisesti mittoja, välilyöntejä ja korkeuksia, yleensä enemmän koriste-aluetta.
Seuraava koodi ilmoittaa rivien ja sarakkeiden koot:
Ruudukko-malli-rivit: 60px 1fr 60px; ruudukko-malli-pylväät: 20 % 1fr 15 %;
Ensimmäinen ja kolmas rivi ovat molemmat 60 pikseliä korkeita, ja toinen rivi vie kaiken jäljellä olevan tilan.
Ensimmäinen sarake on 20 % ja kolmas on 15 %. Toinen vie kaiken jäljellä olevan tilan.
Mallin vaihtaminen
Voit muuttaa mallia yksinkertaisesti järjestämällä ruudukkoalueet uudelleen muotoon grid-template-areas .
Jos siis muutetaan tähän:
Grid-template-areas: "nav header header" "nav article ads" "nav footer ads";
Tuloksena saamme seuraavan mallin:
Saatat kuitenkin joutua säätämään mittoja, jos siirrät pienemmän ruudukon suurempaan paikkaan.
Voit tehdä tämän esimerkiksi seuraavasti:
Navigointi vie nyt tilan, jossa sisältö oli, joten mittoja on muutettu. Muuten meillä olisi kapea sisältö ja laaja navigointi. Joten koodi näyttää nyt tältä.
Grid-template-areas: “header header header” “article nav ads” /* Ennen tätä oli “nav article ads” */ “footer footer footer”; grid-template-rows: 60px 1fr 60px; ruudukko-malli-pylväät: 1fr 20 % 15 %; /* Ennen tätä se oli "20% 1fr 15%" */
Mukautuvan ruudukon luominen
Ruudukkomallissa on arvoja, kuten automaattinen täyttö ja automaattinen sovitus, joiden avulla voit luoda ruudukon, jossa on useita tietyn kokoisia raitoja, jotka mahtuvat säiliöön. Tämä voi tarkoittaa, että ruudukko on responsiivinen, mikä tarkoittaa, että elementit muuttavat sijaintia, kun muutat selainikkunan kokoa.
Esimerkki automaattisen täytön käytöstä:
Tässä on tulos:
Tästä vastaava koodi:
Grid-template-columns: toista(automaattinen täyttö, minmax(150px, 1fr));
Siinä sarakkeiden vähimmäiskoko on 150 pikseliä ja enintään jäljellä oleva tila. Tällaisia kappaleita toistetaan niin monta kertaa kuin on tarpeen mahtuakseen säiliöön.
Repeat()-funktio toistaa raidan määrittelyn niin monta kertaa kuin ensimmäinen parametri määrittää. Automaattisen täytön käyttäminen saa jäljet toistumaan niin monta kertaa kuin mahdollista, kunnes ne täyttävät säiliön.
Näiden raitojen koko määritetään toisessa parametrissa. Meidän tapauksessamme käytämme minmax(150px, 1fr) osoittamaan, että sarakkeen vähimmäiskoko on 150px ja enimmäiskoko 1fr.
Automaattinen sovitus
automaattinen sovitus toimii samalla tavalla kuin automaattinen täyttö. Ainoa ero tässä on, että automaattinen sovitus kokoaa yhteen kaikki tyhjät raidat sijoittelun lopussa, kun taas automaattinen täyttö ei. Paras tapa tässä on esittely vertailulla.
Kahden pienen ruudukkoelementin käyttö auttaa näyttämään koko työn käsitteen. Automaattinen täyttö jättää loppuun tyhjiä raitoja määritettyihin mittoihin, ja automaattinen sovitus venyttää tyhjää raitaa, mikä johtaa siihen, että raidat täytetään venytetyillä elementeillä tilan täyttämiseksi.
Ruudukot mediakyselyillä
Yksi ruudukoiden vahvuuksista on, että voit luoda täysin erilaisen mallin sekunneissa.
Tämä tekee ruudukoista ihanteellisia mediakyselyihin. Voimme yksinkertaisesti määrittää arvot uudelleen ASCII-grafiikassa ja kääriä tuloksen mediakyselyyn.
Tämä on kolmen sarakkeen malli suuressa näkymässä, ja se pakattuu yhdeksi sarakkeeksi pienissä laitteissa. Joten tämä esimerkki näyttää erilaiselta näytön koosta riippuen. Joka tapauksessa tässä on asianmukainen koodi kolmisarakkeiselle mallille leveille kuvaporteille.
Grid-template-areas: "header header header" "nav-artikkelimainokset" "alatunniste alatunniste";
Ja tässä on vastaava koodi mobiiliversiolle:
Grid-template-alueet: "otsikko" "artikkeli" "mainokset" "nav" "alatunniste";
Joten koko pointti on määrittää arvot uudelleen grid-template-areas -ominaisuudessa.
Meidän tapauksessamme käärimme mobiiliversion mediakyselyyn seuraavasti:
@media kaikki ja (max-width: 575px) ( runko ( ruudukkomalli-alueet: "otsikko" "artikkeli" "mainokset" "nav" "alatunniste"; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- malli-sarakkeet: 1fr )
Huomaa, että olemme myös säätäneet arvot grid-template-riveissä ja grid-template-sarakkeissa vastaamaan uutta mallia. Erityisesti siinä pitäisi olla vain yksi sarake, ja sen tulee viedä kaikki vapaa tila. Ja koska kaikki ruudukon elementit ovat yhdessä kasassa, määritämme 5 riviä ja määritämme niiden korkeudet.
Ristikon yhdistäminen lohkoon
Mallisi vaatimuksista riippuen mikään ei estä sinua vaihtamasta mobiiliversiota näyttöön: block . Kuten täällä:
@media kaikki ja (max-width: 575px) ( runko ( näyttö: lohko; ) )
Tämä toimii samalla tavalla kuin yllä olevassa esimerkissä, mutta oletusarvoisesti elementit näkyvät alkuperäisessä järjestyksessä. Yllä olevassa esimerkissä mobiiliversiossa on navigointimerkki mainosten alla, mutta jos olisimme käyttäneet display: blockia, navigointi olisi mainosten yläpuolella.
Myös tätä menetelmää käytettäessä saatat joutua lisäämään pehmusteita kompensoimaan ruudukkoversiossa olevien aukkojen puutetta.
Eksplisiittiset ja implisiittiset ruudukot
CSS Grid käyttää eksplisiittisen ruudukon ja implisiittisen ruudukon käsitettä. Tämä on keskeinen käsite, jonka kanssa sinun on oltava varovainen luodessasi ruudukoita, muuten päädyt joukkoon rivejä ja sarakkeita, joita et odottanutkaan olevan olemassa.
Eksplisiittinen ruudukko on ruudukko, jonka määrität ruudukko-malli-rivit, grid-malli-sarakkeet ja grid-malli-alueet.
Sinulla saattaa kuitenkin silti olla elementtejä, jotka eivät sovi "eksplisiittisesti" määriteltyyn ruudukkoon. Olet esimerkiksi määrittänyt ruudukon, johon mahtuu vain kuusi elementtiä, mutta itse säilö koostuu itse asiassa yhdeksästä elementistä. Vain kuusi elementtiä mahtuu eksplisiittiseen ruudukkoon ja kolme jää jäljelle. Ja siinä implisiittiset ruudukot tulevat sisään.
Ruudukkosäiliö luo automaattisesti implisiittiset ruudukot aina, kun ruudukkoelementit sijaitsevat eksplisiittisen ruudukon ulkopuolella. Säilö luo implisiittisiä ruudukkoraitoja lisäämällä implisiittisiä rivejä ruudukkoon. Nämä viivat yhdessä eksplisiittisten ruudukoiden kanssa muodostavat implisiittiset. Tässä on esimerkki:
Tässä esimerkissä määrittelemme nimenomaisesti kaksi riviä ja kaksi saraketta, joihin mahtuu neljä ruudukkoelementtiä. Ruudukkoelementtejä on kuitenkin kuusi, joten implisiittinen ruudukko luotiin kahden lisäelementin mukauttamiseksi.
Ja se on erittäin hyvä asia, jos implisiittistä ruudukkoa ei olisi luotu, kaksi lisäelementtiä olisivat saaneet aikaan täydellisen sotkun ruudukossa.
Raidan koon asettaminen implisiittisille ruudukoille
Olet ehkä huomannut, että ylimääräinen rivi ei ole yhtä korkea kuin kaksi edellistä. Tämä johtuu siitä, että asetamme rivin korkeuden grid-template-rows -ominaisuudessa, mutta se koskee vain eksplisiittisiä ruudukoita. Implisiittisten ruudukoiden rivin korkeus on asetettava grid-auto-rows -ominaisuuden avulla. Mutta koska emme tehneet tätä, kävi ilmi, että implisiittinen rivi käyttää automaattista raidan kokoa, joka perustuu sisältöön. Näin raidan koon ominaisuudet sijaitsevat:
Yleisesti ottaen se menee näin:
Eksplisiittinen ruudukko käyttää grid-template-rivejä ja grid-template-sarakkeita
Implisiittinen ruudukko käyttää grid-auto-rivejä ja grid-auto-sarakkeita
Tässä tapauksessa meidän ei välttämättä tarvitse määrittää loppuarvoja ensimmäiselle elementille, koska se kattaa vain yhden raidan. Sama voidaan sanoa toisesta ruudukkoelementistä. Oletusarvoisesti, jos et määritä loppuriviä, elementti kattaa vain yhden raidan.
Itse asiassa ensimmäiselle ruudukkoelementille ei tarvinnut määrittää mitään sijaintia, koska se on tietyssä paikassa, se olisi ollut siellä joka tapauksessa. Mutta jos emme olisi määrittäneet toisen elementin sijaintia, se olisi sijainnut välittömästi ensimmäisen elementin jälkeen, miehittäen vain yhden raidan.
Ruudukkoviivojen nimeäminen
Voit myös nimetä ruudukon viivoja, jotta niihin on helpompi viitata. Tämä voidaan tehdä asettamalla grid-template-rows- ja grid-template-columns-ominaisuudet, esimerkiksi tässä:
#grid ( näyttö: grid; /* Aseta jäljet ja nimeä rivit */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; korkeus: 90vh; ). */ : col3 -end)
Nimetyt rivit voivat olla joko eksplisiittisiä tai implisiittisiä. Implisiittiset nimetyt viivat luodaan aina, kun luot nimettyjä ruudukkoalueita käyttämällä grid-template-areas .
Nimi on otettu ruudukkoalueelta, jonka loppuun on lisätty -alku ja -loppu riippuen siitä, onko se rivin alku vai loppu.
Siten jokaiselle otsikko-nimiselle ruudukkoalueelle luodaan neljä implisiittistä riviä. Kaksi on nimetty otsikko-alku ja sarakkeen alku nimetyllä ruudukkoalueella ja kaksi vastaavasti otsikko-pää.
Nimetyt ruudukkoalueet
Ruudukkoalueet voidaan nimetä itse ruudukkosäilön grid-template-areas-ominaisuudessa. Näin teimme aiemmin, kun loimme sivustomallin. Tämän palauttamiseksi muistiin se näyttää tältä:
#grid ( näyttö: grid; /* Nimeä ruudukkoalue */ grid-template-areas: "a a" "b c"; ... ) ... /* Käytä nyt jokaista ruudukkoelementtiä nimetylle ruudukkoalueelle */ # a ( ruudukkoalue: a; ) #b ( ruudukkoalue: b; ) #c ( ruudukkoalue: c; )
Voit merkitä tyhjän solun käyttämällä pistettä (.) tai pistesarjaa ilman välilyöntejä. Esimerkiksi:
Ruudukkomalli-alueet: "a a" ". b"; Tai grid-template-areas: "header header" "... content";
Ruudukon sijoittelun ominaisuudet
On kolme lyhyttä ominaisuutta, joita voidaan käyttää yllä olevissa esimerkeissä mainittujen pitkän ruudukon asetteluominaisuuksien sijaan. Tänne ne kaikki sopivat.
grid-area - Tämä ominaisuus on lyhenne sanoista:
grid-column - Tämä ominaisuus on lyhenne sanoista:
grid-column-start — ilmaisee, mikä ruudukkoelementin sarakerivi alkaa ja kuinka monelle raitalle se ulottuu.
grid-column-end — ilmaisee mille sarakeriville ruudukkoelementti päättyy ja kuinka monelle raitalle se ulottuu.
grid-row — tämä ominaisuus on lyhenne sanoista:
grid-row-start — ilmaisee, miltä riviltä ruudukkoelementti alkaa ja kuinka monelle raidalle se ulottuu.
grid-row-end - ilmaisee, mikä rivirivi on elementin viimeinen ja kuinka monta raitaa se venyy.
Voit myös käyttää grid-auto-flow -ominaisuutta, joka mainittiin tätä edeltävässä luvussa. Se määrittää, kuinka automaattisesti sijoitetut ruudukkoelementit sijoitetaan ruudukkoon. Automaattisesti sijoitetut elementit ovat sellaisia, joita ei ole erikseen sijoitettu käyttämällä mitään yllä olevista ominaisuuksista.
Luo sisäkkäinen ruudukko
Grid-elementit voivat itse muodostua ruudukoiksi CSS Gridissä. Eli voit upottaa ruudukkoelementin toiseen ruudukkoelementtiin ja luoda siten sisäkkäisen ruudukon.
Tällaisen sisäkkäisen ruudukon luomiseksi sinun tarvitsee vain lisätä näyttö: grid (tai näyttö: inline-grid) ruudukkoelementtiin ja siitä tulee itse ruudukko. Voit myös luoda aliruudukon käyttämällä display: subgridiä. , Miten tämä tapahtuu.
Perintö
Suurin osa ruudukon ominaisuuksista ei ole peritty, mikä tarkoittaa, että sisäkkäinen ruudukkosi ei peri ylätason ruudukon arvoja. Tämän avulla voit tehdä muutoksia ylätason ruudukkoon vaikuttamatta tahattomasti alatason ruudukkoon.
Olet esimerkiksi määrittänyt grid-auto-flow: -sarakkeen ylätason ruudukkoon, mutta et määrittänyt ominaisuutta sisäkkäiseen ruudukkoon. Tässä tapauksessa sisäkkäinen ruudukko asetetaan riviksi, koska se on tämän ominaisuuden alkuarvo.
Huomaa, että ylätason ruudukossa numerot menevät pystysuunnassa alas sarakkeita pitkin rivin vaakasuuntaisen sijaan, mutta sisäkkäinen ruudukko kulkee silti vaakasuunnassa riviä pitkin.
Alaverkot
CSS Grid -moduuli määrittää näyttöominaisuuden aliruudukon arvon. Kaikki selaimet eivät kuitenkaan vielä tue sitä. Tämän arvon pitäisi osoittautua varsin hyödylliseksi.
Subgrid on sisäkkäinen ruudukko, mutta siinä on näyttö: subgrid . Tämä tekee siitä erityisen tyypin ruudukkosäiliön, joka osallistuu ylätason ruudukon koon asettamiseen. Toisin sanoen aliruudukon sisältö vaikuttaa ylätason ruudukon kokoon, jolloin sisältö voidaan jakaa kahteen ruudukkoon. Alla on esimerkki siitä, missä tämä ominaisuus voi olla hyödyllinen.
Tässä on luettelo elementeistä:
Ja tässä on CSS, jossa lista on ruudukko ja listan elementit aliruudukot.
Ul ( näyttö: ruudukko; ruudukko: automaattinen virtaus / auto 1fr; ) li ( näyttö: aliverkko; ruudukkosarake: jänne 2; marginaali: 0,5 em; reunus: kiinteä; täyte: 0,5 em; ) etiketti ( ruudukkosarake: 1; ) syöte (ruudukko-sarake: 2; )
Tässä esimerkissä tunniste ja syöte näytetään rivissä siten, että jokaisen luettelokohteen ympärillä on reunus. Kullekin listaelementille aliruudukon antaminen tarkoittaa, että syöttölomakkeiden kohdistamisessa ei pitäisi olla ongelmia, koska jokainen listaelementti osallistuu pääruudukon koon muotoiluun.
Automaattiset sijoituslomakkeet
Voit käyttää eksplisiittisiä ruudukoita etuna luodessasi lomakkeita tai muita elementtikokoelmia, jotka vaativat ruudukon kohdistusta. Voit esimerkiksi käyttää eksplisiittisiä ruudukoita tällaisen lomakkeen luomiseen:
Ja kun lisäät lomakeelementtejä merkintään, eksplisiittinen ruudukko lisää rivejä niiden mukauttamiseksi. Joten muodon luomiseksi päälle tarvitsemme tämän merkinnän.
Ei tarvita lisämerkintöjä kaiken järjestämiseksi oikein. Eikä myöskään ole tarvetta lisätä ylimääräisiä luokkia lomakeelementeille. Lisäämme vain yhden luokan
Voit lisätä uusia lomakeelementtejä automaattisesti ja ne mukautuvat automaattisesti muihin, kun ne sijoitetaan eksplisiittiseen ruudukkoon.
Tämä on mahdollista, koska teimme itse lomakkeesta ruudukon (näyttö: ruudukko, jota käytetään .myForm-muodossa). Ja sitten he ilmoittivat, että tarrat menevät yhteen sarakkeeseen ja säätimet toiseen.
Tässä on toinen esimerkki, tällä kertaa vielä enemmän elementtejä:
Kun aliruudukot yleistyvät selaimissa, on mahdollista kohdistaa lomakeelementtejä, jotka eivät ole suoria jälkeläisiä
