CSS Tinklelio Automatinis Išdėstymas: Automatinio Elementų Pozicionavimo Algoritmų Įsisavinimas

CSS Tinklelis (angl. Grid) yra galinga maketavimo sistema, leidžianti kūrėjams lengvai kurti sudėtingus ir lanksčius maketus. Pagrindinė CSS Tinklelio savybė yra automatinio išdėstymo galimybės, kurios automatiškai pozicionuoja tinklelio elementus tinklelio konteineryje. Ši funkcija yra nepaprastai naudinga kuriant dinamiškus ir adaptyvius maketus, ypač kai elementų skaičius ar jų dydžiai iš anksto nėra žinomi. Šiame tinklaraščio įraše gilinsimės į CSS Tinklelio automatinio išdėstymo subtilybes, aptarsime skirtingus algoritmus, savybes ir praktinius pavyzdžius, kurie padės jums įsisavinti šį esminį tinklalapių maketavimo aspektą, skirtą pasaulinei auditorijai.

CSS Tinklelio Pagrindų Supratimas

Prieš pradedant gilintis į automatinį išdėstymą, greitai prisiminkime CSS Tinklelio pagrindus. Tinklelio maketas sukuriamas apibrėžiant tinklelio konteinerį (angl. grid container) ir jo tinklelio elementus (angl. grid items). Tinklelio konteineris yra pagrindinis elementas, veikiantis kaip tinklelis, o tinklelio elementai yra jo antriniai elementai, kurie išdėstomi tinklelio eilutėse ir stulpeliuose.

Pagrindinės savybės, kurias reikia suprasti:

• display: grid; arba display: inline-grid;: Ši savybė, pritaikyta konteineriui, paverčia jį tinklelio konteineriu.
• grid-template-columns ir grid-template-rows: Šios savybės apibrėžia tinklelio stulpelių ir eilučių dydį. Reikšmės gali būti pikseliais (px), procentais (%), dalimis (fr) ar kitais galiojančiais CSS vienetais.
• grid-column-start, grid-column-end, grid-row-start ir grid-row-end: Šios savybės leidžia aiškiai pozicionuoti tinklelio elementus, nurodant jų pradžios ir pabaigos linijas.
• grid-area: Sutrumpinta savybė, apjungianti grid-row-start, grid-column-start, grid-row-end ir grid-column-end.

Automatinio Išdėstymo Galia

Automatinis išdėstymas – tai mechanizmas, kuriuo CSS Tinklelis automatiškai pozicionuoja tinklelio elementus, kai jų aiškus išdėstymas (naudojant savybes kaip grid-column-start ar grid-row-start) nėra apibrėžtas. Tai nepaprastai naudinga, kai tinklelio elementų skaičius yra dinamiškas arba kai norite, kad maketas sklandžiai prisitaikytų prie skirtingų ekrano dydžių ar turinio variacijų. Automatinio išdėstymo algoritmas analizuoja tinklelio konteinerio struktūrą, bet kokius esamus elementų išdėstymus ir laisvą erdvę, kad nustatytų kiekvieno elemento poziciją.

Automatinio Išdėstymo Algoritmai

CSS Tinklelis siūlo skirtingus automatinio išdėstymo algoritmus, daugiausia valdomus grid-auto-flow savybe. Šių algoritmų supratimas yra labai svarbus norint kontroliuoti, kaip bus išdėstyti jūsų tinklelio elementai.

grid-auto-flow: row; (Numatytasis)

Tai numatytoji reikšmė. Elementai išdėstomi eilutė po eilutės. Jei dabartinėje eilutėje nepakanka vietos, elementai automatiškai perkeliami į kitą eilutę. Įsivaizduokite tai kaip horizontalių dėžučių linijos užpildymą, o perpildžius pereinama prie kitų linijų žemiau. Paprastai tai yra labiausiai paplitęs ir nuspėjamas elgesys.

Pavyzdys:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Default */
}

            

              
                Copy
              
            
          

Su šia konfigūracija elementai pildys tinklelio stulpelius horizontaliai, o po trečio stulpelio pereis į kitą eilutę. Tai geras atspirties taškas daugeliui maketų, pavyzdžiui, produktų sąrašui el. prekybos svetainėje.

grid-auto-flow: column;

Šis algoritmas išdėsto elementus stulpelis po stulpelio. Jei dabartiniame stulpelyje nepakanka vietos, elementai pereis į kitą stulpelį dešinėje. Tai mažiau paplitęs, bet naudingas tam tikriems maketams.

Pavyzdys:

            .grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

            

              
                Copy
              
            
          

Šiuo atveju elementai užpildys tinklelį, užpildydami kiekvieną stulpelį iš viršaus į apačią, o vėliau pereidami į kitą laisvą stulpelį.

grid-auto-flow: row dense; ir grid-auto-flow: column dense;

Raktinis žodis dense keičia automatinio išdėstymo elgseną. Naudojant dense, tinklelio algoritmas bando užpildyti bet kokius tinklelio tarpus, pertvarkydamas elementus. Tai gali lemti kompaktiškesnį maketą, tačiau taip pat gali pakeisti jūsų elementų vizualinę tvarką, jei nebūsite atsargūs. Naudokite tai apdairiai ir atsižvelkite į prieinamumo pasekmes.

Pavyzdys:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

.item-one {
  grid-column: span 2;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje item-one apima du stulpelius, sukuriant tarpą. Raktinis žodis dense bandys užpildyti šį tarpą vėlesniais elementais. Šis metodas kartais gali duoti netikėtų rezultatų, ypač kai svarbi turinio tvarka, kaip teksto gausiuose maketuose. Naudodami `dense`, atsižvelkite į prieinamumą ir ekrano skaitytuvų tvarką.

Automatinio Išdėstymo Valdymas su Tinklelio Savybėmis

Nors grid-auto-flow kontroliuoja bendrą automatinio išdėstymo kryptį ir tankumą, kelios kitos tinklelio savybės taip pat daro įtaką elementų pozicionavimui.

grid-template-columns ir grid-template-rows

Tinklelio stulpelių ir eilučių matmenys tiesiogiai veikia automatinį išdėstymą. Atidžiai apibrėžkite šiuos matmenis, kad pasiektumėte norimą maketą. Galite naudoti fiksuotus vienetus (px), santykinius vienetus (%) arba lanksčius vienetus (fr).

Pavyzdys (naudojant fr vienetus adaptyviems stulpeliams):

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive Columns */
  grid-auto-flow: row;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje naudojamas auto-fit (paaiškinta vėliau), kad būtų sukurti adaptyvūs stulpeliai, kurie prisitaiko prie laisvos erdvės. Kiekvienas stulpelis bus bent 200px pločio (minmax(200px, 1fr)) ir didės, kad užpildytų laisvą erdvę. Šis metodas yra plačiai taikomas skirtingų dydžių ekranams.

grid-column ir grid-row (ir jų trumpinys, grid-area)

Šios savybės aiškiai apibrėžia tinklelio elemento pradžios ir pabaigos linijas. Jei nurodysite šias savybes, automatinio išdėstymo algoritmas atsižvelgs į tas pozicijas. Taip galite dalinai kontroliuoti išdėstymą, leisdami automatiniam išdėstymui veikti likusiems elementams. Svarbu prisiminti, kad šių savybių supratimas yra būtinas kuriant lanksčius dizainus.

Pavyzdys:

            .item-one {
  grid-column: 1 / 3; /* Spans columns 1 and 2 */
}

            

              
                Copy
              
            
          

Šiame pavyzdyje item-one yra aiškiai pozicionuotas, o kiti elementai bus išdėstyti aplink jį, naudojant grid-auto-flow ir bet kokią laisvą erdvę tinklelio konteineryje.

grid-auto-columns ir grid-auto-rows

Šios savybės apibrėžia numanomai sukurtų tinklelio stulpelių ir eilučių dydį. Kai tinklelio algoritmas išdėsto elementus už aiškiai apibrėžto tinklelio šablono ribų, jis sukuria numanomas juostas (angl. implicit tracks). grid-auto-columns ir grid-auto-rows kontroliuoja šių numanomų juostų dydį.

Pavyzdys:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-columns: 150px; /* Implicit column size */
}

            

              
                Copy
              
            
          

Jei tinklelio konteineris turi elementų, išdėstytų stulpeliuose, kurie yra už aiškiai apibrėžtų dviejų, bet kokie naujai sukurti stulpeliai bus 150px pločio.

Praktiniai Pavyzdžiai ir Panaudojimo Atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip naudoti automatinį išdėstymą realiuose scenarijuose:

1. Adaptyvus Produktų Sąrašas

Dažnas panaudojimo atvejis yra adaptyvaus produktų sąrašo kūrimas. Norite, kad elementai automatiškai išsidėstytų tinklelyje, prisitaikydami prie skirtingų ekrano dydžių.

HTML (Paprasti Produktų Elementai):

            
<div class="product-grid">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product 1</h3>
    <p>Description of Product 1.</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product 2</h3>
    <p>Description of Product 2.</p>
  </div>
  <!-- More product items -->
</div>

            

              
                Copy
              
            
          

CSS (Naudojant auto-fit ir minmax):

            
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* Adds space between grid items */
}

.product-item {
  border: 1px solid #ccc;
  padding: 10px;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje repeat(auto-fit, minmax(250px, 1fr)) sukuria stulpelius, kurie yra bent 250px pločio. Didėjant ekrano dydžiui, daugiau stulpelių tilps į konteinerį. Mažėjant ekranui, stulpeliai išsidėstys vienas po kitu, kad tilptų į laisvą erdvę. Tai paprastas, bet efektyvus būdas sukurti adaptyvų produktų tinklelį, kuris dinamiškai prisitaiko prie skirtingų įrenginių, užtikrinant gerą vartotojo patirtį visame pasaulyje.

2. Dinamiška Nuotraukų Galerija

Kitas panaudojimo atvejis – dinamiškos nuotraukų galerijos kūrimas, kurioje skirtingų dydžių nuotraukos išdėstomos tinklelyje. Jūs nenorite aiškiai pozicionuoti kiekvienos nuotraukos; norite, kad tinklelis automatiškai tvarkytų maketą.

HTML (Nuotraukų Elementai):

            
<div class="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- More image items -->
</div>

            

              
                Copy
              
            
          

CSS (Paprastas Tinklelio Maketas):

            
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 100px; /* Set a default row height */
  gap: 10px;
}

.image-gallery img {
  width: 100%; /* Ensure images fill the grid cell */
  height: 100%;
  object-fit: cover; /*  Important for preserving aspect ratio  */
}

            

              
                Copy
              
            
          

Šiame pavyzdyje object-fit: cover; stilius užtikrina, kad nuotraukos išlaikytų savo proporcijas, tilpdamos į savo tinklelio langelius. Savybė grid-auto-rows suteikia pagrindinį aukštį tinklelio elementams. Raktinis žodis auto-fit automatiškai pritaikys stulpelių skaičių pagal konteinerio plotį. Šis pavyzdys, gerai panaudotas, veikia visame pasaulyje, pateikdamas vartotojui vizualiai patrauklią ir lanksčią nuotraukų galeriją. Apsvarstykite galimybę naudoti biblioteką ar pirminį procesorių optimizuotiems nuotraukų dydžiams, ypač tarptautinei auditorijai su įvairiu interneto pralaidumu.

3. Maketas, Orientuotas į Turinį

Galite sukurti į turinį orientuotą maketą, kur pagrindinis turinys yra pirmoje vietoje, o po jo seka susijęs turinys ar šoninės juostos. CSS Tinklelis leidžia jums valdyti turinio tvarką naudojant `grid-column` ar `grid-row`, išlaikant adaptyvų maketą.

HTML (Paprastas Maketas):

            
<div class="content-container">
  <div class="main-content">
    <h2>Main Content</h2>
    <p>This is the main content of the page...</p>
  </div>
  <div class="sidebar">
    <h3>Sidebar</h3>
    <p>Related content, ads, or navigation...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS (Turinio išdėstymas su Tinkleliu):

            
.content-container {
  display: grid;
  grid-template-columns: 1fr 300px; /* Two columns */
  gap: 20px;
}

.main-content {
  grid-column: 1; /* Stays in the first column */
}

.sidebar {
  grid-column: 2; /* Stays in the second column */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
  }
  .sidebar {
    grid-column: 1; /*  Place sidebar under main content */
  }
}

            

              
                Copy
              
            
          

Šis metodas užtikrina, kad `main-content` visada būtų pirmas HTML šaltinio kode, o tai naudinga prieinamumui ir SEO. Didesniuose ekranuose jie yra vienas šalia kito; mažesniuose – išdėstomi vertikaliai. Tai aktualu visame pasaulyje, ypač atsižvelgiant į „mobile-first“ dizaino principus.

auto-fit Prieš auto-fill

Tiek auto-fit, tiek auto-fill yra raktiniai žodžiai, naudojami grid-template-columns ir grid-template-rows savybėse, kurie padeda kurti adaptyvius tinklelius. Jie veikia panašiai, tačiau su subtiliu skirtumu:

• auto-fit: Tinklelio elementai išsiplečia, kad užpildytų laisvą erdvę. Jei nėra pakankamai elementų visiems stulpeliams užpildyti, tušti stulpeliai susitraukia.
• auto-fill: Tinklelis sukuria tuščius, numanomus stulpelius (arba eilutes), kad užpildytų laisvą erdvę. Elementai neišsiplečia, kad užpildytų erdvę.

Norėdami parodyti skirtumą, apsvarstykite šį pavyzdį:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* auto-fit */
  /* OR */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* auto-fill */
  width: 600px;
}

.item {
  background-color: lightgrey;
  border: 1px solid black;
  padding: 10px;
}

            

              
                Copy
              
            
          

Šiame supaprastintame pavyzdyje, jei tinklelyje yra tik du elementai, auto-fit priverstų stulpelius išsitempti, kad užpildytų 600px plotį, taigi abu stulpeliai būtų 300px pločio. Kita vertus, naudojant auto-fill, bus sukurti du 150px pločio stulpeliai su dviem tuščiais 150px pločio stulpeliais šone, nes tik 2 iš 4 stulpelių yra naudojami elementams talpinti.

Svarbiausia išvada yra ta, kad auto-fit sutraukia tuščias juostas, o auto-fill palieka jas tuščias. Pasirinkite raktinį žodį, kuris geriausiai atitinka jūsų maketo reikalavimus. Paprastai auto-fit naudojamas, kai norite, kad elementai išsiplėstų ir užpildytų laisvą erdvę, o auto-fill – kai reikia sukurti tuščias juostas atstumams ar vizualiniams efektams, arba kai norite užtikrinti, kad visa laisva erdvė būtų panaudota turiniui ar tuščioms sritims.

Prieinamumo Aspektai

Naudojant automatinį išdėstymą, labai svarbu atsižvelgti į prieinamumą. Elementų tvarka HTML šaltinio kode nustato skaitymo tvarką ekrano skaitytuvams. Jei naudojate `grid-auto-flow: dense;` arba ženkliai pertvarkote elementus naudodami kitas tinklelio savybes, tai gali pažeisti loginę skaitymo tvarką. Visada testuokite su ekrano skaitytuvu, kad įsitikintumėte, jog turinys pateikiamas logiška ir suprantama seka.

Štai keletas svarbių aspektų, užtikrinančių pasaulinį prieinamumą:

• Logiška Šaltinio Tvarka: Kai tik įmanoma, išlaikykite logišką HTML elementų šaltinio tvarką. Tai paprastai išlaikys aiškią skaitymo tvarką ekrano skaitytuvams.
• Testuokite su Ekrano Skaitytuvais: Kruopščiai testuokite savo maketus su ekrano skaitytuvais (pvz., „VoiceOver“ macOS, NVDA „Windows“), kad patvirtintumėte, jog turinys skelbiamas teisingai.
• Semantinis HTML: Naudokite semantinius HTML elementus (<article>, <nav>, <aside>, <main>, <header>, <footer> ir t.t.), kad suteiktumėte aiškią struktūrą ir prasmę ekrano skaitytuvams.
• Alternatyvus Tekstas (alt tekstas): Visada pateikite aprašomąjį alt tekstą paveikslėliams.
• ARIA Atributai: Naudokite ARIA atributus (pvz., aria-label, aria-describedby), kad prireikus suteiktumėte papildomo konteksto, tačiau venkite perteklinio naudojimo.
• Navigacija Klaviatūra: Užtikrinkite, kad jūsų maketus galima naršyti naudojant klaviatūrą. Vartotojai turėtų galėti pereiti per interaktyvius elementus logiška tvarka.

Našumas ir Optimizavimas

Nors CSS Tinklelis paprastai veikia našiai, yra keletas dalykų, į kuriuos reikia atsižvelgti norint optimizuoti maketus, ypač kai jūsų svetainė auga:

• Venkite Perteklinio Tinklelio Juostų Skaičiaus: Venkite kurti per daug tinklelio juostų, ypač numanomų. Tai gali sukelti našumo problemų. Kruopščiai planuokite savo grid-template-columns ir grid-template-rows.
• Sumažinkite Sudėtingus Skaičiavimus: Sumažinkite sudėtingų skaičiavimų naudojimą savo CSS. Naršyklių varikliai yra optimizuoti tam tikrų tipų skaičiavimams ir gali turėti apribojimų.
• Optimizuokite Paveikslėlius: Visada optimizuokite paveikslėlius naudojimui internete. Naudokite tinkamus paveikslėlių formatus (pvz., WebP), suspauskite paveikslėlius ir pateikite adaptyvius paveikslėlių dydžius naudodami <picture> elementą ar adaptyvių paveikslėlių technikas. Tai daro įtaką suvokiamam įkėlimo laikui visuose regionuose.
• Minifikuokite ir Sujunkite CSS: Minifikuokite savo CSS failus ir sujunkite juos, kad sumažintumėte HTTP užklausų skaičių. Apsvarstykite galimybę naudoti CSS pirminį procesorių, pvz., Sass ar Less, siekiant geresnės organizacijos ir priežiūros.
• Testuokite Tikruose Įrenginiuose: Testuokite savo maketus įvairiuose įrenginiuose ir naršyklėse, įskaitant senesnius ir mažesnės galios įrenginius bei įrenginius, dažnai naudojamus skirtingose geografinėse vietovėse. Testuokite su skirtingomis tinklo sąlygomis.

Internacionalizacijos (i18n) ir Lokalizacijos (l10n) Aspektai

Kuriant svetaines pasaulinei auditorijai, turėtumėte atsižvelgti į internacionalizaciją (i18n) ir lokalizaciją (l10n). Štai kaip automatinis išdėstymas gali tai paveikti:

• Teksto Kryptis (LTR/RTL): Atsižvelkite į tai, kad kai kurios kalbos (pvz., arabų, hebrajų) rašomos iš dešinės į kairę (RTL). Teisingai naudokite direction ir text-align savybes, kad tvarkytumėte RTL maketus. CSS Tinklelis savaime prisitaiko prie RTL, bet turėsite užtikrinti, kad jūsų maketas veiktų teisingai.
• Turinio Ilgis: Turinys skirtingomis kalbomis gali būti skirtingo ilgio. Kurkite maketus taip, kad jie prisitaikytų prie kintančio teksto ilgio, ypač antraštėms ir aprašymams. Naudokite `minmax()`, kad užtikrintumėte, jog turinys tilptų tinklelio langeliuose.
• Šriftų Palaikymas: Užtikrinkite, kad jūsų svetainė naudoja šriftus, palaikančius jūsų tikslines kalbas. Jei reikia, pateikite atsarginius šriftus. Apsvarstykite galimybę naudoti „Google Fonts“ ar kitas žiniatinklio šriftų paslaugas, siūlančias platų kalbų palaikymą.
• Valiutos ir Skaičių Formavimas: Jei rodote kainas ar skaičius, formatuokite juos pagal vartotojo lokalę. Naudokite atitinkamus valiutų simbolius ir skaičių formatus.
• Datos ir Laiko Formavimas: Rodykite datas ir laikus formatu, tinkamu vartotojo regionui. Apsvarstykite galimybę naudoti biblioteką datų ir laiko formatavimui.
• Prisitaikanti Medija: Užtikrinkite, kad jūsų maketai prisitaikytų prie medijos (paveikslėlių, vaizdo įrašų), kurią gali reikėti lokalizuoti. Pavyzdžiui, paveikslėlį su tekstu gali reikėti išversti į kelias kalbas.

Pažangios Technikos ir Aspektai

Pavadintos Tinklelio Linijos

Pavadintos tinklelio linijos gali padaryti jūsų kodą skaitomesnį ir lengviau prižiūrimą. Galite pavadinti tinklelio linijas apibrėždami savo tinklelio šabloną, kas leidžia naudoti pavadinimus vietoj skaičių, nurodant tinklelio linijas pozicionuojant elementus. Tai naudinga sudėtingiems maketams.

            
.grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
}

.item-one {
  grid-column: col-start / col-end;
}

            

              
                Copy
              
            
          

Įdėtieji Tinkleliai

CSS Tinklelis leidžia įdėti tinklelio konteinerius į tinklelio elementus. Tai suteikia didesnę kontrolę sudėtingų sekcijų išdėstymui jūsų bendrame tinklelyje. Tai leidžia kurti sudėtingus maketus ir modulinį dizainą.

            
<div class="grid-container">
  <div class="grid-item">
    <div class="nested-grid">
      <div class="nested-item">Item 1</div>
      <div class="nested-item">Item 2</div>
    </div>
  </div>
</div>

            

              
                Copy
              
            
          

            
.nested-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

            

              
                Copy
              
            
          

Tinklelio Derinimas su Kitais Maketavimo Metodais

CSS Tinklelis gerai veikia su kitais maketavimo metodais, tokiais kaip „Flexbox“. Galite naudoti „Flexbox“ smulkesnei kontrolei tinklelio elemento viduje. Hibridinio metodo naudojimas suteikia didesnę kontrolę ir lankstumą. Pavyzdžiui, „Flexbox“ horizontaliuoju lygiavimui, o „Grid“ vertikaliuoju lygiavimui ir t.t.

Išvada

CSS Tinklelio automatinio išdėstymo funkcijos yra galingas įrankis kuriant dinamiškus ir adaptyvius maketus, kurie sklandžiai prisitaiko prie skirtingų ekrano dydžių ir turinio variacijų. Suprasdami skirtingus automatinio išdėstymo algoritmus, savybes ir geriausias praktikas, galite kurti lanksčias ir lengvai prižiūrimas svetaines pasaulinei auditorijai. Nepamirškite atsižvelgti į prieinamumą, našumą ir internacionalizaciją viso projektavimo ir kūrimo proceso metu. Įvaldę šias technikas, galėsite kurti modernias interneto patirtis, kurios puikiai atrodo bet kokiame įrenginyje, bet kuriam vartotojui, visame pasaulyje.

Toliau praktikuokitės ir eksperimentuokite su skirtingais tinklelio maketais. Kuo daugiau naudosite CSS Tinklelį, tuo labiau įgusite. Sekite naujausias CSS Tinklelio specifikacijas, nes jis nuolat tobulėja ir siūlo dar daugiau įdomių galimybių tinklalapių dizainui.