Web Tasar\u0131m\u0131nda Karma\u015f\u0131k Layout Problemi ve Subgrid’in \u00c7\u00f6z\u00fcm\u00fc Nedir?<\/h2>\n
G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren, g\u00f6rsel olarak \u00e7ekici ve i\u015flevsel web siteleri olu\u015fturmak, geli\u015ftiriciler ve tasar\u0131mc\u0131lar i\u00e7in s\u00fcrekli bir meydan okuma haline gelmi\u015ftir. \u00d6zellikle e-ticaret siteleri, kurumsal portallar veya ki\u015fisel bloglar gibi farkl\u0131 i\u00e7erik t\u00fcrlerini ve bile\u015fenleri bir araya getiren platformlar, karma\u015f\u0131k layout (d\u00fczen) ihtiya\u00e7lar\u0131 do\u011furur. \u00d6rne\u011fin, bir \u00fcr\u00fcn listeleme sayfas\u0131nda, her bir \u00fcr\u00fcn kart\u0131n\u0131n ba\u015fl\u0131\u011f\u0131, fiyat\u0131 ve a\u00e7\u0131klamas\u0131 farkl\u0131 uzunluklarda olabilir; ancak t\u00fcm kartlar\u0131n bu \u00f6\u011felerini ayn\u0131 dikey hizada tutmak, estetik ve okunabilirlik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Geleneksel CSS Grid yakla\u015f\u0131mlar\u0131yla bu t\u00fcr senaryolarda tutarl\u0131 bir hizalama sa\u011flamak, \u00e7o\u011fu zaman ek CSS hileleri, JavaScript m\u00fcdahaleleri veya gereksiz sarmalay\u0131c\u0131 div’ler kullanmay\u0131 gerektirir ki bu da kod karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. \u0130\u015fte tam bu noktada, modern web tasar\u0131m\u0131na yepyeni bir soluk getiren CSS Subgrid devreye giriyor.<\/p>\n
Subgrid, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bir ana Grid konteynerinin sahip oldu\u011fu s\u00fctun ve sat\u0131r tan\u0131mlar\u0131n\u0131, \u00e7ocuk \u00f6\u011felerinin kendi i\u00e7lerinde birer Grid olarak kullanmalar\u0131na olanak tan\u0131yan g\u00fc\u00e7l\u00fc bir CSS Grid \u00f6zelli\u011fidir. Bu sayede, i\u00e7 i\u00e7e ge\u00e7mi\u015f Grid yap\u0131lar\u0131 aras\u0131nda m\u00fckemmel bir uyum ve hizalama sa\u011flan\u0131r. Daha \u00f6nce, bir Grid \u00f6\u011fesinin i\u00e7inde yeni bir Grid tan\u0131mlad\u0131\u011f\u0131m\u0131zda, bu yeni Grid, ana Grid’in izlerinden ba\u011f\u0131ms\u0131z olarak kendi s\u00fctun ve sat\u0131rlar\u0131n\u0131 olu\u015ftururdu. Ancak Subgrid ile, ana Grid’in tan\u0131mlad\u0131\u011f\u0131 \u00e7izgiler (sat\u0131r ve s\u00fctun hatlar\u0131) do\u011frudan alt elemanlara miras kal\u0131r. Bu durum, \u00f6zellikle bile\u015fen tabanl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131nda, farkl\u0131 bile\u015fenlerin ana Grid’deki di\u011fer elemanlarla ayn\u0131 \u00e7izgide hizalanmas\u0131n\u0131 kolayla\u015ft\u0131rarak, g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131 en \u00fcst seviyeye \u00e7\u0131kar\u0131r.<\/p>\n
Peki, bu ne anlama geliyor? Art\u0131k bir bile\u015fenin i\u00e7indeki \u00f6\u011feleri, ana layout’un genel yap\u0131s\u0131yla senkronize bir \u015fekilde hizalayabilirsiniz. \u00d6rne\u011fin, ana sayfan\u0131zda \u00fc\u00e7 s\u00fctunlu bir Grid yap\u0131n\u0131z var ve bu s\u00fctunlardan birinde bir haber kart\u0131 bile\u015feni bulunuyor. Haber kart\u0131n\u0131n i\u00e7inde de ba\u015fl\u0131k, g\u00f6rsel ve metin gibi \u00f6\u011feler var. Subgrid kullanarak, bu haber kart\u0131n\u0131n i\u00e7indeki ba\u015fl\u0131k ve metin \u00f6\u011felerini, ana Grid’in di\u011fer s\u00fctunlar\u0131ndaki benzer \u00f6\u011felerle m\u00fckemmel bir \u015fekilde hizalayabilirsiniz. Bu sayede, t\u00fcm sayfa genelinde g\u00f6z yormayan, d\u00fczenli ve profesyonel bir g\u00f6r\u00fcn\u00fcm elde edilir.<\/p>\n
Bu makalede, CSS Subgrid’in ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve web tasar\u0131mlar\u0131n\u0131za nas\u0131l entegre edebilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. \u00d6\u011frenme yolculu\u011fumuz, konuya tamamen yabanc\u0131 olanlardan ba\u015flayarak, Subgrid’in ileri d\u00fczey kullan\u0131m senaryolar\u0131na kadar uzanacak. Ger\u00e7ek d\u00fcnya \u00f6rnekleri ve detayl\u0131 kod bloklar\u0131yla, bu g\u00fc\u00e7l\u00fc arac\u0131n potansiyelini tam anlam\u0131yla kavrayacak ve kendi projelerinizde nas\u0131l ustaca kullanabilece\u011finizi \u00f6\u011freneceksiniz. Haz\u0131rsan\u0131z, web tasar\u0131m\u0131nda bir sonraki seviyeye ge\u00e7mek i\u00e7in Subgrid’in kap\u0131lar\u0131n\u0131 aralayal\u0131m!<\/p>\n<\/section>\n Web tasar\u0131m d\u00fcnyas\u0131nda layout olu\u015fturma y\u00f6ntemleri, y\u0131llar i\u00e7inde b\u00fcy\u00fck evrimler ge\u00e7irdi. Tablolardan float \u00f6zelliklerine, ard\u0131ndan Flexbox’a ve nihayetinde CSS Grid’e kadar uzanan bu yolculuk, geli\u015ftiricilere daha esnek ve g\u00fc\u00e7l\u00fc ara\u00e7lar sunmay\u0131 hedefledi. CSS Grid Layout mod\u00fcl\u00fc, iki boyutlu layoutlar\u0131 (hem sat\u0131rlar\u0131 hem de s\u00fctunlar\u0131 ayn\u0131 anda) y\u00f6netme yetene\u011fi sayesinde k\u0131sa s\u00fcrede modern web tasar\u0131m\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. Tek bir Grid konteyneri ile karma\u015f\u0131k sayfa d\u00fczenlerini tan\u0131mlamak, responsive tasar\u0131mlar\u0131 kolayca uygulamak ve \u00f6\u011feleri hassas bir \u015fekilde konumland\u0131rmak m\u00fcmk\u00fcn hale geldi. Ancak, Grid’in kendisinin bile baz\u0131 s\u0131n\u0131rlar\u0131 vard\u0131, \u00f6zellikle i\u00e7 i\u00e7e ge\u00e7mi\u015f layoutlar s\u00f6z konusu oldu\u011funda.<\/p>\n CSS Grid, bir konteynerin \u00e7ocuk \u00f6\u011felerini hizalamak i\u00e7in m\u00fckemmeldir. Diyelim ki bir haber sitesi tasarl\u0131yorsunuz. Ana layout’unuzda \u00fc\u00e7 s\u00fctunlu bir Grid var. Bu s\u00fctunlardan her birinde, birer “haber kart\u0131” bile\u015feni yer al\u0131yor. Her haber kart\u0131n\u0131n i\u00e7inde ise bir g\u00f6rsel, bir ba\u015fl\u0131k ve bir metin alan\u0131 bulunuyor. Geleneksel Grid yakla\u015f\u0131m\u0131nda, her haber kart\u0131 kendi i\u00e7inde yeni bir Grid konteyneri olu\u015fturur ve bu yeni Grid, ana Grid’den ba\u011f\u0131ms\u0131z olarak kendi s\u00fctun ve sat\u0131rlar\u0131n\u0131 tan\u0131mlar. Bu durum, \u00f6zellikle kartlar\u0131n ba\u015fl\u0131klar\u0131 veya metinleri gibi \u00f6\u011feleri, ana layout’un genel s\u00fctun \u00e7izgileriyle hizalamak istedi\u011fimizde sorun yarat\u0131r. \u00c7\u00fcnk\u00fc kart i\u00e7indeki Grid, ana Grid’in \u00e7izgilerinden haberdar de\u011fildir. Sonu\u00e7 olarak:<\/p>\n Bu yetersizlikler, \u00f6zellikle bile\u015fen tabanl\u0131 mimarilerin yayg\u0131nla\u015ft\u0131\u011f\u0131, tasar\u0131m sistemlerinin ve tutarl\u0131l\u0131\u011f\u0131n \u00f6n planda oldu\u011fu modern web geli\u015ftirme s\u00fcre\u00e7lerinde daha da belirgin hale geldi. Geli\u015ftiriciler ve tasar\u0131mc\u0131lar, bir bile\u015fenin kendi i\u00e7inde de ana layout’un \u00e7izgilerine sayg\u0131 g\u00f6steren bir Grid yap\u0131s\u0131na sahip olman\u0131n yollar\u0131n\u0131 ar\u0131yorlard\u0131.<\/p>\n CSS Subgrid, tam da bu “Grid i\u00e7indeki Grid” sorununu k\u00f6kten \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Temelde, bir Grid \u00f6\u011fesinin, ebeveyn Grid’inin s\u00fctun veya sat\u0131r izlerini (veya her ikisini) kendi Grid tan\u0131mlar\u0131 olarak kullanmas\u0131na izin verir. Yani, bir \u00f6\u011fe Bu \u00f6zellik sayesinde:<\/p>\n \u00d6zetle, Subgrid, CSS Grid’in zaten g\u00fc\u00e7l\u00fc olan yeteneklerini geni\u015fleterek, karma\u015f\u0131k web aray\u00fczlerinde layout kontrol\u00fcn\u00fc bir \u00fcst seviyeye ta\u015f\u0131r. Art\u0131k “Grid i\u00e7inde Grid” problemi bir engel olmaktan \u00e7\u0131k\u0131p, daha uyumlu ve estetik tasar\u0131mlar yaratmak i\u00e7in bir f\u0131rsata d\u00f6n\u00fc\u015f\u00fcyor. Bu devrim niteli\u011findeki \u00f6zelli\u011fi anlamak ve do\u011fru bir \u015fekilde kullanmak, modern web geli\u015ftiricileri i\u00e7in hayati \u00f6nem ta\u015f\u0131maktad\u0131r.<\/p>\n Uzman \u0130pucu:<\/strong> Subgrid’i anlaman\u0131n anahtar\u0131, onu yaln\u0131zca bir hizalama arac\u0131 olarak de\u011fil, ayn\u0131 zamanda bir “tasar\u0131m sistemi uyumla\u015ft\u0131rma” arac\u0131 olarak g\u00f6rmektir. Bile\u015fenlerinizin kendi i\u00e7indeki d\u00fczeniyle, ana sayfan\u0131n genel d\u00fczeni aras\u0131nda m\u00fckemmel bir k\u00f6pr\u00fc kurar.<\/p>\n<\/p><\/div>\n<\/section>\n CSS Subgrid’in g\u00fcc\u00fcn\u00fc tam olarak kavrayabilmek i\u00e7in, \u00f6ncelikle temel prensiplerini ve s\u00f6zdizimini anlamak \u00e7ok \u00f6nemlidir. E\u011fer CSS Grid’e zaten a\u015fina iseniz, Subgrid’e ge\u00e7i\u015f yapman\u0131z olduk\u00e7a kolay olacakt\u0131r. Temelde, Subgrid bir ebeveyn Grid konteynerinin sahip oldu\u011fu s\u00fctun ve\/veya sat\u0131r tan\u0131mlar\u0131n\u0131, kendi \u00e7ocuk \u00f6\u011felerine miras b\u0131rakmas\u0131n\u0131 sa\u011flayan bir mekanizmad\u0131r. Bu, daha \u00f6nce kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z “i\u00e7 Grid’lerin ana Grid’den habersiz olmas\u0131” sorununu ortadan kald\u0131r\u0131r.<\/p>\n Subgrid’e ge\u00e7meden \u00f6nce, CSS Grid’in temelini hat\u0131rlayal\u0131m. Bir HTML \u00f6\u011fesini Grid konteyneri yapmak i\u00e7in <\/code><\/p>\n Bu kod blo\u011fu, \u00fc\u00e7 s\u00fctunlu ve \u00fc\u00e7 sat\u0131rl\u0131 bir ana layout olu\u015fturur. \u00c7ocuk \u00f6\u011feler, Bir Grid \u00f6\u011fesini Subgrid yapmak i\u00e7in, \u00f6ncelikle o \u00f6\u011fenin bir Grid konteyneri olmas\u0131 ve daha sonra da ebeveyn Grid'inin bir \u00f6\u011fesi olmas\u0131 gerekir. Yani, ana Grid'in bir \u00e7ocu\u011fu olan bir \u00f6\u011feye Anahtar k\u0131s\u0131m buras\u0131d\u0131r: Bir Grid \u00f6\u011fesini Subgrid yapmak i\u00e7in, onun \u00d6rne\u011fin, ana layout'unuzda yer alan bir \"kart\" \u00f6\u011fesini ele alal\u0131m. Bu kart, ana Grid'in belirli bir alan\u0131n\u0131 kapl\u0131yor ve kendi i\u00e7inde de \u00f6\u011feleri d\u00fczenlemek i\u00e7in bir Grid'e ihtiya\u00e7 duyuyor:<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Bu, kartlar\u0131n i\u00e7indeki \u00f6\u011felerin, sadece kendi kartlar\u0131 i\u00e7inde de\u011fil, ayn\u0131 zamanda ana layout'un genel yap\u0131s\u0131yla da hizalanmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, e\u011fer ana layout'ta ba\u015fka bir bile\u015fen de \u015eimdi daha basit bir senaryo ile bu kavram\u0131 peki\u015ftirelim. Bir ana Grid'imiz ve i\u00e7inde iki \u00e7ocuk \u00f6\u011femiz olsun. Bu \u00e7ocuk \u00f6\u011felerden biri de kendi i\u00e7inde Subgrid olsun.<\/p>\n Bu \u00fcr\u00fcn, g\u00fcnl\u00fck ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131layacak ola\u011fan\u00fcst\u00fc \u00f6zelliklere sahiptir. Uzun bir a\u00e7\u0131klama metni i\u00e7in yer tutucu.<\/p>\n 129.99 TL<\/span>\n CSS Grid’in G\u00fcc\u00fc ve Subgrid’in Do\u011fu\u015fu: Neden \u0130htiya\u00e7 Duyduk?<\/h2>\n
grid-template-columns<\/code> ve grid-template-rows<\/code> gibi \u00f6zelliklerle s\u00fctun ve sat\u0131r yap\u0131lar\u0131n\u0131 belirleyebilir, grid-gap<\/code> ile aralar\u0131ndaki bo\u015fluklar\u0131 kontrol edebilir ve grid-column<\/code>, grid-row<\/code> ile \u00e7ocuk \u00f6\u011felerin bu Grid \u00fczerindeki konumlar\u0131n\u0131 tayin edebiliriz. Bu, genellikle ana sayfa d\u00fczeni gibi \u00fcst d\u00fczey layoutlar i\u00e7in son derece yeterlidir. Ancak, bir Grid \u00f6\u011fesinin kendi i\u00e7inde de karma\u015f\u0131k bir d\u00fczen gerektiren daha k\u00fc\u00e7\u00fck bile\u015fenler bar\u0131nd\u0131rmas\u0131 gerekti\u011finde “Grid i\u00e7indeki Grid” problemi ortaya \u00e7\u0131kar.<\/p>\nGrid \u0130\u00e7indeki Grid Problemi: Mevcut Grid Sistemi Nerede Yetersiz Kal\u0131yor?<\/h3>\n
\n
Subgrid Nedir ve Bu Problemi Nas\u0131l Adresler?<\/h3>\n
display: grid<\/code> ve grid-template-columns: subgrid<\/code> veya grid-template-rows: subgrid<\/code> olarak ayarland\u0131\u011f\u0131nda, kendi Grid yap\u0131lar\u0131n\u0131 ebeveyninin Grid \u00e7izgilerinden devral\u0131r.<\/p>\n\n
Subgrid Nas\u0131l \u00c7al\u0131\u015f\u0131r? Temel Prensipler ve S\u00f6zdizimi<\/h2>\n
CSS Grid’in Temelleri:
display: grid<\/code> ve grid-template-columns\/rows<\/code><\/h3>\ndisplay: grid<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z. Daha sonra, grid-template-columns<\/code> ile s\u00fctunlar\u0131n geni\u015fli\u011fini ve say\u0131s\u0131n\u0131, grid-template-rows<\/code> ile de sat\u0131rlar\u0131n y\u00fcksekli\u011fini ve say\u0131s\u0131n\u0131 tan\u0131mlar\u0131z. \u00d6rne\u011fin:<\/p>\n\n.ana-layout {\n display: grid;\n grid-template-columns: 1fr 2fr 1fr; \/* 3 s\u00fctun *\/\n grid-template-rows: auto 1fr auto; \/* 3 sat\u0131r *\/\n gap: 20px;\n}\n <\/pre>\ngrid-column<\/code> ve grid-row<\/code> \u00f6zellikleriyle bu Grid \u00e7izgileri \u00fczerinde konumland\u0131r\u0131l\u0131r. \u0130\u015fte bu noktada Subgrid'in sihirli dokunu\u015fu devreye giriyor.<\/p>\ndisplay: subgrid<\/code> Kullan\u0131m\u0131: Bir D\u00f6n\u00fcm Noktas\u0131<\/h3>\ndisplay: grid<\/code> uygulad\u0131ktan sonra, bu \u00f6\u011feyi ayn\u0131 zamanda Subgrid olarak tan\u0131mlar\u0131z. Ancak, display: subgrid<\/code> diye do\u011frudan bir de\u011fer yoktur. Bunun yerine, Subgrid \u00f6zelli\u011fi, grid-template-columns<\/code> ve grid-template-rows<\/code> \u00f6zelliklerine \u00f6zel bir de\u011fer verilerek etkinle\u015ftirilir.<\/p>\ngrid-template-columns: subgrid<\/code> ve grid-template-rows: subgrid<\/code> Detaylar\u0131<\/h3>\ngrid-template-columns<\/code> veya grid-template-rows<\/code> (veya her ikisini birden) de\u011ferini subgrid<\/code> olarak ayarlars\u0131n\u0131z. Bu, o Grid \u00f6\u011fesinin, ebeveyn Grid'inin ilgili s\u00fctun veya sat\u0131r tan\u0131mlar\u0131n\u0131 devralmas\u0131n\u0131 sa\u011flar.<\/p>\n\n.ana-layout {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \/* Ana layout'ta 3 e\u015fit s\u00fctun *\/\n gap: 20px;\n padding: 20px;\n}\n\n.kart {\n grid-column: 1 \/ span 3; \/* Kart, ana Grid'in t\u00fcm 3 s\u00fctununu kapl\u0131yor *\/\n display: grid; \/* Kart\u0131n kendisi de bir Grid konteyneri *\/\n grid-template-columns: subgrid; \/* Buras\u0131 \u00f6nemli! S\u00fctunlar\u0131n\u0131 ana Grid'den miras al *\/\n grid-template-rows: auto 1fr auto; \/* Kart\u0131n kendi i\u00e7inde 3 sat\u0131r\u0131 var *\/\n background-color: #f0f0f0;\n border-radius: 8px;\n padding: 15px;\n}\n\n.kart-baslik {\n grid-column: 1 \/ 4; \/* Kart ba\u015fl\u0131\u011f\u0131, miras ald\u0131\u011f\u0131 1. s\u00fctundan 4. \u00e7izgiye kadar uzar (yani t\u00fcm kart geni\u015fli\u011fi) *\/\n text-align: center;\n margin-bottom: 10px;\n}\n\n.kart-icerik {\n grid-column: 2 \/ 3; \/* Kart i\u00e7eri\u011fi, miras ald\u0131\u011f\u0131 2. s\u00fctunu kaplar *\/\n margin-bottom: 15px;\n}\n\n.kart-buton {\n grid-column: 1 \/ 4; \/* Buton da t\u00fcm geni\u015fli\u011fi kaplar *\/\n justify-self: center;\n}\n <\/pre>\n.ana-layout<\/code> \u00fc\u00e7 e\u015fit s\u00fctunlu bir Grid olu\u015fturuyor. .kart<\/code> \u00f6\u011fesi, ana Grid'in tamam\u0131n\u0131 (grid-column: 1 \/ span 3<\/code>) kapl\u0131yor. Ancak kritik nokta, .kart<\/code> \u00f6\u011fesinin kendi i\u00e7inde display: grid<\/code> olarak ayarland\u0131ktan sonra, grid-template-columns: subgrid<\/code> ile ana Grid'in s\u00fctun \u00e7izgilerini miras almas\u0131d\u0131r. Bu sayede, .kart-baslik<\/code>, .kart-icerik<\/code> ve .kart-buton<\/code> gibi \u00f6\u011feler, kart\u0131n i\u00e7indeki Grid'in kendi s\u00fctunlar\u0131n\u0131 de\u011fil, do\u011frudan ana Grid'in 1, 2, 3 ve 4. s\u00fctun \u00e7izgilerini kullanarak konumland\u0131r\u0131labilirler.<\/p>\n.kart-icerik<\/code> ile ayn\u0131 2. s\u00fctunu kullan\u0131yorsa, Subgrid sayesinde ikisi de m\u00fckemmel bir dikey hizada g\u00f6r\u00fcnecektir.<\/p>\nBasit Bir \u00d6rnek: \u0130\u00e7 \u0130\u00e7e Div'lerde Hizalama<\/h3>\n
\n\n \n
Harika Bir \u00dcr\u00fcn Ba\u015fl\u0131\u011f\u0131 Uzun Yaz\u0131 \u00d6rne\u011fi<\/h3>\n