ion-grid<\/code><\/strong>: T\u00fcm \u0131zgara yap\u0131s\u0131n\u0131 kapsayan ana konteynerdir. \u0130\u00e7eri\u011fi merkezler ve belirli bir maksimum geni\u015fli\u011fe sahip olabilir. Uygulaman\u0131z\u0131n ana d\u00fczenini olu\u015ftururken bu etiketi kullan\u0131rs\u0131n\u0131z. Varsay\u0131lan olarak, ion-grid<\/code> ak\u0131\u015fkan (fluid) bir geni\u015fli\u011fe sahiptir, yani ekran\u0131n tamam\u0131n\u0131 kaplar. fixed<\/code> \u00f6zniteli\u011fi ile sabit geni\u015flikli bir \u0131zgara da olu\u015fturulabilir, ancak mobil odakl\u0131 uygulamalarda genellikle ak\u0131\u015fkan tasar\u0131m tercih edilir.<\/p>\n\n \n <\/ion-grid><\/code><\/pre>\n2. ion-row<\/code><\/strong>: ion-grid<\/code> i\u00e7inde yer alan sat\u0131rlard\u0131r. Her ion-row<\/code> etiketi, bir sat\u0131r\u0131 temsil eder ve bu sat\u0131r\u0131n i\u00e7ine s\u00fctunlar yerle\u015ftirilir. Flexbox mant\u0131\u011f\u0131na g\u00f6re, bir sat\u0131r i\u00e7indeki s\u00fctunlar yatay olarak hizalan\u0131r.<\/p>\n\n \n \n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\n3. ion-col<\/code><\/strong>: ion-row<\/code> i\u00e7inde yer alan s\u00fctunlard\u0131r. ion-col<\/code> etiketleri, i\u00e7eri\u011finizi bar\u0131nd\u0131ran ger\u00e7ek “kutucuklard\u0131r”. Bir ion-row<\/code> i\u00e7inde birden fazla ion-col<\/code> bulunabilir ve bu s\u00fctunlar\u0131n geni\u015fli\u011fi, 12 birimlik \u0131zgara sistemi i\u00e7inde belirlenir.<\/p>\n\n \n S\u00fctun 1<\/ion-col>\n S\u00fctun 2<\/ion-col>\n S\u00fctun 3<\/ion-col>\n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\nBu \u00fc\u00e7 temel bile\u015fen, Ionic 2’deki herhangi bir duyarl\u0131 d\u00fczenin yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturur. Flexbox’\u0131n g\u00fcc\u00fcn\u00fc kullanarak, bu bile\u015fenler sayesinde i\u00e7eri\u011fi kolayca boyutland\u0131rabilir, hizalayabilir ve s\u0131ralayabilirsiniz.<\/p>\n
Izgara Yap\u0131s\u0131 ve Kullan\u0131m\u0131<\/h3>\n
Ionic 2’nin \u0131zgara sistemi, i\u00e7eri\u011fi d\u00fczenlemek i\u00e7in \u00e7e\u015fitli \u00f6znitelikler ve s\u0131n\u0131flar sunar. Bu \u00f6znitelikler sayesinde s\u00fctunlar\u0131n geni\u015fli\u011fini, hizalamas\u0131n\u0131, s\u0131ralamas\u0131n\u0131 ve farkl\u0131 ekran boyutlar\u0131na nas\u0131l tepki verece\u011fini kontrol edebiliriz.<\/p>\n
Temel Bir Izgara Olu\u015fturma<\/h4>\n
En basit haliyle, bir \u0131zgara olu\u015fturmak sadece ion-grid<\/code>, ion-row<\/code> ve ion-col<\/code> etiketlerini kullanmaktan ibarettir. E\u011fer ion-col<\/code> etiketlerine herhangi bir boyutland\u0131rma \u00f6zniteli\u011fi vermezseniz, bunlar varsay\u0131lan olarak e\u015fit geni\u015flikte da\u011f\u0131l\u0131rlar.<\/p>\n\n \n \n 1\/3 Geni\u015flik<\/div>\n <\/ion-col>\n \n 1\/3 Geni\u015flik<\/div>\n <\/ion-col>\n \n 1\/3 Geni\u015flik<\/div>\n <\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\nYukar\u0131daki \u00f6rnekte, her biri ekran\u0131n yakla\u015f\u0131k \u00fc\u00e7te birini kaplayan \u00fc\u00e7 e\u015fit geni\u015flikte s\u00fctun elde edersiniz.<\/p>\n
S\u00fctun Boyutland\u0131rma<\/h4>\n
Ionic \u0131zgara sistemi, s\u00fctunlara belirli geni\u015flikler ataman\u0131za olanak tan\u0131r. Bu, 12 birimlik \u0131zgara sistemini kullanarak yap\u0131l\u0131r. Yani, bir sat\u0131r i\u00e7indeki s\u00fctunlar\u0131n toplam geni\u015fli\u011fi 12’yi ge\u00e7memelidir.<\/p>\n
* Otomatik Boyutland\u0131rma<\/strong>: Daha \u00f6nce g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, ion-col<\/code> etiketi tek ba\u015f\u0131na kullan\u0131ld\u0131\u011f\u0131nda, mevcut bo\u015flu\u011fu e\u015fit olarak payla\u015f\u0131r.<\/p>\n* Belirli Geni\u015flikler<\/strong>: Bir s\u00fctuna belirli bir geni\u015flik atamak i\u00e7in col-N<\/code> \u00f6zniteli\u011fini kullan\u0131r\u0131z, burada N<\/code> 1 ile 12 aras\u0131nda bir say\u0131d\u0131r.<\/p>\n\n \n \n 4 Birim<\/div>\n <\/ion-col>\n \n 8 Birim<\/div>\n <\/ion-col>\n <\/ion-row>\n \n \n 2 Birim<\/div>\n <\/ion-col>\n \n 5 Birim<\/div>\n <\/ion-col>\n \n 5 Birim<\/div>\n <\/ion-col>\n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\n Bu \u00f6rnekte, ilk sat\u0131rda 4 ve 8 birim geni\u015fli\u011finde iki s\u00fctun, ikinci sat\u0131rda ise 2, 5 ve 5 birim geni\u015fli\u011finde \u00fc\u00e7 s\u00fctun bulunmaktad\u0131r. Her sat\u0131r\u0131n toplam geni\u015fli\u011fi 12 birimi ge\u00e7mez.<\/p>\n
* Duyarl\u0131 Boyutland\u0131rma (Responsive Sizing)<\/strong>: Mobil uygulamalar farkl\u0131 ekran boyutlar\u0131nda (telefonlar, tabletler) iyi g\u00f6r\u00fcnmelidir. Ionic \u0131zgara sistemi, belirli ekran boyutlar\u0131 i\u00e7in farkl\u0131 s\u00fctun geni\u015flikleri tan\u0131mlaman\u0131za olanak tan\u0131yan duyarl\u0131 \u00f6znitelikler sunar. Bu \u00f6znitelikler, k\u00fc\u00e7\u00fck (sm<\/code>), orta (md<\/code>), b\u00fcy\u00fck (lg<\/code>) ve ekstra b\u00fcy\u00fck (xl<\/code>) ekran boyutlar\u0131 i\u00e7in mevcuttur.<\/p>\n * col-sm-N<\/code>: K\u00fc\u00e7\u00fck ekranlar (576px ve \u00fczeri) i\u00e7in.
\n * col-md-N<\/code>: Orta ekranlar (768px ve \u00fczeri) i\u00e7in.
\n * col-lg-N<\/code>: B\u00fcy\u00fck ekranlar (992px ve \u00fczeri) i\u00e7in.
\n * col-xl-N<\/code>: Ekstra b\u00fcy\u00fck ekranlar (1200px ve \u00fczeri) i\u00e7in.<\/p>\n\n \n \n Duyarl\u0131 S\u00fctun<\/div>\n <\/ion-col>\n \n Duyarl\u0131 S\u00fctun<\/div>\n <\/ion-col>\n \n Duyarl\u0131 S\u00fctun<\/div>\n <\/ion-col>\n \n Duyarl\u0131 S\u00fctun<\/div>\n <\/ion-col>\n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\n Bu \u00f6rnekte, en k\u00fc\u00e7\u00fck ekranlarda her s\u00fctun tam geni\u015fli\u011fi (col-12<\/code>) kaplar. Ekran boyutu k\u00fc\u00e7\u00fcklere (sm<\/code>) ula\u015ft\u0131\u011f\u0131nda her s\u00fctun yar\u0131m geni\u015fli\u011fi (col-sm-6<\/code>) kaplar. Orta (md<\/code>) ekranlarda \u00fc\u00e7te birini (col-md-4<\/code>), b\u00fcy\u00fck (lg<\/code>) ekranlarda ise d\u00f6rtte birini (col-lg-3<\/code>) kaplar. Bu, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda otomatik olarak farkl\u0131 d\u00fczenlere sahip olmas\u0131n\u0131 sa\u011flar.<\/p>\nS\u00fctun Offset’leri (Column Offsets)<\/h4>\n
Bazen bir s\u00fctunu sa\u011fa do\u011fru itmek isteyebilirsiniz. Bunun i\u00e7in offset-N<\/code> \u00f6zniteli\u011fini kullan\u0131r\u0131z. Bu, s\u00fctunun sol taraf\u0131na belirli bir miktarda bo\u015fluk ekler. T\u0131pk\u0131 s\u00fctun boyutland\u0131rmada oldu\u011fu gibi, duyarl\u0131 offset’ler de mevcuttur: offset-sm-N<\/code>, offset-md-N<\/code>, vb.<\/p>\n\n \n \n Ortalanm\u0131\u015f S\u00fctun<\/div>\n <\/ion-col>\n <\/ion-row>\n \n \n Orta Ekranlarda Sa\u011fa Kayd\u0131r<\/div>\n <\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\n\u0130lk sat\u0131rda 4 birim geni\u015fli\u011findeki s\u00fctun, solundan 4 birim bo\u015fluk b\u0131rak\u0131larak ortalanm\u0131\u015f gibi g\u00f6r\u00fcn\u00fcr (toplamda 4 bo\u015fluk + 4 s\u00fctun + 4 bo\u015fluk = 12). \u0130kinci sat\u0131rda, k\u00fc\u00e7\u00fck ekranlarda normal bir s\u00fctun iken, orta ekranlarda 6 birim sa\u011fa kayd\u0131r\u0131l\u0131r.<\/p>\n
S\u00fctun S\u0131ralamas\u0131 (Column Ordering)<\/h4>\n
Flexbox’\u0131n bir ba\u015fka g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi de s\u00fctunlar\u0131n HTML’deki s\u0131ras\u0131ndan ba\u011f\u0131ms\u0131z olarak g\u00f6rsel olarak yeniden d\u00fczenlenebilmesidir. order-N<\/code> \u00f6zniteli\u011fi, s\u00fctunlar\u0131n s\u0131ralamas\u0131n\u0131 kontrol etmenizi sa\u011flar. Daha d\u00fc\u015f\u00fck order<\/code> de\u011ferine sahip s\u00fctunlar daha \u00f6nce g\u00f6r\u00fcn\u00fcr. Ayr\u0131ca order-first<\/code> ve order-last<\/code> \u00f6znitelikleri de mevcuttur. Duyarl\u0131 s\u0131ralama i\u00e7in order-sm-N<\/code>, order-md-N<\/code> gibi \u00f6znitelikler kullan\u0131l\u0131r.<\/p>\n\n \n \n Sonuncu G\u00f6r\u00fcn\u00fcr<\/div>\n <\/ion-col>\n \n \u0130kinci G\u00f6r\u00fcn\u00fcr<\/div>\n <\/ion-col>\n \n \u0130lk G\u00f6r\u00fcn\u00fcr<\/div>\n <\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\nBu \u00f6rnekte, “\u0130lk G\u00f6r\u00fcn\u00fcr” etiketi ta\u015f\u0131yan s\u00fctun HTML’de \u00fc\u00e7\u00fcnc\u00fc s\u0131rada olmas\u0131na ra\u011fmen, order-first<\/code> sayesinde g\u00f6rsel olarak ilk s\u0131rada yer al\u0131r. “Sonuncu G\u00f6r\u00fcn\u00fcr” ise order-last<\/code> sayesinde en sona gider.<\/p>\nS\u00fctun Hizalama (Column Alignment)<\/h4>\n
Ionic \u0131zgara sistemi, Flexbox’\u0131n hizalama \u00f6zelliklerini kullanarak hem dikey hem de yatay y\u00f6nde s\u00fctunlar\u0131 ve i\u00e7eriklerini hizalaman\u0131za olanak tan\u0131r.<\/p>\n
* Dikey Hizalama (Vertical Alignment)<\/strong>: ion-row<\/code> etiketine uygulanan s\u0131n\u0131flarla, bir sat\u0131r i\u00e7indeki s\u00fctunlar\u0131n dikey olarak nas\u0131l hizalanaca\u011f\u0131n\u0131 kontrol edersiniz.
\n * align-items-start<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n \u00fcst\u00fcne hizalar.
\n * align-items-center<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n ortas\u0131na hizalar.
\n * align-items-end<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n alt\u0131na hizalar.<\/p>\n Tek bir s\u00fctunu dikey olarak hizalamak i\u00e7in align-self-start<\/code>, align-self-center<\/code>, align-self-end<\/code> \u00f6zniteliklerini kullanabilirsiniz.<\/p>\n\n \n \n \u00dcstte<\/div>\n <\/ion-col>\n \n Ortada<\/div>\n <\/ion-col>\n \n Altta<\/div>\n <\/ion-col>\n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\n Bu \u00f6rnekte, sat\u0131r\u0131n y\u00fcksekli\u011fi sabitlenmi\u015f olup, t\u00fcm s\u00fctunlar varsay\u0131lan olarak dikeyde ortalanm\u0131\u015ft\u0131r (align-items-center<\/code>). Ancak son s\u00fctun align-self-end<\/code> ile \u00f6zel olarak alta hizalanm\u0131\u015ft\u0131r.<\/p>\n* Yatay Hizalama (Horizontal Alignment)<\/strong>: ion-row<\/code> etiketine uygulanan s\u0131n\u0131flarla, bir sat\u0131r i\u00e7indeki s\u00fctunlar\u0131n yatay olarak nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 kontrol edersiniz.
\n * justify-content-start<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n ba\u015f\u0131na hizalar (varsay\u0131lan).
\n * justify-content-center<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n ortas\u0131na hizalar.
\n * justify-content-end<\/code>: S\u00fctunlar\u0131 sat\u0131r\u0131n sonuna hizalar.
\n * justify-content-around<\/code>: S\u00fctunlar aras\u0131nda e\u015fit bo\u015fluk b\u0131rak\u0131r, kenarlarda yar\u0131m bo\u015fluk.
\n * justify-content-between<\/code>: S\u00fctunlar aras\u0131nda e\u015fit bo\u015fluk b\u0131rak\u0131r, kenarlarda bo\u015fluk b\u0131rakmaz.<\/p>\n\n \n 1<\/div><\/ion-col>\n 2<\/div><\/ion-col>\n <\/ion-row>\n \n A<\/div><\/ion-col>\n B<\/div><\/ion-col>\n <\/ion-row>\n <\/ion-grid><\/code><\/pre>\n \u0130lk sat\u0131rda, iki s\u00fctun yatay olarak ortalanm\u0131\u015ft\u0131r. \u0130kinci sat\u0131rda ise, iki s\u00fctun sat\u0131r\u0131n en ba\u015f\u0131na ve en sonuna yerle\u015fmi\u015f, aralar\u0131ndaki bo\u015fluk e\u015fit olarak da\u011f\u0131t\u0131lm\u0131\u015ft\u0131r.<\/p>\n
S\u00fctun Sarma (Column Wrapping)<\/h4>\n
E\u011fer bir ion-row<\/code> i\u00e7indeki ion-col<\/code> etiketlerinin toplam geni\u015fli\u011fi 12 birimi a\u015farsa, a\u015fan s\u00fctunlar otomatik olarak bir sonraki sat\u0131ra sar\u0131l\u0131r. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck ekranlarda i\u00e7eri\u011fin ta\u015fmas\u0131n\u0131 \u00f6nlemek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n \n S\u00fctun 1 (8 birim)<\/div><\/ion-col>\n S\u00fctun 2 (6 birim) - Sar\u0131lacak<\/div><\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\nBu \u00f6rnekte, ilk s\u00fctun 8 birim geni\u015fli\u011finde, ikinci s\u00fctun ise 6 birim geni\u015fli\u011findedir. Toplamda 14 birim oldu\u011fu i\u00e7in, ikinci s\u00fctun otomatik olarak bir alt sat\u0131ra ge\u00e7er.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131<\/h3>\n
Ionic \u0131zgara sistemi sadece basit d\u00fczenler olu\u015fturmakla kalmaz, ayn\u0131 zamanda daha karma\u015f\u0131k ve i\u00e7 i\u00e7e ge\u00e7mi\u015f yap\u0131lar i\u00e7in de g\u00fc\u00e7l\u00fc bir temel sunar.<\/p>\n
\u0130\u00e7 \u0130\u00e7e Izgaralar (Nested Grids)<\/h4>\n
Bir ion-col<\/code> etiketi i\u00e7ine ba\u015fka bir ion-grid<\/code> yerle\u015ftirerek i\u00e7 i\u00e7e \u0131zgaralar olu\u015fturabilirsiniz. Bu, daha karma\u015f\u0131k bile\u015fenlerin veya b\u00f6l\u00fcmlerin kendi i\u00e7lerinde duyarl\u0131 bir d\u00fczene sahip olmas\u0131n\u0131 sa\u011flar. \u0130\u00e7 i\u00e7e \u0131zgaralar, ana \u0131zgaradan ba\u011f\u0131ms\u0131z olarak kendi 12 s\u00fctunlu sistemlerine sahiptir.<\/p>\n\n \n \n Ana S\u00fctun 1 (6 birim)<\/div>\n \n \n \n \u0130\u00e7 S\u00fctun A (6 birim)<\/div>\n <\/ion-col>\n \n \u0130\u00e7 S\u00fctun B (6 birim)<\/div>\n <\/ion-col>\n <\/ion-row>\n <\/ion-grid>\n <\/ion-col>\n \n Ana S\u00fctun 2 (6 birim)<\/div>\n <\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\nBu \u00f6rnekte, ilk ana s\u00fctun kendi i\u00e7inde 6 birimlik iki s\u00fctuna ayr\u0131lm\u0131\u015ft\u0131r. \u0130\u00e7 \u0131zgaran\u0131n s\u00fctunlar\u0131, d\u0131\u015f \u0131zgaran\u0131n s\u00fctun geni\u015fli\u011fine g\u00f6re de\u011fil, kendi i\u00e7 \u0131zgaras\u0131n\u0131n 12 birimlik sistemine g\u00f6re boyutlan\u0131r.<\/p>\n
Sabit Geni\u015flikli Izgara (Fixed Width Grid)<\/h4>\n
Varsay\u0131lan olarak, ion-grid<\/code> etiketi ekran\u0131n t\u00fcm geni\u015fli\u011fini kaplar (fluid). Ancak, baz\u0131 durumlarda daha geleneksel bir “kapsay\u0131c\u0131” (container) mant\u0131\u011f\u0131yla \u00e7al\u0131\u015fmak isteyebilirsiniz. fixed<\/code> \u00f6zniteli\u011fini kullanarak ion-grid<\/code>‘i belirli bir maksimum geni\u015fli\u011fe sahip sabit bir \u0131zgaraya d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n\n \n \n Sabit Geni\u015flikli Izgara \u0130\u00e7eri\u011fi<\/div>\n <\/ion-col>\n <\/ion-row>\n<\/ion-grid><\/code><\/pre>\nfixed<\/code> \u00f6zniteli\u011fi eklendi\u011finde, ion-grid<\/code> belirli ekran boyutlar\u0131nda (breakpoint’lerde) maksimum geni\u015fliklere ula\u015f\u0131r (\u00f6rne\u011fin, 720px, 960px, 1140px gibi). Bu, \u00f6zellikle tablet veya masa\u00fcst\u00fc modunda daha kontroll\u00fc bir d\u00fczen sa\u011flamak istedi\u011finizde kullan\u0131\u015fl\u0131 olabilir.<\/p>\nBo\u015fluklar ve Dolgular (Gutters and Padding)<\/h4>\n
Ionic \u0131zgara sistemi, s\u00fctunlar aras\u0131nda varsay\u0131lan olarak k\u00fc\u00e7\u00fck bir bo\u015fluk (gutter) b\u0131rak\u0131r. Bu bo\u015fluklar, i\u00e7eri\u011fin birbirine yap\u0131\u015fmas\u0131n\u0131 \u00f6nleyerek daha okunabilir ve estetik bir d\u00fczen sa\u011flar. Bu bo\u015fluklar genellikle ion-col<\/code> etiketlerine uygulanan dahili padding ile sa\u011flan\u0131r. Genellikle bu varsay\u0131lan bo\u015fluklar\u0131 de\u011fi\u015ftirmeye gerek yoktur, ancak \u00f6zel durumlarda CSS ile ion-col<\/code> \u00f6\u011felerinin padding de\u011ferlerini override edebilirsiniz. Ancak bu, \u0131zgara sisteminin genel uyumunu bozabilir, bu y\u00fczden dikkatli kullan\u0131lmal\u0131d\u0131r.<\/p>\nPratik \u00d6rnekler<\/h3>\n
\u015eimdiye kadar \u00f6\u011frendiklerimizi ger\u00e7ek d\u00fcnya senaryolar\u0131na uygulayarak peki\u015ftirelim.<\/p>\n
Basit Bir \u00dcr\u00fcn Listesi Layout’u<\/h4>\n
Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcnleri g\u00f6stermek i\u00e7in duyarl\u0131 bir \u0131zgara kullanabiliriz.<\/p>\n
\n \n \u00dcr\u00fcnler<\/ion-title>\n <\/ion-navbar>\n<\/ion-header>\n\n\n \n \n \n \n ![\"{{]()
\n \n \n {{ product.name }}\n <\/ion-card-title>\n {{ product.price | currency:'USD':true:'1.2-2' }}<\/p>\n