CSS Grid'i veergude suuruse jõudluse profileerimine: sügav sissevaade paigutuse arvutamise analüütikasse

CSS Grid on muutnud veebipaigutuse revolutsiooniliseks, pakkudes enneolematut võimsust ja paindlikkust keerukate, responsiivsete disainide loomiseks. Funktsioonidega nagu `fr` ühik, `minmax()` ja sisust sõltuv suurus, saame ehitada liideseid, mis kunagi olid unistuste teema, ja seda sageli üllatavalt vähese koodiga. Kuid suure võimuga kaasneb suur vastutus – ja veebi jõudluse maailmas seisneb see vastutus meie disainivalikute arvutusliku kulu mõistmises.

Kuigi me keskendume sageli JavaScripti täitmise või piltide laadimise optimeerimisele, on oluline ja sageli tähelepanuta jäetud jõudluse pudelikael brauseri paigutuse arvutamise faas. Iga kord, kui brauser peab määrama elementide suuruse ja asukoha lehel, teostab see 'Layout' (Paigutus) operatsiooni. Keerukas CSS, eriti keeruliste grid-struktuuridega, võib muuta selle protsessi arvutuslikult kulukaks, põhjustades loiuid interaktsioone, viivitusega renderdamist ja halba kasutajakogemust. Siin muutub jõudluse profileerimine mitte ainult silumistööriistaks, vaid ka disaini- ja arendusprotsessi oluliseks osaks.

See põhjalik juhend viib teid sügavale CSS Grid'i jõudluse maailma. Me liigume süntaksist kaugemale ja uurime jõudluserinevuste 'miksi'. Õpite kasutama brauseri arendajatööriistu, et mõõta, analüüsida ja diagnoosida paigutuse pudelikaelu, mis on põhjustatud teie grid'i veergude suuruse strateegiatest. Lõpuks olete varustatud ehitama paigutusi, mis pole mitte ainult ilusad ja responsiivsed, vaid ka välkkiired.

Brauseri renderdamisprotsessi mõistmine

Enne kui saame optimeerida, peame kõigepealt mõistma protsessi, mida püüame parandada. Kui brauser renderdab veebilehte, järgib see sammude jada, mida sageli nimetatakse kriitiliseks renderdamisteeks (Critical Rendering Path). Kuigi täpne terminoloogia võib brauserite vahel veidi erineda, on põhietapid üldiselt järjepidevad:

• Style (Stiil): Brauser parandab CSS-i ja määrab iga DOM-elemendi lõplikud stiilid. See hõlmab selektorite lahendamist, kaskaadi käsitlemist ja iga sõlme arvutatud stiili kalkuleerimist.
• Layout (Paigutus või Reflow): See on meie peamine fookus. Pärast stiilide arvutamist kalkuleerib brauser iga elemendi geomeetria. See selgitab välja, kuhu täpselt iga element lehel peaks minema ja kui palju ruumi see võtab. See loob 'paigutuspuu' või 'renderduspuu', mis sisaldab geomeetrilist teavet nagu laiused, kõrgused ja asukohad.
• Paint (Värvimine): Selles etapis täidab brauser pikslid. See võtab eelmise sammu paigutuspuu ja muudab selle ekraanil olevateks piksliteks. See hõlmab teksti, värvide, piltide, äärjoonte ja varjude joonistamist – sisuliselt kõiki elementide visuaalseid osi.
• Composite (Kompositsioon): Brauser joonistab erinevad värvitud kihid ekraanile õiges järjekorras. Elemente, mis kattuvad või millel on spetsiifilised omadused nagu `transform` või `opacity`, käsitletakse sageli oma kihtides, et optimeerida järgnevaid uuendusi.

Miks on 'Layout' faas Grid'i jõudluse jaoks kriitiline

Lihtsa plokk- ja tekstisisese dokumendi paigutusfaas on suhteliselt sirgjooneline. Brauser saab sageli töödelda elemente ühe läbimisega, arvutades nende mõõtmed vanemate põhjal. CSS Grid aga lisab uue keerukuse taseme. Grid-konteiner on piirangutel põhinev süsteem. Grid'i veeru või elemendi lõplik suurus sõltub sageli teiste veergude suurusest, konteineris saadaolevast ruumist või isegi selle naaberelementide sisu olemuslikust suurusest.

Brauseri paigutusmootor peab lahendama selle keeruka võrrandisüsteemi, et jõuda lõpliku paigutuseni. See, kuidas te oma grid'i veerge defineerite – teie suuruseühikute ja funktsioonide valik – mõjutab otseselt selle süsteemi lahendamise keerukust ja seega ka aega. Seetõttu võib näiliselt väike muudatus `grid-template-columns`'is omada ebaproportsionaalselt suurt mõju renderdamise jõudlusele.

CSS Grid'i veergude suuruse anatoomia: jõudluse perspektiiv

Tõhusaks profileerimiseks peate mõistma teie käsutuses olevate tööriistade jõudlusomadusi. Vaatame läbi levinumad veergude suuruse mehhanismid ja analüüsime nende potentsiaalset arvutuslikku kulu.

1. Staatiline ja ennustatav suurus

Need on kõige lihtsamad ja jõudsamad valikud, sest need annavad paigutusmootorile selget ja ühemõttelist teavet.

• Fikseeritud ühikud (`px`, `rem`, `em`): Kui defineerite veeru kui `grid-template-columns: 200px 10rem;`, teab brauser nende veergude täpset suurust kohe. Keerulist arvutust pole vaja. See on arvutuslikult väga odav.
• Protsentuaalsed ühikud (`%`): Protsent lahendatakse suhtena grid-konteineri suurusesse. Kuigi see nõuab ühte lisasammu (vanema laiuse saamine), on see siiski väga kiire ja deterministlik arvutus. Brauser saab need suurused lahendada paigutusprotsessi varajases etapis.

Jõudlusprofiil: Ainult staatilist ja protsentuaalset suurust kasutavad paigutused on tavaliselt väga kiired. Brauser suudab grid'i geomeetria lahendada üheainsa tõhusa läbimisega.

2. Paindlik suurus

See kategooria lisab paindlikkust, võimaldades veergudel kohaneda saadaoleva ruumiga. See on veidi keerulisem kui staatiline suurus, kuid siiski kaasaegsetes brauserites kõrgelt optimeeritud.

• Murdosaühikud (`fr`): `fr` ühik esindab murdosa saadaolevast ruumist grid-konteineris. `fr` ühikute lahendamiseks lahutab brauser esmalt kõigi mittepaindlike veergude (nagu `px` või `auto` veerud) poolt võetud ruumi ja jagab seejärel järelejäänud ruumi `fr` veergude vahel vastavalt nende murdosale.

Jõudlusprofiil: `fr` ühikute arvutamine on mitmeastmeline protsess, kuid see on hästi defineeritud matemaatiline operatsioon, mis ei sõltu grid'i elementide sisust. Enamiku tavaliste kasutusjuhtude puhul on see äärmiselt jõudus.

3. Sisupõhine suurus (jõudluse tulipunk)

Siin lähevad asjad huvitavaks – ja potentsiaalselt aeglaseks. Sisupõhise suuruse märksõnad annavad brauserile korralduse määrata veeru suurus selle sees olevate elementide sisu põhjal. See loob võimsa seose sisu ja paigutuse vahel, kuid sellel on arvutuslik kulu.

• `min-content`: Esindab sisu olemuslikku minimaalset laiust. Teksti puhul on see tavaliselt pikima sõna või murdmatu stringi laius. Selle arvutamiseks peab brauseri paigutusmootor sisu tinglikult paigutama, et leida see kõige laiem osa.
• `max-content`: Esindab sisu olemuslikku eelistatud laiust, mis on laius, mille see võtaks ilma muude reavahetusteta kui need, mis on selgesõnaliselt määratud. Selle arvutamiseks peab brauser sisu tinglikult paigutama ühele lõpmatult pikale reale.
• `auto`: See märksõna on kontekstist sõltuv. Kui seda kasutatakse grid'i veergude suuruse määramiseks, käitub see üldiselt nagu `max-content`, välja arvatud juhul, kui element on venitatud või sellel on määratud suurus. Selle keerukus sarnaneb `max-content`'iga, sest brauser peab sageli sisu mõõtma, et selle suurust kindlaks teha.

Jõudlusprofiil: Need märksõnad on arvutuslikult kõige kulukamad. Miks? Sest need loovad kahesuunalise sõltuvuse. Konteineri paigutus sõltub elementide sisu suurusest, kuid elementide sisu paigutus võib sõltuda ka konteineri suurusest. Selle lahendamiseks võib brauseril olla vaja teha mitu paigutuse läbimist. See peab esmalt mõõtma iga üksiku elemendi sisu selles veerus, enne kui saab isegi alustada veeru enda lõpliku suuruse arvutamist. Paljude elementidega grid'i puhul võib see muutuda oluliseks pudelikaelaks.

4. Funktsioonipõhine suurus

Funktsioonid pakuvad võimalust kombineerida erinevaid suuruse mudeleid, pakkudes nii paindlikkust kui ka kontrolli.

• `minmax(min, max)`: See funktsioon defineerib suuruse vahemiku. `minmax()` jõudlus sõltub täielikult selle argumentide jaoks kasutatud ühikutest. `minmax(200px, 1fr)` on väga jõudus, kuna see kombineerib fikseeritud väärtuse paindlikuga. Kuid `minmax(min-content, 500px)` pärib `min-content`'i jõudluskulu, sest brauser peab selle ikkagi arvutama, et näha, kas see on suurem kui maksimaalne väärtus.
• `fit-content(value)`: See on tegelikult piiraja. See on samaväärne `minmax(auto, max-content)`'iga, kuid piiratud antud `value`'ga. Seega käitub `fit-content(300px)` nagu `minmax(min-content, max(min-content, 300px))`. See kannab ka sisupõhise suuruse jõudluskulu.

Tööriistad: profileerimine Chrome DevTools'iga

Teooria on kasulik, kuid andmed on määravad. Et mõista, kuidas teie grid-paigutused reaalses maailmas toimivad, peate neid mõõtma. Google Chrome'i DevTools'i Performance paneel on selleks asendamatu tööriist.

Kuidas salvestada jõudlusprofiili

Järgige neid samme, et koguda vajalikke andmeid:

1. Avage oma veebileht Chrome'is.
2. Avage DevTools (F12, Ctrl+Shift+I või Cmd+Opt+I).
3. Navigeerige Performance vahekaardile.
4. Veenduge, et "Web Vitals" märkeruut oleks märgistatud, et saada kasulikke markereid oma ajajoonele.
5. Klõpsake Record nuppu (ring) või vajutage Ctrl+E.
6. Tehke toiming, mida soovite profileerida. See võib olla esialgne lehe laadimine, brauseriakna suuruse muutmine või toiming, mis lisab dünaamiliselt sisu grid'i (nagu filtri rakendamine). Need on kõik toimingud, mis käivitavad paigutuse arvutusi.
7. Klõpsake Stop või vajutage uuesti Ctrl+E.
8. DevTools töötleb andmed ja esitab teile üksikasjaliku ajajoone.

Leekdiagrammi (Flame Chart) analüüsimine

Leekdiagramm on teie salvestuse peamine visuaalne esitus. Paigutuse analüüsimiseks peate keskenduma "Main" lõime jaotisele.

Otsige pikki, lillasid ribasid sildiga "Rendering". Nende seest leiate tumedamad lillad sündmused sildiga "Layout". Need on konkreetsed hetked, mil brauser arvutab lehe geomeetriat.

• Pikad paigutuse ülesanded: Üksik, pikk 'Layout' plokk on punane lipp. Hõljutage kursorit selle kohal, et näha selle kestust. Iga paigutuse ülesanne, mis võtab võimsal masinal rohkem kui mõne millisekundi (nt > 10-15 ms), väärib uurimist, kuna see on vähem võimsatel seadmetel palju aeglasem.
• Layout Thrashing: Otsige palju väikeseid 'Layout' sündmusi, mis toimuvad kiiresti järjest, sageli vaheldumisi JavaScripti ('Scripting' sündmused) sündmustega. See muster, mida tuntakse kui layout thrashing, tekib siis, kui JavaScript loeb korduvalt geomeetrilist omadust (nagu `offsetHeight`) ja seejärel kirjutab stiili, mis selle kehtetuks muudab, sundides brauserit paigutust ikka ja jälle uuesti arvutama.

Kokkuvõtte ja jõudlusmonitori kasutamine

• Summary (Kokkuvõte) vahekaart: Pärast ajaperioodi valimist leekdiagrammis annab allosas olev Summary vahekaart teile sektordiagrammi, mis jaotab kulutatud aja. Pöörake erilist tähelepanu protsendile, mis on omistatud "Rendering" ja eriti "Layout" osale.
• Performance Monitor (Jõudlusmonitor): Reaalajas analüüsiks avage jõudlusmonitor (DevTools'i menüüst: More tools > Performance monitor). See pakub reaalajas graafikuid protsessori kasutuse, JS-i kuhja suuruse, DOM-sõlmede ja kriitiliselt olulise Layouts/sec kohta. Lehega suhtlemine ja selle graafiku hüppamise jälgimine annab teile kohe teada, millised toimingud käivitavad kulukaid paigutuse ümberarvutusi.

Praktilised profileerimise stsenaariumid: teooriast praktikasse

Paneme oma teadmised proovile mõne praktilise näitega. Võrdleme erinevaid grid'i implementatsioone ja analüüsime nende hüpoteetilisi jõudlusprofiile.

Stsenaarium 1: Fikseeritud ja paindlik (`px` ja `fr`) vs. sisupõhine (`auto`)

Kujutage ette 100 tootega tooteruudustikku. Võrdleme kahte lähenemist veergudele.

Lähenemine A (jõudus): Kasutades `minmax()` fikseeritud miinimumi ja paindliku maksimumiga.

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Lähenemine B (potentsiaalselt aeglane): Kasutades `auto` või `max-content`, et lasta sisul veeru suurust määrata.

grid-template-columns: repeat(auto-fill, minmax(auto, 300px));

Analüüs:

• Lähenemises A on brauseri ülesanne lihtne. See teab, et iga elemendi minimaalne laius on 250px. See saab kiiresti arvutada, mitu elementi mahub konteineri laiusesse, ja seejärel jaotada ülejäänud ruumi nende vahel. See on kiire, väline suuruse määramise lähenemine, kus konteiner on kontrolli all. Jõudlusprofiili paigutuse ülesanne on väga lühike.
• Lähenemises B on brauseril palju raskem töö. `auto` märksõna (selles kontekstis laheneb sageli `max-content`'iks) tähendab, et ühe veeru laiuse määramiseks peab brauser esmalt hüpoteetiliselt renderdama kõigi 100 tootekardi sisu, et leida selle `max-content` laius. Seejärel kasutab ta seda mõõtmist oma grid'i lahendamise algoritmis. See sisemine suuruse määramise lähenemine nõuab tohutul hulgal eeltööd mõõtmisega, enne kui lõplik paigutus saab kindlaks määratud. Jõudlusprofiili paigutuse ülesanne on oluliselt pikem, potentsiaalselt suurusjärgu võrra.

Stsenaarium 2: Sügavalt pesastatud grid'ide kulu

Grid'i jõudlusprobleemid võivad kuhjuda. Kujutage ette paigutust, kus vanem-grid kasutab sisupõhist suurust ja selle lapsed on samuti keerukad grid'id.

Näide:

Põhilehe paigutus on kaheveeruline grid: `grid-template-columns: max-content 1fr;`. Esimene veerg on külgriba, mis sisaldab erinevaid vidinaid. Üks neist vidinatest on kalender, mis on ise ehitatud CSS Grid'iga.

Analüüs:

Brauseri paigutusmootor seisab silmitsi keerulise sõltuvusahelaga:

1. Põhilehe `max-content` veeru lahendamiseks peab see arvutama külgriba `max-content` laiuse.
2. Külgriba laiuse arvutamiseks peab see arvutama kõigi selle laste, sealhulgas kalendri vidina, laiuse.
3. Kalendri vidina laiuse arvutamiseks peab see lahendama oma sisemise grid-paigutuse.

Vanema arvutus on blokeeritud, kuni lapse paigutus on täielikult lahendatud. See sügav sidusus võib viia üllatavalt pikkade paigutusaegadeni. Kui ka laps-grid kasutab sisupõhist suurust, läheb probleem veelgi hullemaks. Sellise lehe profileerimine näitaks tõenäoliselt ühte, väga pikka 'Layout' ülesannet esialgse renderdamise ajal.

Optimeerimisstrateegiad ja parimad praktikad

Meie analüüsi põhjal saame tuletada mitmeid rakendatavaid strateegiaid suure jõudlusega grid-paigutuste ehitamiseks.

1. Eelistage välist suuruse määramist sisemisele

See on grid'i jõudluse kuldreegel. Kui vähegi võimalik, laske grid-konteineril määratleda oma veergude mõõtmed, kasutades ühikuid nagu `px`, `rem`, `%` ja `fr`. See annab brauseri paigutusmootorile selge ja ennustatava piirangute komplekti, millega töötada, tulemuseks on kiiremad arvutused.

Selle asemel (sisemine):

grid-template-columns: repeat(auto-fit, max-content);

Eelistage seda (väline):

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

2. Piirake sisupõhise suuruse ulatust

`min-content` ja `max-content` jaoks on olemas kehtivaid kasutusjuhte, näiteks rippmenüüde või vormiväljade kõrval olevate siltide jaoks. Kui peate neid kasutama, proovige nende mõju piirata:

• Rakendage vähestele veergudele: Kasutage neid ühel veerul või real, mitte korduval mustril sadade elementidega.
• Piirake vanemat: Asetage sisupõhist suurust kasutav grid konteinerisse, millel on `max-width`. See annab paigutusmootorile piiri, mis võib mõnikord aidata arvutust optimeerida.
• Kombineerige `minmax()`-iga: Pakkuge sisupõhise märksõna kõrval mõistlikku miinimum- või maksimumväärtust, näiteks `minmax(200px, max-content)`. See võib anda brauserile arvutuste alustamiseks edumaa.

3. Mõistke ja kasutage `subgrid`'i targalt

`subgrid` on võimas funktsioon, mis võimaldab pesastatud grid'il üle võtta oma vanem-grid'i veergude definitsiooni. See on joondamiseks fantastiline.

Jõudlusmõjud: `subgrid` võib olla kahe teraga mõõk. Ühelt poolt suurendab see sidusust vanem- ja laps-paigutuse arvutuste vahel, mis võiks teoreetiliselt aeglustada esialgset, keerukat paigutuse lahendamist. Teisest küljest, tagades elementide täiusliku joonduse algusest peale, võib see vältida hilisemaid paigutuse nihkeid ja ümberpaigutusi, mis võiksid tekkida, kui prooviksite joondust käsitsi teiste meetoditega jäljendada. Parim nõuanne on profileerida. Kui teil on keeruline pesastatud paigutus, mõõtke selle jõudlust koos `subgrid`'iga ja ilma, et näha, kumb on teie konkreetse kasutusjuhtumi jaoks parem.

4. Virtualiseerimine: ülim lahendus suurte andmekogumite jaoks

Kui ehitate grid'i sadade või tuhandete elementidega (nt andmetabel, lõpmatult keritav pildigalerii), ei ületa ükski CSS-i näpistamine põhiprobleemi: brauser peab ikkagi arvutama iga üksiku elemendi paigutuse.

Lahendus on virtualiseerimine (või 'aknastamine'). See on JavaScripti-põhine tehnika, kus renderdate ainult käputäie DOM-elemente, mis on hetkel vaateaknas nähtavad. Kasutaja kerides taaskasutate neid DOM-sõlmi ja asendate nende sisu. See hoiab paigutuse arvutamise ajal brauseri poolt käsitletavate elementide arvu väikesena ja konstantsena, olenemata sellest, kas teie andmekogumis on 100 või 100 000 elementi.

Teegid nagu `react-window` ja `tanstack-virtual` pakuvad selle mustri jaoks robustseid implementatsioone. Tõeliselt suuremahuliste grid'ide jaoks on see kõige tõhusam jõudluse optimeerimine, mida saate teha.

Juhtumiuuring: tootekataloogi grid'i optimeerimine

Vaatame läbi realistliku optimeerimise stsenaariumi globaalse e-kaubanduse veebisaidi jaoks.

Probleem: Tootekataloogi leht tundub loium. Kui brauseriakna suurust muudetakse või filtreid rakendatakse, on märgatav viivitus enne, kui tooted oma uutele positsioonidele ümber paigutuvad. Core Web Vitals'i skoor Interaction to Next Paint (INP) jaoks on halb.

Algne kood ("Enne" seisund):

Grid on defineeritud olema väga paindlik, võimaldades tootekartidel dikteerida veergude laiuseid nende sisu põhjal (nt pikad tootenimed).

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, fit-content(320px));
gap: 1rem;
}

Jõudlusanalüüs:

1. Salvestame jõudlusprofiili brauseriakna suuruse muutmise ajal.
2. Leekdiagramm näitab pikka, korduvat 'Layout' ülesannet iga kord, kui suuruse muutmise sündmus käivitub, võttes keskmisel seadmel üle 80 ms.
3. `fit-content()` funktsioon tugineb `min-content` ja `max-content` arvutustele. Profileerija kinnitab, et iga suuruse muutmise korral mõõdab brauser meeletult kõigi nähtavate tootekartide sisu uuesti, et grid'i struktuuri ümber arvutada. See on viivituse allikas.

Lahendus ("Pärast" seisund):

Me lülitume sisemiselt, sisupõhiselt suuruse mudelilt välisele, konteineri poolt defineeritud mudelile. Määrame kaartidele kindla miinimumsuuruse ja laseme neil painduda kuni murdosani saadaolevast ruumist.

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}

Tootekardi CSS-i lisame reeglid, et käsitleda potentsiaalselt pikka sisu graatsiliselt selles uues, jäigemas konteineris:

.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Tulemus:

1. Salvestame uue jõudlusprofiili suuruse muutmise ajal.
2. Leekdiagramm näitab nüüd, et 'Layout' ülesanne on uskumatult lühike, järjepidevalt alla 5 ms.
3. Brauser ei pea enam sisu mõõtma. See teostab lihtsa matemaatilise arvutuse konteineri laiuse ja `280px` miinimumi põhjal.
4. Kasutajakogemus on muutunud. Suuruse muutmine on sujuv ja hetkeline. Filtrite rakendamine tundub kiire, sest brauser suudab uue paigutuse peaaegu koheselt arvutada.

Märkus brauseriteüleste tööriistade kohta

Kuigi see juhend on keskendunud Chrome DevTools'ile, on oluline meeles pidada, et kasutajatel on erinevad brauserieelistused. Firefoxi arendajatööriistadel on suurepärane Performance paneel (sageli nimetatakse 'Profiler'), mis pakub sarnaseid leekdiagramme ja analüüsivõimalusi. Ka Safari Web Inspector sisaldab võimast 'Timelines' vahekaarti renderdamise jõudluse profileerimiseks. Testige alati oma optimeerimisi peamistes brauserites, et tagada järjepidev ja kvaliteetne kogemus kogu oma globaalsele publikule.

Kokkuvõte: jõudusate grid'ide ehitamine disaini kaudu

CSS Grid on erakordselt võimas tööriist, kuid selle kõige arenenumad funktsioonid ei ole arvutuslikult tasuta. Veebiprofessionaalidena, kes arendavad globaalsele publikule, kellel on lai valik seadmeid ja võrgutingimusi, peame olema jõudlusteadlikud arendusprotsessi algusest peale.

Peamised järeldused on selged:

• Paigutus on jõudluse pudelikael: Renderdamise 'Layout' faas võib olla kulukas, eriti keerukate, piirangutel põhinevate süsteemidega nagu CSS Grid.
• Suuruse määramise strateegia on oluline: Väline, konteineri poolt defineeritud suurus (`px`, `fr`, `%`) on peaaegu alati jõudsam kui sisemine, sisupõhine suurus (`min-content`, `max-content`, `auto`).
• Mõõtke, ärge arvake: Brauseri jõudlusprofileerijad ei ole ainult silumiseks. Kasutage neid proaktiivselt oma paigutusvalikute analüüsimiseks ja optimeerimiste kinnitamiseks.
• Optimeerige tavalise juhtumi jaoks: Suurte elementide kogumite puhul pakub lihtne, väline grid'i definitsioon paremat kasutajakogemust kui keerukas, sisuteadlik.

Integreerides jõudluse profileerimise oma tavapärasesse töövoogu, saate ehitada keerukaid, responsiivseid ja robustseid paigutusi CSS Grid'iga, olles kindel, et need pole mitte ainult visuaalselt vapustavad, vaid ka uskumatult kiired ja kättesaadavad kasutajatele kõikjal.