Web tasar\u0131m d\u00fcnyas\u0131nda “Holy Grail D\u00fczeni” (Kutsal K\u00e2se D\u00fczeni), y\u0131llard\u0131r geli\u015ftiricilerin pe\u015finden ko\u015ftu\u011fu, ancak geleneksel CSS y\u00f6ntemleriyle (float’lar veya eski tablo d\u00fczenleri) elde etmesi zorlu olan klasik bir sayfa yap\u0131s\u0131n\u0131 ifade eder. Bu d\u00fczen genellikle bir \u00fcst bilgi (header), bir alt bilgi (footer), ortada ana i\u00e7erik alan\u0131 ve bu ana i\u00e7eri\u011fin her iki yan\u0131nda veya bir yan\u0131nda konumlanm\u0131\u015f iki veya tek bir kenar \u00e7ubu\u011fu (sidebar\/navigation) i\u00e7erir. CSS Grid, bu t\u00fcr karma\u015f\u0131k iki boyutlu d\u00fczenleri olu\u015fturmak i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f modern bir CSS mod\u00fcl\u00fcd\u00fcr ve Holy Grail d\u00fczenini hi\u00e7 olmad\u0131\u011f\u0131 kadar kolay, esnek ve duyarl\u0131 hale getirir.<\/p>\n
Bu rehberde, CSS Grid’in g\u00fc\u00e7l\u00fc yeteneklerini kullanarak Holy Grail d\u00fczenini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, duyarl\u0131l\u0131k (responsive design) eklemeyi ve bu d\u00fczeni kendi projelerinizde verimli bir \u015fekilde kullanman\u0131za yard\u0131mc\u0131 olacak pratik ipu\u00e7lar\u0131n\u0131 \u00f6\u011freneceksiniz. Art\u0131k karma\u015f\u0131k float temizleme i\u015flemleri veya i\u00e7 i\u00e7e Flexbox yap\u0131lar\u0131yla u\u011fra\u015fman\u0131za gerek kalmayacak. CSS Grid, size temiz, okunabilir ve bak\u0131m\u0131 kolay bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
Holy Grail d\u00fczeni, bir web sayfas\u0131n\u0131n en yayg\u0131n ve i\u015flevsel yap\u0131lar\u0131ndan biridir. Ad\u0131n\u0131, elde etmenin zorlu\u011fundan ve bir\u00e7ok web sitesi i\u00e7in ideal bir yap\u0131 olmas\u0131ndan al\u0131r. Temel olarak \u015fu bile\u015fenlerden olu\u015fur:<\/p>\n
Bu d\u00fczenin geleneksel y\u00f6ntemlerle zorlu\u011fu, \u00f6zellikle kenar \u00e7ubuklar\u0131n\u0131n ve ana i\u00e7eri\u011fin y\u00fcksekliklerini e\u015fit tutmak, farkl\u0131 ekran boyutlar\u0131nda d\u00fczeni korumak ve i\u00e7erik ak\u0131\u015f\u0131n\u0131 do\u011fru y\u00f6netmekten kaynaklan\u0131yordu. Float tabanl\u0131 \u00e7\u00f6z\u00fcmler genellikle karma\u015f\u0131k temizleme teknikleri gerektirirken, Flexbox tek boyutlu d\u00fczenler i\u00e7in daha uygun oldu\u011fundan, iki boyutlu Holy Grail gibi d\u00fczenlerde baz\u0131 k\u0131s\u0131tlamalar getirebiliyordu. CSS Grid ise, hem sat\u0131rlar\u0131 hem de s\u00fctunlar\u0131 ayn\u0131 anda y\u00f6netebilme yetene\u011fi sayesinde bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in ideal bir ara\u00e7t\u0131r.<\/p>\n
\u015eimdi CSS Grid’in g\u00fcc\u00fcn\u00fc kullanarak Holy Grail d\u00fczenini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za bakal\u0131m. Bu s\u00fcre\u00e7, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturmaktan, Grid konteynerini tan\u0131mlamaya ve \u00f6\u011feleri yerle\u015ftirmeye kadar uzanacakt\u0131r.<\/p>\n
\u00d6ncelikle, d\u00fczenimizi olu\u015fturacak HTML \u00f6\u011felerine ihtiyac\u0131m\u0131z var. Bir ana konteyner i\u00e7ine, yukar\u0131da bahsetti\u011fimiz t\u00fcm bile\u015fenleri yerle\u015ftirece\u011fiz:<\/p>\n
\n\n\n \n \n CSS Grid Holy Grail D\u00fczeni<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <header class=\"header\">\u00dcst Bilgi<\/header>\n <nav class=\"nav\">Sol Kenar \u00c7ubu\u011fu (Navigasyon)<\/nav>\n <main class=\"main\">Ana \u0130\u00e7erik<\/main>\n <aside class=\"aside\">Sa\u011f Kenar \u00c7ubu\u011fu<\/aside>\n <footer class=\"footer\">Alt Bilgi<\/footer>\n <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<p>Bu yap\u0131da, <code>.container<\/code> ana Grid konteyneri olacak ve di\u011fer t\u00fcm \u00f6\u011feler onun do\u011frudan \u00e7ocuklar\u0131 olarak Grid \u00f6\u011feleri haline gelecektir.<\/p>\n<p> <H3>Grid Konteynerini Tan\u0131mlama<\/H3><\/p>\n<p>\u015eimdi <code>style.css<\/code> dosyam\u0131z\u0131 kullanarak Grid \u00f6zelliklerini tan\u0131mlayal\u0131m. Anahtar \u00f6zellik <code>display: grid;<\/code> ve ard\u0131ndan <code>grid-template-columns<\/code>, <code>grid-template-rows<\/code> ve \u00f6zellikle <code>grid-template-areas<\/code> olacakt\u0131r.<\/p>\n<pre><code class=\"language-css\">.container {\n display: grid;\n \/<em> 3 s\u00fctun tan\u0131mla: 1. s\u00fctun sabit (200px), orta s\u00fctun esnek (1fr), 3. s\u00fctun sabit (200px) <\/em>\/\n grid-template-columns: 200px 1fr 200px;\n \/<em> 3 sat\u0131r tan\u0131mla: header ve footer sabit (100px), orta sat\u0131r esnek (1fr) <\/em>\/\n grid-template-rows: 100px 1fr 100px;\n \/<em> Sayfan\u0131n tamam\u0131n\u0131 kaplamas\u0131 i\u00e7in <\/em>\/\n min-height: 100vh; \n gap: 10px; \/<em> \u00d6\u011feler aras\u0131nda bo\u015fluk b\u0131rak <\/em>\/\n\n \/<em> Grid alanlar\u0131n\u0131 tan\u0131mla - Holy Grail d\u00fczeninin kalbi <\/em>\/\n grid-template-areas:\n \"header header header\"\n \"nav main aside\"\n \"footer footer footer\";\n}\n<\/code><\/pre>\n<p>Yukar\u0131daki CSS kodunda:<\/p>\n<ul>\n<li><code>display: grid;<\/code>: <code>.container<\/code> \u00f6\u011fesini bir Grid konteyneri yapar.<\/li>\n<li><code>grid-template-columns: 200px 1fr 200px;<\/code>: \u00dc\u00e7 s\u00fctun tan\u0131mlar. \u0130lk ve son s\u00fctunlar <code>200px<\/code> geni\u015fli\u011finde sabit, ortadaki s\u00fctun ise <code>1fr<\/code> (fraction) ile mevcut bo\u015flu\u011fun tamam\u0131n\u0131 kaplayacak \u015fekilde esnektir.<\/li>\n<li><code>grid-template-rows: 100px 1fr 100px;<\/code>: \u00dc\u00e7 sat\u0131r tan\u0131mlar. \u00dcst ve alt sat\u0131rlar <code>100px<\/code> y\u00fcksekli\u011finde sabit, ortadaki sat\u0131r ise <code>1fr<\/code> ile mevcut bo\u015flu\u011fun tamam\u0131n\u0131 kaplayacak \u015fekilde esnektir.<\/li>\n<li><code>gap: 10px;<\/code>: Grid \u00f6\u011feleri aras\u0131nda 10 piksellik bir bo\u015fluk b\u0131rak\u0131r.<\/li>\n<li><code>grid-template-areas: ...;<\/code>: Bu \u00f6zellik, Holy Grail d\u00fczenini olu\u015fturman\u0131n en g\u00fc\u00e7l\u00fc ve g\u00f6rsel yoludur. Her bir t\u0131rnak i\u00e7indeki ifade bir sat\u0131r\u0131 temsil eder ve i\u00e7indeki kelimeler (t\u0131rnak i\u00e7inde bo\u015flukla ayr\u0131lm\u0131\u015f) o sat\u0131r\u0131n s\u00fctunlar\u0131n\u0131 temsil eder. Ayn\u0131 kelimenin yan yana veya alt alta tekrarlanmas\u0131, o alan\u0131n birden fazla h\u00fccreyi kapsamas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, <code>\"header header header\"<\/code> demek, header’\u0131n ilk sat\u0131rda \u00fc\u00e7 s\u00fctunu birden kaplamas\u0131 anlam\u0131na gelir.<\/li>\n<\/ul>\n<p> <H3>Grid \u00d6\u011felerini Yerle\u015ftirme<\/H3><\/p>\n<p>\u015eimdi HTML’deki her bir \u00f6\u011feyi, <code>grid-template-areas<\/code> i\u00e7inde tan\u0131mlad\u0131\u011f\u0131m\u0131z alanlara yerle\u015ftirelim:<\/p>\n<pre><code class=\"language-css\">.header {\n grid-area: header;\n background-color: #e0e0e0;\n padding: 20px;\n text-align: center;\n}\n\n.nav {\n grid-area: nav;\n background-color: #f0f0f0;\n padding: 20px;\n}\n\n.main {\n grid-area: main;\n background-color: #ffffff;\n padding: 20px;\n}\n\n.aside {\n grid-area: aside;\n background-color: #f0f0f0;\n padding: 20px;\n}\n\n.footer {\n grid-area: footer;\n background-color: #e0e0e0;\n padding: 20px;\n text-align: center;\n}\n\/<em> G\u00f6rselle\u015ftirmek i\u00e7in basit stil ekleyelim <\/em>\/\n.container > * {\n border: 1px solid #ccc;\n}\n<\/code><\/pre>\n<p>Her bir Grid \u00f6\u011fesi i\u00e7in <code>grid-area<\/code> \u00f6zelli\u011fini kullanarak, o \u00f6\u011fenin <code>grid-template-areas<\/code>‘da tan\u0131mlanan hangi alana yerle\u015fece\u011fini belirtiyoruz. Bu sayede, HTML’deki \u00f6\u011felerin s\u0131ras\u0131ndan ba\u011f\u0131ms\u0131z olarak, CSS ile g\u00f6rsel bir d\u00fczen olu\u015fturmu\u015f oluyoruz. Bu, \u00f6zellikle eri\u015filebilirlik ve SEO a\u00e7\u0131s\u0131ndan HTML yap\u0131s\u0131n\u0131n anlamsal kalmas\u0131na olanak tan\u0131r.<\/p>\n<p> <H3>Duyarl\u0131l\u0131k (Responsiveness) Ekleme<\/H3><\/p>\n<p>Holy Grail d\u00fczeninin g\u00fczelli\u011fi, farkl\u0131 ekran boyutlar\u0131na kolayca adapte olabilmesidir. CSS Grid ile bunu yapmak olduk\u00e7a basittir. Genellikle daha k\u00fc\u00e7\u00fck ekranlarda kenar \u00e7ubuklar\u0131n\u0131n ana i\u00e7eri\u011fin alt\u0131na veya \u00fcst\u00fcne kaymas\u0131n\u0131 veya tamamen kaybolmas\u0131n\u0131 isteriz. Bir <code>@media<\/code> sorgusu kullanarak <code>grid-template-areas<\/code> ve <code>grid-template-columns<\/code> \u00f6zelliklerini yeniden tan\u0131mlayabiliriz:<\/p>\n<pre><code class=\"language-css\">@media (max-width: 768px) {\n .container {\n \/<em> Tek s\u00fctunlu bir d\u00fczen <\/em>\/\n grid-template-columns: 1fr;\n \/<em> Sat\u0131rlar\u0131 yeniden tan\u0131mla <\/em>\/\n grid-template-rows: auto auto 1fr auto auto; \/<em> header, nav, main, aside, footer <\/em>\/\n\n \/<em> Alanlar\u0131 tek s\u00fctunlu d\u00fczene g\u00f6re yeniden d\u00fczenle <\/em>\/\n grid-template-areas:\n \"header\"\n \"nav\"\n \"main\"\n \"aside\"\n \"footer\";\n }\n \/<em> \u0130ste\u011fe ba\u011fl\u0131: K\u00fc\u00e7\u00fck ekranlarda kenar \u00e7ubuklar\u0131n\u0131 gizle <\/em>\/\n \/<em> .nav, .aside { display: none; } <\/em>\/\n}\n\n@media (max-width: 480px) {\n .container {\n \/<em> En k\u00fc\u00e7\u00fck ekranlarda nav'\u0131 gizleyip, aside'\u0131 main'in alt\u0131na alabiliriz <\/em>\/\n grid-template-areas:\n \"header\"\n \"main\"\n \"aside\"\n \"footer\";\n }\n .nav {\n display: none; \/<em> Navigasyonu tamamen gizle <\/em>\/\n }\n}\n<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, ekran geni\u015fli\u011fi <code>768px<\/code> alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde, d\u00fczen tek s\u00fctunlu hale gelir ve t\u00fcm \u00f6\u011feler dikey olarak s\u0131ralan\u0131r. <code>grid-template-areas<\/code> tamamen yeniden tan\u0131mlanarak \u00f6\u011felerin yeni s\u0131ralamas\u0131 belirlenir. Daha da k\u00fc\u00e7\u00fck ekranlar (<code>480px<\/code> alt\u0131) i\u00e7in, sol kenar \u00e7ubu\u011funu (nav) tamamen gizleyerek ana i\u00e7eri\u011fe daha fazla alan a\u00e7abiliriz. Bu esneklik, Grid’i duyarl\u0131 tasar\u0131mlar i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n<p> <H2>Pratik \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/H2><\/p>\n<ul>\n<li><strong>Anlamsal HTML Yap\u0131s\u0131:<\/strong> CSS Grid, \u00f6\u011felerin g\u00f6rsel konumunu HTML yap\u0131s\u0131ndan ay\u0131rman\u0131za olanak tan\u0131r. Bu, ana i\u00e7eri\u011fin (<code><main><\/code>) HTML’de kenar \u00e7ubuklar\u0131ndan \u00f6nce gelmesini sa\u011flayarak eri\u015filebilirlik ve SEO i\u00e7in \u00f6nemlidir.<\/li>\n<li><strong><code>fr<\/code> Birimi Kullan\u0131m\u0131:<\/strong> Esnek s\u00fctun ve sat\u0131rlar olu\u015fturmak i\u00e7in <code>fr<\/code> (fraction) birimini aktif olarak kullan\u0131n. Bu, mevcut bo\u015flu\u011fun oran\u0131na g\u00f6re \u00f6\u011felerin boyutlanmas\u0131n\u0131 sa\u011flar ve duyarl\u0131l\u0131k i\u00e7in idealdir.<\/li>\n<li><strong><code>minmax()<\/code> Fonksiyonu:<\/strong> Bir Grid par\u00e7as\u0131n\u0131n minimum ve maksimum boyutunu belirlemek i\u00e7in <code>minmax()<\/code> fonksiyonunu kullanabilirsiniz. \u00d6rne\u011fin, <code>grid-template-columns: minmax(150px, 1fr) 3fr minmax(150px, 1fr);<\/code> kenar \u00e7ubuklar\u0131n\u0131n belirli bir minimum geni\u015fli\u011fe sahip olmas\u0131n\u0131 garantilerken, ana i\u00e7eri\u011fin daha fazla yer kaplamas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong><code>gap<\/code> \u00d6zelli\u011fi:<\/strong> Grid \u00f6\u011feleri aras\u0131ndaki bo\u015fluklar\u0131 kolayca y\u00f6netmek i\u00e7in <code>gap<\/code> (eski ad\u0131yla <code>grid-gap<\/code>) \u00f6zelli\u011fini kullan\u0131n. Bu, her bir \u00f6\u011feye ayr\u0131 ayr\u0131 margin eklemekten daha temiz ve pratiktir.<\/li>\n<li><strong>Taray\u0131c\u0131 Deste\u011fi ve Fallback:<\/strong> CSS Grid modern taray\u0131c\u0131larda geni\u015f deste\u011fe sahiptir. Ancak, eski taray\u0131c\u0131lar i\u00e7in bir fallback stratejisi d\u00fc\u015f\u00fcnebilirsiniz (\u00f6rne\u011fin, Flexbox veya daha basit bir d\u00fczen). Genellikle bu gerekli de\u011fildir, \u00e7\u00fcnk\u00fc Grid desteklemeyen taray\u0131c\u0131lar d\u00fczeni alt alta y\u0131\u011farak temel bir okunabilirlik sunar.<\/li>\n<li><strong>Geli\u015ftirici Ara\u00e7lar\u0131:<\/strong> Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki CSS Grid g\u00f6rselle\u015ftirme \u00f6zelliklerini aktif olarak kullan\u0131n. Bu, Grid \u00e7izgilerini, alanlar\u0131n\u0131 ve \u00f6\u011felerin yerle\u015fimini anlaman\u0131za b\u00fcy\u00fck \u00f6l\u00e7\u00fcde yard\u0131mc\u0131 olacakt\u0131r.<\/li>\n<\/ul>\n<p> <H2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/H2><\/p>\n<p>CSS Grid, Holy Grail d\u00fczeni gibi karma\u015f\u0131k sayfa d\u00fczenlerini olu\u015fturma \u015feklimizde devrim yaratt\u0131. Geleneksel y\u00f6ntemlerin getirdi\u011fi zorluklar\u0131 ortadan kald\u0131rarak, geli\u015ftiricilere temiz, g\u00fc\u00e7l\u00fc ve duyarl\u0131 tasar\u0131mlar olu\u015fturma imkan\u0131 sunuyor. <code>grid-template-areas<\/code> \u00f6zelli\u011fi sayesinde, d\u00fczeninizi g\u00f6rsel olarak adland\u0131r\u0131lm\u0131\u015f alanlarla tan\u0131mlamak, kodunuzu hem okunabilir hem de y\u00f6netilebilir k\u0131lar. Duyarl\u0131 tasar\u0131m entegrasyonu da medyaya sorgular\u0131 ile Grid \u00f6zelliklerini yeniden tan\u0131mlayarak son derece basittir.<\/p>\n<p>Holy Grail d\u00fczeni, web tasar\u0131m\u0131n\u0131n temel ta\u015flar\u0131ndan biri olmaya devam edecek ve CSS Grid ile bu d\u00fczeni olu\u015fturmak art\u0131k bir “kutsal k\u00e2se” aray\u0131\u015f\u0131 olmaktan \u00e7\u0131k\u0131p, standart bir uygulama haline geldi.<\/p>\n<p> <H3>SSS<\/H3><\/p>\n<dl>\n<dt>Holy Grail d\u00fczeni neden bu kadar pop\u00fcler?<\/dt>\n<dd>Bu d\u00fczen, bir web sayfas\u0131n\u0131n ana i\u00e7eri\u011fi, navigasyonu ve ek bilgileri ayn\u0131 anda kullan\u0131c\u0131ya sunarken, net bir hiyerar\u015fi ve g\u00f6rsel denge sa\u011flamas\u0131 nedeniyle pop\u00fclerdir. Haber siteleri, bloglar ve e-ticaret siteleri gibi bir\u00e7ok farkl\u0131 t\u00fcrde web sitesi i\u00e7in i\u015flevseldir.<\/dd>\n<dt>CSS Grid yerine Flexbox kullanabilir miyim?<\/dt>\n<dd>Flexbox, tek boyutlu d\u00fczenler (ya sat\u0131r ya da s\u00fctun) i\u00e7in m\u00fckemmeldir. Holy Grail gibi iki boyutlu (hem sat\u0131r hem de s\u00fctun) d\u00fczenler i\u00e7in Flexbox kullanmak, genellikle i\u00e7 i\u00e7e ge\u00e7mi\u015f Flexbox konteynerleri ve karma\u015f\u0131k CSS gerektirir. CSS Grid ise bu t\u00fcr iki boyutlu d\u00fczenler i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r ve \u00e7ok daha basit ve sezgisel bir \u00e7\u00f6z\u00fcm sunar.<\/dd>\n<dt>Taray\u0131c\u0131 deste\u011fi ne durumda?<\/dt>\n<dd>CSS Grid, modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu (Chrome, Firefox, Safari, Edge vb.) taraf\u0131ndan geni\u015f \u00e7apta desteklenmektedir. Can I use… gibi kaynaklardan g\u00fcncel taray\u0131c\u0131 deste\u011fini kontrol edebilirsiniz. Genellikle, projelerinizde g\u00fcvenle kullanabilirsiniz.<\/dd>\n<dt>Mobil cihazlar i\u00e7in nas\u0131l optimize ederim?<\/dt>\n<dd><code>@media<\/code> sorgular\u0131 kullanarak farkl\u0131 ekran boyutlar\u0131 i\u00e7in <code>grid-template-columns<\/code>, <code>grid-template-rows<\/code> ve <code>grid-template-areas<\/code> \u00f6zelliklerini yeniden tan\u0131mlayabilirsiniz. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda kenar \u00e7ubuklar\u0131n\u0131 gizleyebilir veya ana i\u00e7eri\u011fin alt\u0131na ta\u015f\u0131yabilirsiniz. Bu rehberde g\u00f6sterildi\u011fi gibi, Grid ile duyarl\u0131l\u0131k eklemek olduk\u00e7a esnektir.<\/dd>\n<dt>Bu d\u00fczenin dezavantajlar\u0131 var m\u0131?<\/dt>\n<dd>CSS Grid’in kendisinin b\u00fcy\u00fck bir dezavantaj\u0131 yoktur. Ancak, \u00e7ok eski taray\u0131c\u0131lar i\u00e7in (Internet Explorer 11 ve \u00f6ncesi) tam Grid deste\u011fi yoktur. Bu durumda, ya bu taray\u0131c\u0131lar\u0131 desteklememeyi se\u00e7meli ya da Grid’i desteklemeyen taray\u0131c\u0131lar i\u00e7in basit bir fallback (yedek) d\u00fczen sa\u011flamal\u0131s\u0131n\u0131z. \u00c7o\u011fu modern web projesi i\u00e7in bu bir sorun te\u015fkil etmez.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni\n Web tasar\u0131m d\u00fcnyas\u0131nda “Holy Grail D\u00fczeni” (Kutsal K\u00e2se D\u00fczeni), y\u0131llard\u0131r geli\u015ftiricilerin","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-35461","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni\" \/>\n<meta property=\"og:description\" content=\"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni Web tasar\u0131m d\u00fcnyas\u0131nda "Holy Grail D\u00fczeni" (Kutsal K\u00e2se D\u00fczeni), y\u0131llard\u0131r geli\u015ftiricilerin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-29T22:41:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni\",\"datePublished\":\"2025-11-29T22:41:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\"},\"wordCount\":1723,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\",\"name\":\"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-29T22:41:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/","og_locale":"tr_TR","og_type":"article","og_title":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni","og_description":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni Web tasar\u0131m d\u00fcnyas\u0131nda \"Holy Grail D\u00fczeni\" (Kutsal K\u00e2se D\u00fczeni), y\u0131llard\u0131r geli\u015ftiricilerin","og_url":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-29T22:41:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni","datePublished":"2025-11-29T22:41:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/"},"wordCount":1723,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/","url":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/","name":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-29T22:41:26+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/giris-css-grid-ile-holy-grail-duzeni\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Giri\u015f: CSS Grid ile Holy Grail D\u00fczeni"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35461"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35461\/revisions"}],"predecessor-version":[{"id":35462,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35461\/revisions\/35462"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}