Tänu CSS Gridile on piltide ruudustiku loomine lihtne. Kuid ruudustiku tegemine uhkeid asju tegema pärast paigutatud pilte võib olla keeruline välja tõmmata.
Oletame, et soovite lisada piltidele uhke hõljumise efekti, kus need kasvavad, ja suumida kaugemale nendest ridadest ja veergudest, kus need asuvad? Me saame seda teha!
Lahe, eks? Kui kontrollite koodi, ei leia te JavaScripti, keerulisi valijaid ega isegi maagilised numbrid. Ja see on vaid üks näide paljudest, mida uurime!
Võrgu ehitamine
HTML-kood ruudustiku loomiseks on sama lihtne kui konteineris olevate piltide loend. Meil pole rohkemat vaja.
<div class="gallery">
<img>
<img>
<img>
<!-- etc. -->
</div>CSS-i puhul alustame ruudustiku seadistamisega, kasutades järgmist:
.gallery {
--s: 150px; /* controls the size */
--g: 10px; /* controls the gap */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}Lühidalt, meil on kaks muutujat, üks, mis juhib piltide suurust ja teine, mis määrab piltide vahe suuruse. aspect-ratio aitab hoida asju proportsioonis.
Võite küsida, miks me määratleme ainult kolm veergu, kuid mitte ühtegi rida. Ei, ma ei unustanud ridu – me lihtsalt ei pea neid selgesõnaliselt määrama. CSS Grid on võimeline üksusi automaatselt peale paigutama kaudsed read ja veerud, mis tähendab, et me saame nii palju ridu kui vaja suvalise arvu kujutiste jaoks, mille me sellele viskame. Selle asemel saame read selgesõnaliselt määratleda, kuid me peame lisama grid-auto-flow: column veendumaks, et brauser loob meie jaoks vajalikud veerud.
Siin on näide mõlema juhtumi illustreerimiseks. Erinevus seisneb selles, et üks voolab a row suund ja teine a column suunas.
Kontrollima see teine artikkel, mille kirjutasin kaudsete võrgustike ja automaatse paigutuse algoritmi kohta lisateabe saamiseks.
Nüüd, kui meil on oma ruudustik, on aeg pilte kujundada:
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}Meie loodud hõljutusefekt sõltub sellest CSS-ist. Tõenäoliselt tundub teile imelik, et teeme pilte, millel pole laiust ega kõrgust, kuid mille minimaalne laius ja kõrgus on 100%. Kuid näete, et see on päris kena trikk selle jaoks, mida me püüame saavutada.
See, mida ma siin teen, on brauserile ütlemine, et piltidel peab olema 0 laius ja kõrgus, kuid ka minimaalne kõrgus peab olema võrdne 100%… aga 100% millest? Protsentide kasutamisel on väärtus millegi muu suhtes. Sel juhul asetatakse meie pilt a sisse võrgulahter ja me peame teadma seda suurust, et teada saada, mis see on 100% on suhteline.
Brauser ignoreerib esmalt min-height: 100% ruudustiku lahtrite suuruse arvutamiseks, kuid see kasutab height: 0 selle arvutuses. See tähendab, et meie pildid ei mõjuta ruudustiku lahtrite suurust, kuna neil pole tehniliselt füüsilist suurust. Selle tulemuseks on kolm võrdset veergu ja rida, mis põhinevad ruudustiku suurusel (mille me määratlesime .gallery’s laius ja aspect-ratio). Iga ruudustiku lahtri kõrgus pole midagi muud kui muutuja --s määratlesime (sama laiuse kohta).
Nüüd, kui meil on ruudustiku lahtrite mõõtmed, kasutab brauser seda koos min-height: 100% (Ja min-width: 100%), mis sunnib pilte täitma täielikult iga ruudustiku lahtri ruumi. Kogu asi võib tunduda pisut segane, kuid peamine mõte on tagada, et ruudustik määratleks piltide suuruse, mitte vastupidi. Ma ei taha, et pilt määraks ruudustiku suuruse ja pärast hõljutusefekti lisamist saate aru, miks.
Hõljumise efekti loomine
Peame suurendama piltide skaalat, kui need hõljuvad. Saame seda teha pilti kohandades width ja height on :hover:
.gallery {
--f: 1.5; /* controls the scale factor */
}
.gallery img:hover{
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}Lisasin uue kohandatud muutuja, --f, mastaabitegurina, et reguleerida suurust hõljutamisel. Pange tähele, kuidas ma suurusmuutujat korrutan, --s, selle abil uue pildi suuruse arvutamiseks.
Aga sa ütlesid, et pildi suurus peab olema 0. Mis toimub? Ma olen eksinud…
See, mida ma ütlesin, on endiselt tõsi, kuid teen hõljuva pildi puhul erandi. Ma ütlen brauserile, et ainult ühe pildi suurus ei ole võrdne nulliga – seega aitab see kaasa ruudustiku mõõtmele –, samas kui kõik teised jäävad võrdseks 0.
Vasak pool näitab ruudustikku selle loomulikus olekus ilma hõljuvate kujutisteta, mida näitab parem pool. Kõik vasakpoolsed ruudustiku lahtrid on võrdse suurusega, kuna kõigil piltidel pole füüsilisi mõõtmeid.
Paremal küljel hõljub esimese rea teine pilt, mis annab sellele mõõtmed, mis mõjutavad ruudustiku lahtri suurust. Brauser muudab selle konkreetse ruudustiku lahtri hõljutamisel suuremaks, mis aitab kaasa üldisele suurusele. Ja kuna kogu ruudustiku suurus on määratud (kuna me määrasime fikseeritud width kohta .gallery), reageerivad teised ruudustiku lahtrid loogiliselt, muutudes väiksemaks, et säilitada .gallery's üldine suurus taktitundeliselt.
See on meie suumiefekt tegevuses! Ainult ühe pildi suurust suurendades mõjutame kogu ruudustiku konfiguratsiooni ja me ütlesime enne, et ruudustik määrab piltide suuruse nii, et iga pilt ulatub oma ruudustiku lahtrisse, et täita kogu ruum.
Sellele lisame puudutuse transition ja kasutamise object-fit et vältida pildi moonutusi ja illusioon on täiuslik!
Tean, et triki taga peituvat loogikat ei ole lihtne mõista. Ärge muretsege, kui te sellest täielikult aru ei saa. Kõige olulisem on mõista kasutatava koodi struktuuri ja seda, kuidas seda muuta, et saada rohkem variatsioone. Seda me järgmisena teeme!
Lisan veel pilte
Lõime 3 × 3 ruudustiku, et selgitada peamist nippi, kuid arvatavasti olete arvanud, et meil pole vaja sellega peatuda. Saame muuta veergude ja ridade arvu muutujateks ja lisada nii palju pilte, kui tahame.
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}Meil on ridade ja veergude arvu jaoks kaks uut muutujat. Seejärel määrame nende abil lihtsalt oma ruudustiku laiuse ja kõrguse. Sama jaoks grid-template-columns mis kasutab --m muutuv. Ja nagu varemgi, ei pea me ridu selgesõnaliselt määratlema, kuna CSS-ruudustiku automaatse paigutuse funktsioon teeb selle töö meie eest ära, olenemata sellest, kui palju pildielemente me kasutame.
Miks mitte erinevad laiuse ja kõrguse väärtused? Seda saame teha:
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--h: 120px; /* control the height */
--w: 150px; /* control the width */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}
.gallery img:hover{
width: calc(var(--w)*var(--f));
height: calc(var(--h)*var(--f));
}Me asendame --s kahe muutujaga, üks laiuse jaoks, --wja teine kõrguse jaoks, --h. Seejärel kohandame kõike muud vastavalt.
Niisiis, alustasime fikseeritud suuruse ja elementide arvuga ruudustikust, kuid seejärel koostasime uue muutujate komplekti, et saada soovitud konfiguratsioon. Peame vaid lisama nii palju pilte, kui tahame, ja kohandama CSS-i muutujaid vastavalt. Kombinatsioonid on piiramatud!
Piltide täisekraaniga galerii
Aga täisekraani versioon? Jah, see on ka võimalik. Kõik, mida me vajame, on teada, millised väärtused peame oma muutujatele määrama. Kui tahame N pildiridu ja tahame, et meie ruudustik oleks täisekraanil, peame esmalt lahendama kõrguse 100vh:
var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vhSama loogika laiuse puhul, aga kasutades vw asemel vh:
var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vwTeeme matemaatika, et saada:
--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)Valmis!
See on täpselt sama HTML, kuid mõne värskendatud muutujaga, mis muudavad ruudustiku suurust ja käitumist.
Pange tähele, et olen välja jätnud valemi, mille me varem määrasime .gallerys width ja height ja asendasid need 100vw ja 100vh, vastavalt. Valem annab meile sama tulemuse, kuid kuna me teame, millist väärtust me tahame, saame kogu selle täiendava keerukuse kõrvale jätta.
Samuti saame lihtsustada --h ja --w eemaldades võrrandist tühimiku selle kasuks:
--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */See paneb hõljuva pildi veidi rohkem kasvama kui eelmises näites, kuid see pole suurem asi, kuna saame skaalat juhtida --f muutuja, mida me kordajana kasutame.
Ja kuna muutujaid kasutatakse ühes kohas, saame koodi siiski lihtsustada, eemaldades need täielikult:
Oluline on märkida, et see optimeerimine kehtib ainult täisekraanil kuvatava näite puhul, mitte meie käsitletud näidete kohta. See näide on konkreetne juhtum, kus saame muuta koodi kergemaks, eemaldades osa keerukast arvutustööst, mida teistes näidetes vajasime.
Meil on tegelikult kõik, mida vajame populaarse laienevate paneelide mustri loomiseks:
Kaevame veelgi sügavamale
Kas märkasite, et meie mastaabitegur võib olla väiksem kui 1? Hõljuva pildi suuruse saame määrata väiksemaks kui --h or --w aga pilt läheb hõljumisel suuremaks.
Võrgustiku lahtri esialgne suurus on võrdne --w ja --h, miks siis väiksemad väärtused moodustavad ruudustiku lahtri suurem? Kas rakk ei peaks saama väiksem, või vähemalt säilitama oma esialgse suuruse? Ja mis on ruudustiku lahtri lõplik suurus?
Peame süvenema sellesse, kuidas CSS Grid algoritm ruudustiku lahtrite suuruse arvutab. Ja see hõlmab CSS Gridi vaikeseadete mõistmist venitus joondamine.
Siin on näide loogika mõistmiseks.
Demo vasakul küljel määratlesin kahe veeru koos auto laius. Saame intuitiivse tulemuse: kaks võrdset veergu (ja kaks võrdset ruudustiku lahtrit). Kuid ruudustiku, mille seadsin üles demo paremal küljel, kus värskendan joondust place-content: start, näib, et pole midagi.
DevTools aitab meile mõlemal juhul näidata, mis tegelikult toimub.
Teises ruudustikus on meil kaks veergu, kuid nende laius on null, nii et saame kaks ruudustiku lahtrit, mis on ahendatud ruudustiku konteineri vasakus ülanurgas. See on mitte viga, kuid ruudustiku joondamise loogiline tulemus. Kui määrame veeru (või rea) suuruse auto, see tähendab, et selle sisu määrab selle suuruse — aga meil on tühi div ilma sisuta, millele ruumi teha.
Aga sellest ajast stretch on vaikimisi joondus ja meie ruudustikus on piisavalt ruumi, venitab brauser mõlemad ruudustiku lahtrid võrdselt, et katta kogu see ala. Nii kerkib vasakpoolne ruudustik kahe võrdse veeruga.
alates spetsifikatsioon:
Pange tähele, et teatud väärtused
justify-contentjaalign-contentvõib põhjustada rajade eemaldumist (space-around,space-between,space-evenly) või suurust muudetakse (stretch).
Pange tähele "suuruse muutmist", mis on siin võti. Viimases näites kasutasin place-content mis on stenogramm justify-content ja align-content
Ja see on kuhugi maetud ruudustiku suuruse algoritm tehnilised andmed:
See samm laiendab lugusid, millel on auto maksimaalse raja suuruse määramise funktsioon jagades kõik ülejäänud positiivsed, kindel vaba ruumi võrdselt nende seas. Kui vaba ruumi on tähtajatult, Kuid võre konteiner on kindel min-laius/kõrgus, kasutage seda suurust selle sammu jaoks vaba ruumi arvutamiseks.
"Võrdselt" selgitab, miks me lõpetame võrdsete ruudustiku rakkudega, kuid see kehtib "vaba ruumi" kohta, mis on väga oluline.
Võtame eelmise näite ja lisame ühele sisu divs:
Lisasime ruudu 50px pilt. Siin on näide selle kohta, kuidas iga meie näite ruudustik sellele pildile reageerib:
Esimesel juhul näeme, et esimene lahter (punasega) on suurem kui teine (sinisega). Teisel juhul muutub esimese lahtri suurus, et see sobiks pildi füüsilise suurusega, samas kui teine lahter jääb ilma mõõtmeteta. Vaba ruum jaguneb võrdselt, kuid esimeses lahtris on rohkem sisu, mis muudab selle suuremaks.
See on matemaatika meie vaba ruumi väljaselgitamiseks:
(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px Jagades kahega - veergude arvuga - saame laiuse 72.5px iga veeru jaoks. Kuid lisame pildi suuruse, 50px, esimesse veergu, mis jätab meile ühe veeru aadressil 122.5px ja teine võrdne 72.5px.
Sama loogika kehtib ka meie piltide ruudustiku kohta. Kõigi piltide suurus on võrdne 0 (sisu puudub), samas kui hõljutatud pilt mõjutab suurust – isegi kui see on lihtsalt 1px — muutes selle ruudustiku teistest suuremaks. Sel põhjusel võib mastaabitegur olla mis tahes väärtusest suurem 0 vahel isegi kümnendkohad 0 ja 1.
Võrgustiku lahtrite lõpliku laiuse saamiseks teeme sama arvutuse, et saada järgmine:
(container width) - (sum of all gaps) - (hovered image width) = (free space)Mahuti laiuse määrab:
var(--m)*var(--w) + (var(--m) - 1)*var(--g)…ja kõik lüngad on võrdsed:
(var(--m) - 1)*var(--g)…ja hõljuva pildi jaoks on meil:
var(--w)*var(--f)Saame seda kõike arvutada meie muutujatega:
var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))Veergude arvu määrab --m , jagame selle vaba ruumi võrdselt, et saada:
var(--w)*(var(--m) - var(--f))/var(--m)…mis annab meile hõljumata piltide suuruse. Hõljutatud piltide jaoks on meil see:
var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))Kui tahame juhtida hõljuva pildi lõplikku suurust, arvestame ülaltoodud valemiga, et saada täpselt soovitud suurus. Näiteks kui tahame, et pilt oleks kaks korda suurem:
(var(--m) - var(--f))/var(--m) + var(--f) = 2Niisiis, meie skaala kordaja väärtus, --f, peab olema võrdne:
var(--m)/(var(--m) - 1)Meil on kolm veergu 3/2 = 1.5 ja see on mastaabitegur, mida kasutasin selle artikli esimeses demos, sest tahtsin hõljumisel pildi kaks korda suuremaks muuta!
Sama loogika kehtib ka kõrguse arvutamisel ja kui tahame neid mõlemaid eraldi juhtida, peame arvestama kahe skaalateguriga, et veenduda, et meil on hõljumisel konkreetne laius ja kõrgus.
.gallery {
/* same as before */
--fw: 1.5; /* controls the scale factor for the width */
--fh: 1.2; /* controls the scale factor for the height */
/* same as before */
}
.gallery img:hover{
width: calc(var(--w)*var(--fw));
height: calc(var(--h)*var(--fh));
}Nüüd teate kõiki saladusi, et luua mistahes laheda hõljutusefektiga pildiruudustik, kuid samal ajal saate äsja käsitletud matemaatika abil juhtida soovitud suurust.
Pakke kuni
Minu viimane artikkel, lõime mõne CSS-i reaga keeruka välimusega ruudustiku, mis pani kasutama CSS Gridi kaudseid ruudustiku ja automaatse paigutuse funktsioone. Selles artiklis tuginesime mõnele CSS-ruudustiku suuruse määramise trikile, et luua väljamõeldud piltide ruudustik, mis suumib kursorit ja paneb ruudustiku vastavalt kohandama. Seda kõike lihtsustatud koodiga, mida on lihtne CSS-i muutujate abil reguleerida!
Järgmises artiklis mängime kujunditega! Me kombineerime CSS-i ruudustiku maski ja lõiketeega, et saada uhke piltide ruudustik.
