Tinklelis gali būti apibrėžtas kaip susikertančių vertikalių ir horizontalių linijų rinkinys. CSS tinklelio išdėstymas padalija puslapį į pagrindines dalis. Tinklelio nuosavybė siūlo tinkleliu pagrįstą išdėstymo sistemą su eilėmis ir stulpeliais. Tai palengvina tinklalapių kūrimą be pozicionavimo ir slankiojimo. Tinklelio išdėstymas suteikia galimybę kurti tinklelio struktūras, pavaizduotas CSS, o ne HTML.
Panašiai kaip ir lentelė, vartotojas gali lygiuoti elementus į eilutes ir stulpelius. Tačiau, palyginti su lentelėmis, nesunku sukurti išdėstymą naudojant CSS tinklelį. Tinklelio stulpelius ir eilutes galime apibrėžti naudodami tinklelis-šablonas-eilutės ir tinklelis-šablonas-stulpeliai savybių.
Tinklelio konteinerį galima sukurti deklaruojant ekranas: tinklelis arba ekranas: inline-grid ant elemento. Tinklelio konteineryje yra tinklelio elementai, patalpinti eilučių ir stulpelių viduje.
Grid v/s Flexbox
Paprastai kyla klausimas, kuo tinklelis skiriasi nuo „flexbox“. Tinklelis skirtas dvimačiams maketams (eilutės ir stulpeliai tuo pačiu metu), o lanksčioji dėžutė naudojama vienmačiams maketams (eilėje arba stulpelyje). Flexbox naudojamas, kai viskas turi būti tiesia linija.
Flexbox naudojamas elementams išdėstyti viename stulpelyje arba vienoje eilutėje. Kita vertus, tinklelyje geriausia išdėstyti elementus keliuose stulpeliuose ir eilutėse.
Supraskime tinklelį CSS naudodami pavyzdį.
Pavyzdys
.main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight Išbandykite dabar Išvestis
