Profiliranje zmogljivosti določanja velikosti sledi v CSS Gridu: Poglobljena analiza izračunov postavitve

CSS Grid je revolucioniral spletno postavitev, saj ponuja moč in prilagodljivost brez primere za ustvarjanje kompleksnih, odzivnih dizajnov. S funkcijami, kot so enota `fr`, `minmax()` in določanje velikosti glede na vsebino, lahko gradimo vmesnike, ki so bili nekoč le sanje, pogosto z presenetljivo malo kode. Vendar pa z veliko močjo pride velika odgovornost – in v svetu spletne zmogljivosti ta odgovornost leži v razumevanju računskih stroškov naših oblikovalskih odločitev.

Medtem ko se pogosto osredotočamo na optimizacijo izvajanja JavaScripta ali nalaganja slik, je pomembno in pogosto spregledano ozko grlo zmogljivosti faza izračunavanja postavitve v brskalniku. Vsakič, ko mora brskalnik določiti velikost in položaj elementov na strani, izvede operacijo 'Layout' (Postavitev). Kompleksen CSS, zlasti s sofisticiranimi mrežnimi strukturami, lahko ta proces naredi računsko drag, kar vodi do počasnih interakcij, zakasnjenega upodabljanja in slabe uporabniške izkušnje. Tu postane profiliranje zmogljivosti ne le orodje za odpravljanje napak, ampak ključni del procesa oblikovanja in razvoja.

Ta celovit vodnik vas bo popeljal na poglobljeno potovanje v svet zmogljivosti CSS Grida. Premaknili se bomo onkraj sintakse in raziskali 'zakaj' za razlikami v zmogljivosti. Naučili se boste, kako uporabljati razvijalska orodja brskalnika za merjenje, analiziranje in diagnosticiranje ozkih grl postavitve, ki jih povzročajo vaše strategije določanja velikosti sledi. Na koncu boste opremljeni za gradnjo postavitev, ki niso le lepe in odzivne, ampak tudi bliskovito hitre.

Razumevanje procesa upodabljanja v brskalniku

Preden lahko optimiziramo, moramo najprej razumeti proces, ki ga poskušamo izboljšati. Ko brskalnik upodablja spletno stran, sledi zaporedju korakov, ki se pogosto imenuje Kritična pot upodabljanja (Critical Rendering Path). Čeprav se natančna terminologija med brskalniki lahko nekoliko razlikuje, so osrednje faze na splošno dosledne:

• Slog (Style): Brskalnik razčleni CSS in določi končne sloge za vsak element DOM. To vključuje razreševanje selektorjev, obravnavanje kaskade in izračunavanje izračunanega sloga za vsako vozlišče.
• Postavitev (Layout ali Reflow): To je naš primarni fokus. Po izračunu slogov brskalnik izračuna geometrijo vsakega elementa. Ugotovi, kam natančno naj gre vsak element na strani in koliko prostora zaseda. Ustvari 'drevo postavitve' ali 'drevo upodabljanja', ki vključuje geometrijske informacije, kot so širine, višine in položaji.
• Risanje (Paint): V tej fazi brskalnik zapolni piksle. Vzame drevo postavitve iz prejšnjega koraka in ga pretvori v niz pikslov na zaslonu. To vključuje risanje besedila, barv, slik, obrob in senc – v bistvu vseh vizualnih delov elementov.
• Sestavljanje (Composite): Brskalnik izriše različne narisane plasti na zaslon v pravilnem vrstnem redu. Elementi, ki se prekrivajo ali imajo posebne lastnosti, kot sta `transform` ali `opacity`, se pogosto obravnavajo v lastnih plasteh za optimizacijo nadaljnjih posodobitev.

Zakaj je faza 'Postavitve' ključna za zmogljivost Grida

Faza postavitve za preprost dokument z bloki in vrstičnimi elementi je razmeroma enostavna. Brskalnik lahko pogosto obdela elemente v enem prehodu in izračuna njihove dimenzije na podlagi njihovih staršev. Vendar pa CSS Grid uvaja novo raven kompleksnosti. Mrežni vsebnik (grid container) je sistem, ki temelji na omejitvah. Končna velikost mrežne sledi ali elementa je pogosto odvisna od velikosti drugih sledi, razpoložljivega prostora v vsebniku ali celo od intrinzične velikosti vsebine v sosednjih elementih.

Mehanizem za postavitev v brskalniku mora rešiti ta kompleksen sistem enačb, da pride do končne postavitve. Način, kako definirate svoje mrežne sledi – vaša izbira enot in funkcij za določanje velikosti – neposredno vpliva na težavnost in s tem na čas, potreben za rešitev tega sistema. Zato ima lahko navidezno majhna sprememba v `grid-template-columns` nesorazmeren vpliv na zmogljivost upodabljanja.

Anatomija določanja velikosti sledi v CSS Gridu: Pogled z vidika zmogljivosti

Za učinkovito profiliranje morate razumeti značilnosti zmogljivosti orodij, ki so vam na voljo. Poglejmo si pogoste mehanizme za določanje velikosti sledi in analizirajmo njihove potencialne računske stroške.

1. Statično in predvidljivo določanje velikosti

To so najpreprostejše in najbolj zmogljive možnosti, saj mehanizmu za postavitev zagotavljajo jasne, nedvoumne informacije.

• Fiksne enote (`px`, `rem`, `em`): Ko definirate sled kot `grid-template-columns: 200px 10rem;`, brskalnik takoj ve natančno velikost teh sledi. Ni potreben noben kompleksen izračun. To je računsko zelo poceni.
• Odstotkovne enote (`%`): Odstotek se razreši glede na velikost mrežnega vsebnika. Čeprav zahteva en dodaten korak (pridobivanje širine starša), je to še vedno zelo hiter in determinističen izračun. Brskalnik lahko te velikosti razreši zgodaj v procesu postavitve.

Profil zmogljivosti: Postavitve, ki uporabljajo samo statično in odstotkovno določanje velikosti, so običajno zelo hitre. Brskalnik lahko reši geometrijo mreže v enem samem, učinkovitem prehodu.

2. Prilagodljivo določanje velikosti

Ta kategorija uvaja prilagodljivost, ki omogoča, da se sledi prilagajajo razpoložljivemu prostoru. Je nekoliko bolj zapleteno kot statično določanje velikosti, vendar v sodobnih brskalnikih še vedno visoko optimizirano.

• Frakcijske enote (`fr`): Enota `fr` predstavlja del razpoložljivega prostora v mrežnem vsebniku. Za razrešitev enot `fr` brskalnik najprej odšteje prostor, ki ga zasedajo vse neprilagodljive sledi (kot so sledi v `px` ali `auto`), nato pa preostali prostor razdeli med sledi `fr` glede na njihov delež.

Profil zmogljivosti: Izračun za enote `fr` je večstopenjski proces, vendar je to dobro definirana matematična operacija, ki ni odvisna od vsebine mrežnih elementov. Za večino običajnih primerov uporabe je izjemno zmogljiva.

3. Določanje velikosti glede na vsebino (kritična točka zmogljivosti)

Tu postanejo stvari zanimive – in potencialno počasne. Ključne besede za določanje velikosti glede na vsebino naročijo brskalniku, naj velikost sledi določi na podlagi vsebine elementov v njej. To ustvarja močno povezavo med vsebino in postavitvijo, vendar ima svojo računsko ceno.

• `min-content`: Predstavlja intrinzično minimalno širino vsebine. Za besedilo je to običajno širina najdaljše besede ali nelomljivega niza. Da bi to izračunal, mora mehanizem za postavitev v brskalniku navidezno postaviti vsebino, da najde ta najširši del.
• `max-content`: Predstavlja intrinzično prednostno širino vsebine, kar je širina, ki bi jo zavzela brez prelomov vrstic, razen tistih, ki so izrecno določeni. Da bi to izračunal, mora brskalnik navidezno postaviti celotno vsebino v eno samo, neskončno dolgo vrstico.
• `auto`: Ta ključna beseda je odvisna od konteksta. Ko se uporablja za določanje velikosti mrežnih sledi, se na splošno obnaša kot `max-content`, razen če je element raztegnjen ali ima določeno velikost. Njegova kompleksnost je podobna `max-content`, ker mora brskalnik pogosto izmeriti vsebino, da določi njeno velikost.

Profil zmogljivosti: Te ključne besede so računsko najdražje. Zakaj? Ker ustvarjajo dvosmerno odvisnost. Postavitev vsebnika je odvisna od velikosti vsebine elementov, vendar je postavitev vsebine elementov lahko odvisna tudi od velikosti vsebnika. Za rešitev tega bo morda moral brskalnik izvesti več prehodov postavitve. Najprej mora izmeriti vsebino vsakega posameznega elementa v tej sledi, preden lahko sploh začne izračunavati končno velikost same sledi. Za mrežo z mnogimi elementi lahko to postane pomembno ozko grlo.

4. Določanje velikosti s funkcijami

Funkcije omogočajo kombiniranje različnih modelov določanja velikosti, kar ponuja tako prilagodljivost kot nadzor.

• `minmax(min, max)`: Ta funkcija določa obseg velikosti. Zmogljivost `minmax()` je v celoti odvisna od enot, uporabljenih za njene argumente. `minmax(200px, 1fr)` je zelo zmogljiva, saj kombinira fiksno vrednost s prilagodljivo. Vendar pa `minmax(min-content, 500px)` podeduje stroške zmogljivosti `min-content`, ker jo mora brskalnik še vedno izračunati, da vidi, ali je večja od največje vrednosti.
• `fit-content(value)`: To je dejansko omejitev (clamp). Enakovredno je `minmax(auto, max-content)`, vendar omejeno z dano `vrednostjo`. Torej, `fit-content(300px)` se obnaša kot `minmax(min-content, max(min-content, 300px))`. Prav tako nosi stroške zmogljivosti določanja velikosti glede na vsebino.

Orodja stroke: Profiliranje z orodji Chrome DevTools

Teorija je koristna, vendar so podatki odločilni. Da bi razumeli, kako se vaše mrežne postavitve obnesejo v resničnem svetu, jih morate izmeriti. Plošča Performance v orodjih za razvijalce (DevTools) brskalnika Google Chrome je za to nepogrešljivo orodje.

Kako posneti profil zmogljivosti

Sledite tem korakom, da zajamete podatke, ki jih potrebujete:

1. Odprite svojo spletno stran v brskalniku Chrome.
2. Odprite DevTools (F12, Ctrl+Shift+I ali Cmd+Opt+I).
3. Pojdite na zavihek Performance.
4. Prepričajte se, da je potrditveno polje "Web Vitals" označeno, da dobite uporabne oznake na časovnici.
5. Kliknite gumb Record (krog) ali pritisnite Ctrl+E.
6. Izvedite dejanje, ki ga želite profilira. To je lahko začetno nalaganje strani, spreminjanje velikosti okna brskalnika ali dejanje, ki dinamično dodaja vsebino v mrežo (kot je uporaba filtra). Vsa ta dejanja sprožijo izračune postavitve.
7. Kliknite Stop ali ponovno pritisnite Ctrl+E.
8. DevTools bo obdelal podatke in vam predstavil podrobno časovnico.

Analiza plamenskega grafikona (Flame Chart)

Plamenski grafikon je glavna vizualna predstavitev vašega posnetka. Za analizo postavitve se boste želeli osredotočiti na odsek glavne niti ("Main" thread).

Poiščite dolge, vijolične stolpce z oznako "Rendering". Znotraj teh boste našli temneje vijolične dogodke z oznako "Layout". To so specifični trenutki, ko brskalnik izračunava geometrijo strani.

• Dolga opravila postavitve: En sam, dolg blok 'Layout' je rdeča zastava. Premaknite miško čezenj, da vidite njegovo trajanje. Vsako opravilo postavitve, ki traja več kot nekaj milisekund (npr. > 10-15ms) na zmogljivem računalniku, si zasluži preiskavo, saj bo na manj zmogljivih napravah precej počasnejše.
• Preobremenitev postavitve (Layout Thrashing): Poiščite veliko majhnih dogodkov 'Layout', ki se dogajajo v hitrem zaporedju, pogosto prepletenih z JavaScriptom (dogodki 'Scripting'). Ta vzorec, znan kot preobremenitev postavitve, se pojavi, ko JavaScript večkrat prebere geometrijsko lastnost (kot je `offsetHeight`) in nato zapiše slog, ki jo razveljavi, s čimer prisili brskalnik, da znova in znova izračunava postavitev v zanki.

Uporaba povzetka in monitorja zmogljivosti

• Zavihek Summary (Povzetek): Ko izberete časovni obseg v plamenskem grafikonu, vam zavihek Summary na dnu prikaže tortni diagram, ki razčleni porabljen čas. Bodite pozorni na odstotek, pripisan "Rendering" (Upodabljanje) in posebej "Layout" (Postavitev).
• Monitor zmogljivosti (Performance Monitor): Za analizo v realnem času odprite Performance Monitor (v meniju DevTools: More tools > Performance monitor). Ta ponuja grafe v živo za porabo procesorja, velikost kupa JS, število vozlišč DOM in, kar je ključno, Layouts/sec (Postavitve/sek). Interakcija s stranjo in opazovanje skokov na tem grafu vam lahko takoj povesta, katera dejanja sprožajo drage ponovne izračune postavitve.

Praktični scenariji profiliranja: od teorije do prakse

Preizkusimo naše znanje z nekaj praktičnimi primeri. Primerjali bomo različne implementacije mreže in analizirali njihove hipotetične profile zmogljivosti.

Scenarij 1: Fiksno in prilagodljivo (`px` in `fr`) v primerjavi z na vsebini temelječim (`auto`)

Predstavljajte si mrežo izdelkov s 100 elementi. Primerjajmo dva pristopa za stolpce.

Pristop A (zmogljiv): Uporaba `minmax()` s fiksno najmanjšo in prilagodljivo največjo vrednostjo.

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

Pristop B (potencialno počasen): Uporaba `auto` ali `max-content`, da vsebina določi širino stolpca.

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

Analiza:

• V Pristopu A je naloga brskalnika preprosta. Ve, da je najmanjša širina vsakega elementa 250px. Hitro lahko izračuna, koliko elementov se prilega širini vsebnika, in nato preostali prostor razdeli mednje. To je hiter, ekstrinzičen pristop k določanju velikosti, kjer ima nadzor vsebnik. Opravilo 'Layout' v profilu zmogljivosti bo zelo kratko.
• V Pristopu B ima brskalnik veliko težjo nalogo. Ključna beseda `auto` (v tem kontekstu se pogosto razreši v `max-content`) pomeni, da mora brskalnik za določitev širine enega samega stolpca najprej hipotetično upodobiti vsebino vsake od 100 kartic izdelkov, da najde njeno širino `max-content`. To meritev nato uporabi v svojem algoritmu za reševanje mreže. Ta intrinzičen pristop k določanju velikosti zahteva ogromno predhodnega merilnega dela, preden se lahko določi končna postavitev. Opravilo 'Layout' v profilu zmogljivosti bo bistveno daljše, potencialno za red velikosti.

Scenarij 2: Cena globoko gnezdenih mrež

Težave z zmogljivostjo mreže se lahko seštevajo. Predstavljajte si postavitev, kjer nadrejena mreža uporablja določanje velikosti glede na vsebino, njeni otroci pa so prav tako kompleksne mreže.

Primer:

Glavna postavitev strani je dvostolpčna mreža: `grid-template-columns: max-content 1fr;`. Prvi stolpec je stranska vrstica, ki vsebuje različne gradnike. Eden od teh gradnikov je koledar, ki je prav tako zgrajen s CSS Gridom.

Analiza:

Mehanizem za postavitev brskalnika se sooča z zahtevno verigo odvisnosti:

1. Da bi razrešil stolpec `max-content` glavne strani, mora izračunati širino `max-content` stranske vrstice.
2. Da bi izračunal širino stranske vrstice, mora izračunati širino vseh njenih otrok, vključno z gradnikom koledarja.
3. Da bi izračunal širino gradnika koledarja, mora razrešiti svojo notranjo mrežo.

Izračun za starša je blokiran, dokler postavitev otroka ni v celoti razrešena. Ta globoka povezanost lahko vodi do presenetljivo dolgih časov postavitve. Če tudi otroška mreža uporablja določanje velikosti glede na vsebino, se težava še poslabša. Profiliranje takšne strani bi verjetno razkrilo eno samo, zelo dolgo opravilo 'Layout' med začetnim upodabljanjem.

Strategije optimizacije in najboljše prakse

Na podlagi naše analize lahko izpeljemo več praktičnih strategij za gradnjo visoko zmogljivih mrežnih postavitev.

1. Dajte prednost ekstrinzičnemu določanju velikosti pred intrinzičnim

To je zlato pravilo zmogljivosti mreže. Kadar koli je mogoče, naj mrežni vsebnik določi dimenzije svojih sledi z uporabo enot, kot so `px`, `rem`, `%` in `fr`. To daje mehanizmu za postavitev brskalnika jasen, predvidljiv nabor omejitev, s katerimi lahko dela, kar ima za posledico hitrejše izračune.

Namesto tega (intrinzično):

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

Raje to (ekstrinzično):

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

2. Omejite obseg določanja velikosti glede na vsebino

Obstajajo veljavni primeri uporabe za `min-content` in `max-content`, na primer za spustne menije ali oznake poleg polj obrazca. Ko jih morate uporabiti, poskusite omejiti njihov vpliv:

• Uporabite na malo sledeh: Uporabite jih na enem samem stolpcu ali vrstici, ne pa na ponavljajočem se vzorcu s stotinami elementov.
• Omejite starša: Postavite mrežo, ki uporablja določanje velikosti glede na vsebino, znotraj vsebnika, ki ima `max-width`. To daje mehanizmu za postavitev mejo, kar mu včasih lahko pomaga optimizirati izračun.
• Kombinirajte z `minmax()`: Navedite smiselno najmanjšo ali največjo vrednost poleg ključne besede, ki temelji na vsebini, kot je `minmax(200px, max-content)`. To lahko brskalniku da prednost pri izračunih.

3. Razumejte in pametno uporabljajte `subgrid`

`subgrid` je močna funkcija, ki omogoča gnezdeni mreži, da prevzame definicijo sledi svoje nadrejene mreže. To je fantastično za poravnavo.

Posledice za zmogljivost: `subgrid` je lahko dvorezen meč. Po eni strani povečuje povezanost med izračuni postavitve starša in otroka, kar bi teoretično lahko upočasnilo začetno, kompleksno reševanje postavitve. Po drugi strani pa lahko z zagotavljanjem, da so elementi od začetka popolnoma poravnani, prepreči kasnejše premike postavitve in ponovne izračune, ki bi se lahko zgodili, če bi poskušali posnemati poravnavo ročno z drugimi metodami. Najboljši nasvet je profilranje. Če imate kompleksno gnezdeno postavitev, izmerite njeno zmogljivost z in brez `subgrid`, da vidite, kaj je boljše za vaš specifičen primer uporabe.

4. Virtualizacija: Končna rešitev za velike nabore podatkov

Če gradite mrežo s stotinami ali tisoči elementov (npr. podatkovno mrežo, galerijo fotografij z neskončnim drsenjem), nobena količina popravkov CSS ne bo premagala temeljnega problema: brskalnik mora še vedno izračunati postavitev za vsak posamezen element.

Rešitev je virtualizacija (ali 'windowing'). To je tehnika, ki temelji na JavaScriptu, kjer upodobite le peščico elementov DOM, ki so trenutno vidni v vidnem polju (viewport). Ko se uporabnik pomika, ponovno uporabite ta vozlišča DOM in zamenjate njihovo vsebino. To ohranja majhno in konstantno število elementov, s katerimi se mora brskalnik ukvarjati med izračunom postavitve, ne glede na to, ali vaš nabor podatkov vsebuje 100 ali 100.000 elementov.

Knjižnice, kot sta `react-window` in `tanstack-virtual`, ponujajo robustne implementacije tega vzorca. Za resnično obsežne mreže je to najučinkovitejša optimizacija zmogljivosti, ki jo lahko naredite.

Študija primera: Optimizacija mreže s seznamom izdelkov

Poglejmo si realističen scenarij optimizacije za globalno spletno stran e-trgovine.

Problem: Stran s seznamom izdelkov deluje počasi. Ko se spremeni velikost okna brskalnika ali se uporabijo filtri, je opazna zakasnitev, preden se izdelki prerazporedijo na nove položaje. Ocena Core Web Vitals za Interaction to Next Paint (INP) je slaba.

Začetna koda (stanje "pred"):

Mreža je definirana tako, da je zelo prilagodljiva, kar omogoča, da kartice izdelkov narekujejo širino stolpcev glede na njihovo vsebino (npr. dolga imena izdelkov).

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

Analiza zmogljivosti:

1. Posnamemo profil zmogljivosti med spreminjanjem velikosti okna brskalnika.
2. Plamenski grafikon prikazuje dolgo, ponavljajoče se opravilo 'Layout' vsakič, ko se sproži dogodek spreminjanja velikosti, ki na povprečni napravi traja več kot 80 ms.
3. Funkcija `fit-content()` se zanaša na izračune `min-content` in `max-content`. Profiler potrjuje, da brskalnik ob vsaki spremembi velikosti mrzlično ponovno meri vsebino vseh vidnih kartic izdelkov, da bi ponovno izračunal strukturo mreže. To je vir zakasnitve.

Rešitev (stanje "po"):

Preklopimo z intrinzičnega modela, ki temelji na vsebini, na ekstrinzičnega, ki ga določa vsebnik. Določimo trdno najmanjšo velikost za kartice in jim dovolimo, da se razširijo do dela razpoložljivega prostora.

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

Znotraj CSS-a kartice izdelka dodamo pravila za elegantno obravnavanje potencialno dolge vsebine znotraj tega novega, bolj togega vsebnika:

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

Rezultat:

1. Posnamemo nov profil zmogljivosti med spreminjanjem velikosti.
2. Plamenski grafikon zdaj kaže, da je opravilo 'Layout' neverjetno kratko, dosledno pod 5 ms.
3. Brskalniku ni več treba meriti vsebine. Izvede preprost matematični izračun na podlagi širine vsebnika in najmanjše vrednosti `280px`.
4. Uporabniška izkušnja je preoblikovana. Spreminjanje velikosti je gladko in takojšnje. Uporaba filtrov se zdi odzivna, ker lahko brskalnik novo postavitev izračuna skoraj takoj.

Opomba o orodjih za različne brskalnike

Čeprav se je ta vodnik osredotočil na Chrome DevTools, je ključno vedeti, da imajo uporabniki različne preference glede brskalnikov. Orodja za razvijalce v Firefoxu imajo odličen panel Performance (pogosto imenovan 'Profiler'), ki ponuja podobne plamenske grafikone in zmožnosti analize. Tudi Safarijev Web Inspector vključuje močan zavihek 'Timelines' za profiliranje zmogljivosti upodabljanja. Vedno preizkusite svoje optimizacije na glavnih brskalnikih, da zagotovite dosledno in visokokakovostno izkušnjo za celotno globalno občinstvo.

Zaključek: Gradnja zmogljivih mrež že v osnovi

CSS Grid je izjemno močno orodje, vendar njegove najnaprednejše funkcije niso brez računskih stroškov. Kot spletni strokovnjaki, ki razvijamo za globalno občinstvo z širokim razponom naprav in omrežnih pogojev, moramo biti osredotočeni na zmogljivost že od samega začetka razvojnega procesa.

Ključni poudarki so jasni:

• Postavitev je ozko grlo zmogljivosti: Faza 'Layout' upodabljanja je lahko draga, zlasti pri kompleksnih sistemih, ki temeljijo na omejitvah, kot je CSS Grid.
• Strategija določanja velikosti je pomembna: Ekstrinzično določanje velikosti, ki ga določa vsebnik (`px`, `fr`, `%`), je skoraj vedno bolj zmogljivo kot intrinzično določanje velikosti, ki temelji na vsebini (`min-content`, `max-content`, `auto`).
• Merite, ne ugibajte: Profilerji zmogljivosti brskalnikov niso samo za odpravljanje napak. Uporabljajte jih proaktivno za analizo svojih odločitev o postavitvi in za potrditev optimizacij.
• Optimizirajte za pogost primer: Za velike zbirke elementov bo preprosta, ekstrinzična definicija mreže zagotovila boljšo uporabniško izkušnjo kot kompleksna, ki se zaveda vsebine.

Z vključitvijo profiliranja zmogljivosti v svoj redni delovni proces lahko zgradite sofisticirane, odzivne in robustne postavitve s CSS Gridom, prepričani, da niso le vizualno osupljive, ampak tudi neverjetno hitre in dostopne uporabnikom povsod.