{"id":34636,"date":"2025-11-20T02:40:34","date_gmt":"2025-11-19T23:40:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34636"},"modified":"2025-11-20T02:40:34","modified_gmt":"2025-11-19T23:40:34","slug":"css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/","title":{"rendered":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz"},"content":{"rendered":"

<\/p>\n

CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz<\/h2>\n

CSS Grid Layout, modern web tasar\u0131m\u0131nda karma\u015f\u0131k ve duyarl\u0131 d\u00fczenler olu\u015fturmak i\u00e7in en g\u00fc\u00e7l\u00fc ara\u00e7lardan biridir. Grid’in sundu\u011fu en b\u00fcy\u00fck avantajlardan biri, hem t\u00fcm grid i\u00e7eri\u011fini hem de tek tek grid \u00f6\u011felerini kolayca hizalama yetene\u011fidir. Bu makalede, CSS Grid’in hizalama \u00f6zelliklerini derinlemesine inceleyecek, justify-content<\/code>, align-content<\/code>, justify-items<\/code>, align-items<\/code>, justify-self<\/code> ve align-self<\/code> gibi temel \u00f6zelliklerin yan\u0131 s\u0131ra k\u0131sayol \u00f6zelliklerini de detayl\u0131 \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

Giri\u015f: Web Tasar\u0131m\u0131nda Hizalaman\u0131n \u00d6nemi ve CSS Grid’in G\u00fcc\u00fc<\/h3>\n

Web tasar\u0131m\u0131nda hizalama, bir sayfan\u0131n okunabilirli\u011fini, esteti\u011fini ve kullan\u0131labilirli\u011fini do\u011frudan etkileyen kritik bir unsurdur. \u00d6\u011felerin d\u00fczg\u00fcn bir \u015fekilde yerle\u015ftirilmesi, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi daha kolay taramas\u0131na, \u00f6nemli bilgilere odaklanmas\u0131na ve genel olarak daha keyifli bir deneyim ya\u015famas\u0131na olanak tan\u0131r. Geleneksel CSS d\u00fczenleme y\u00f6ntemleri (float, position, inline-block vb.) ile karma\u015f\u0131k hizalama senaryolar\u0131n\u0131 y\u00f6netmek genellikle zorlu ve k\u0131r\u0131lgan olmu\u015ftur.<\/p>\n

CSS Grid Layout, iki boyutlu (hem sat\u0131r hem de s\u00fctun) d\u00fczenler olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r ve bu alandaki hizalama sorunlar\u0131na k\u00f6kl\u00fc \u00e7\u00f6z\u00fcmler sunar. Grid ile, hem grid kapsay\u0131c\u0131s\u0131n\u0131n i\u00e7indeki genel i\u00e7eri\u011fi (yani grid izlerini) hem de her bir grid \u00f6\u011fesini kendi h\u00fccresi i\u00e7inde veya birden fazla h\u00fccreyi kapsayan alan\u0131nda esnek bir \u015fekilde hizalayabiliriz. Bu makale, bu esnekli\u011fi nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacakt\u0131r.<\/p>\n

Temel Kavramlar: Grid Kapsay\u0131c\u0131 ve Grid \u00d6\u011feleri<\/h3>\n

CSS Grid’in hizalama \u00f6zelliklerini anlamadan \u00f6nce, iki temel kavram\u0131 netle\u015ftirmek \u00f6nemlidir:<\/p>\n

* Grid Kapsay\u0131c\u0131 (Grid Container):<\/strong> display: grid;<\/code> veya display: inline-grid;<\/code> \u00f6zelli\u011fine sahip olan HTML \u00f6\u011fesidir. T\u00fcm grid \u00f6\u011felerini i\u00e7eren ana \u00f6\u011fedir. Hizalama \u00f6zelliklerinin bir\u00e7o\u011fu bu kapsay\u0131c\u0131ya uygulan\u0131r.
\n* Grid \u00d6\u011feleri (Grid Items):<\/strong> Grid kapsay\u0131c\u0131s\u0131n\u0131n do\u011frudan \u00e7ocuklar\u0131 olan HTML \u00f6\u011feleridir. Bu \u00f6\u011feler, grid h\u00fccrelerine yerle\u015fir ve bireysel olarak veya varsay\u0131lan olarak hizalanabilir.<\/p>\n

Hizalama \u00f6zellikleri, bu iki t\u00fcr \u00f6\u011feye farkl\u0131 \u015fekillerde uygulan\u0131r ve farkl\u0131 sonu\u00e7lar verir. Genel olarak, -content<\/code> \u00f6zellikleri grid izlerinin (sat\u0131r ve s\u00fctunlar\u0131n) kapsay\u0131c\u0131 i\u00e7inde nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 kontrol ederken, <\/em>-items<\/code> ve *-self<\/code> \u00f6zellikleri grid \u00f6\u011felerinin kendi h\u00fccreleri i\u00e7inde nas\u0131l hizalanaca\u011f\u0131n\u0131 kontrol eder.<\/p>\n

Kapsay\u0131c\u0131 \u00dczerinde \u0130\u00e7erik Hizalama: justify-content ve align-content<\/h3>\n

Bu \u00f6zellikler, grid izleri (yani olu\u015fturulan sat\u0131rlar ve s\u00fctunlar) kapsay\u0131c\u0131 i\u00e7inde t\u00fcm alan\u0131 kaplamad\u0131\u011f\u0131nda devreye girer. Ba\u015fka bir deyi\u015fle, grid kapsay\u0131c\u0131s\u0131nda, tan\u0131mlanm\u0131\u015f grid izlerinden daha fazla bo\u015f alan varsa, bu \u00f6zellikler bu bo\u015f alan\u0131n nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 ve izlerin nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler.<\/p>\n

justify-content (Yatay Hizalama)<\/h4>\n

justify-content<\/code> \u00f6zelli\u011fi, grid kapsay\u0131c\u0131s\u0131n\u0131n yatay ekseninde (sat\u0131r ekseni) bo\u015f alan\u0131 nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131 ve grid izlerini nas\u0131l hizalayaca\u011f\u0131n\u0131 kontrol eder. Bu, s\u00fctun izlerinin yatayda nas\u0131l konumland\u0131r\u0131laca\u011f\u0131n\u0131 belirler.<\/p>\n

* start<\/code> (Varsay\u0131lan):<\/strong> S\u00fctun izlerini kapsay\u0131c\u0131n\u0131n ba\u015flang\u0131c\u0131na hizalar.<\/p>\n

.grid-container {\n        display: grid;\n        grid-template-columns: 100px 100px 100px;\n        width: 500px; \/ Kapsay\u0131c\u0131 geni\u015fli\u011fi, izlerden daha b\u00fcy\u00fck <\/em>\/\n        justify-content: start;\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> S\u00fctun izlerini kapsay\u0131c\u0131n\u0131n sonuna hizalar.<\/p>\n
.grid-container {\n        justify-content: end;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> S\u00fctun izlerini kapsay\u0131c\u0131n\u0131n ortas\u0131na hizalar.<\/p>\n
.grid-container {\n        justify-content: center;\n    }<\/code><\/pre>\n
*   space-between<\/code>:<\/strong> \u0130lk ve son s\u00fctun izlerini kapsay\u0131c\u0131n\u0131n kenarlar\u0131na hizalar ve aradaki bo\u015flu\u011fu e\u015fit olarak da\u011f\u0131t\u0131r.<\/p>\n
.grid-container {\n        justify-content: space-between;\n    }<\/code><\/pre>\n
*   space-around<\/code>:<\/strong> S\u00fctun izlerinin etraf\u0131ndaki bo\u015flu\u011fu e\u015fit olarak da\u011f\u0131t\u0131r. Kenarlardaki bo\u015fluk, izler aras\u0131ndaki bo\u015flu\u011fun yar\u0131s\u0131 kadard\u0131r.<\/p>\n
.grid-container {\n        justify-content: space-around;\n    }<\/code><\/pre>\n
*   space-evenly<\/code>:<\/strong> T\u00fcm bo\u015flu\u011fu (hem izler aras\u0131nda hem de kenarlarda) e\u015fit olarak da\u011f\u0131t\u0131r.<\/p>\n
.grid-container {\n        justify-content: space-evenly;\n    }<\/code><\/pre>\n
\u00d6nemli Not:<\/strong> justify-content<\/code> \u00f6zelli\u011fi, yaln\u0131zca grid-template-columns<\/code> taraf\u0131ndan tan\u0131mlanan s\u00fctunlar\u0131n toplam geni\u015fli\u011fi, grid kapsay\u0131c\u0131s\u0131n\u0131n geni\u015fli\u011finden az oldu\u011funda g\u00f6r\u00fcn\u00fcr bir etkiye sahiptir. E\u011fer s\u00fctunlar t\u00fcm geni\u015fli\u011fi kapl\u0131yorsa (\u00f6rn. grid-template-columns: 1fr 1fr;<\/code> gibi), bu \u00f6zelli\u011fin bir etkisi olmaz.<\/p>\n
align-content (Dikey Hizalama)<\/h4>\n
align-content<\/code> \u00f6zelli\u011fi, justify-content<\/code>‘in dikey eksendeki (s\u00fctun ekseni) kar\u015f\u0131l\u0131\u011f\u0131d\u0131r. Grid kapsay\u0131c\u0131s\u0131n\u0131n dikey ekseninde bo\u015f alan\u0131 nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131 ve grid izlerini (sat\u0131rlar\u0131) nas\u0131l hizalayaca\u011f\u0131n\u0131 kontrol eder.<\/p>\n
*   start<\/code> (Varsay\u0131lan):<\/strong> Sat\u0131r izlerini kapsay\u0131c\u0131n\u0131n ba\u015flang\u0131c\u0131na hizalar.<\/p>\n
.grid-container {\n        display: grid;\n        grid-template-rows: 80px 80px;\n        height: 400px; \/ Kapsay\u0131c\u0131 y\u00fcksekli\u011fi, izlerden daha b\u00fcy\u00fck <\/em>\/\n        align-content: start;\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> Sat\u0131r izlerini kapsay\u0131c\u0131n\u0131n sonuna hizalar.<\/p>\n
.grid-container {\n        align-content: end;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> Sat\u0131r izlerini kapsay\u0131c\u0131n\u0131n ortas\u0131na hizalar.<\/p>\n
.grid-container {\n        align-content: center;\n    }<\/code><\/pre>\n
*   space-between<\/code>:<\/strong> \u0130lk ve son sat\u0131r izlerini kapsay\u0131c\u0131n\u0131n kenarlar\u0131na hizalar ve aradaki bo\u015flu\u011fu e\u015fit olarak da\u011f\u0131t\u0131r.<\/p>\n
.grid-container {\n        align-content: space-between;\n    }<\/code><\/pre>\n
*   space-around<\/code>:<\/strong> Sat\u0131r izlerinin etraf\u0131ndaki bo\u015flu\u011fu e\u015fit olarak da\u011f\u0131t\u0131r. Kenarlardaki bo\u015fluk, izler aras\u0131ndaki bo\u015flu\u011fun yar\u0131s\u0131 kadard\u0131r.<\/p>\n
.grid-container {\n        align-content: space-around;\n    }<\/code><\/pre>\n
*   space-evenly<\/code>:<\/strong> T\u00fcm bo\u015flu\u011fu (hem izler aras\u0131nda hem de kenarlarda) e\u015fit olarak da\u011f\u0131t\u0131r.<\/p>\n
.grid-container {\n        align-content: space-evenly;\n    }<\/code><\/pre>\n
\u00d6nemli Not:<\/strong> align-content<\/code> \u00f6zelli\u011fi, yaln\u0131zca grid-template-rows<\/code> taraf\u0131ndan tan\u0131mlanan sat\u0131rlar\u0131n toplam y\u00fcksekli\u011fi, grid kapsay\u0131c\u0131s\u0131n\u0131n y\u00fcksekli\u011finden az oldu\u011funda g\u00f6r\u00fcn\u00fcr bir etkiye sahiptir. E\u011fer sat\u0131rlar t\u00fcm y\u00fcksekli\u011fi kapl\u0131yorsa (\u00f6rn. grid-template-rows: 1fr 1fr;<\/code> gibi), bu \u00f6zelli\u011fin bir etkisi olmaz.<\/p>\n
Kapsay\u0131c\u0131 \u00dczerinde \u00d6\u011feleri Hizalama: justify-items ve align-items<\/h3>\n
Bu \u00f6zellikler, her bir grid \u00f6\u011fesinin kendi yerle\u015fti\u011fi grid h\u00fccresi (veya h\u00fccre alan\u0131) i\u00e7inde nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler. Bu \u00f6zellikler grid kapsay\u0131c\u0131s\u0131na uygulan\u0131r ve t\u00fcm do\u011frudan \u00e7ocuk \u00f6\u011feleri i\u00e7in varsay\u0131lan bir hizalama davran\u0131\u015f\u0131 ayarlar.<\/p>\n
justify-items (Yatay Hizalama)<\/h4>\n
justify-items<\/code> \u00f6zelli\u011fi, her bir grid \u00f6\u011fesinin kendi h\u00fccresi i\u00e7inde yatay eksende (sat\u0131r ekseni) nas\u0131l hizalanaca\u011f\u0131n\u0131 kontrol eder.<\/p>\n
*   start<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ba\u015flang\u0131c\u0131na (soluna) hizalar.<\/p>\n
.grid-container {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        justify-items: start;\n    }\n    .grid-item {\n        width: 80px; \/ \u00d6\u011fenin geni\u015fli\u011fi h\u00fccresinden k\u00fc\u00e7\u00fck olmal\u0131 <\/em>\/\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin sonuna (sa\u011f\u0131na) hizalar.<\/p>\n
.grid-container {\n        justify-items: end;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ortas\u0131na hizalar.<\/p>\n
.grid-container {\n        justify-items: center;\n    }<\/code><\/pre>\n
*   stretch<\/code> (Varsay\u0131lan):<\/strong> \u00d6\u011feyi h\u00fccresinin t\u00fcm yatay alan\u0131n\u0131 kaplayacak \u015fekilde gerer. Bu, \u00f6\u011feye belirli bir width<\/code> de\u011feri verilmedi\u011fi s\u00fcrece varsay\u0131lan davran\u0131\u015ft\u0131r.<\/p>\n
.grid-container {\n        justify-items: stretch;\n    }\n    .grid-item {\n        \/ width belirtilmezse stretch uygulan\u0131r <\/em>\/\n    }<\/code><\/pre>\n
align-items (Dikey Hizalama)<\/h4>\n
align-items<\/code> \u00f6zelli\u011fi, her bir grid \u00f6\u011fesinin kendi h\u00fccresi i\u00e7inde dikey eksende (s\u00fctun ekseni) nas\u0131l hizalanaca\u011f\u0131n\u0131 kontrol eder.<\/p>\n
*   start<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ba\u015flang\u0131c\u0131na (\u00fcst\u00fcne) hizalar.<\/p>\n
.grid-container {\n        display: grid;\n        grid-template-rows: repeat(2, 100px);\n        align-items: start;\n    }\n    .grid-item {\n        height: 60px; \/ \u00d6\u011fenin y\u00fcksekli\u011fi h\u00fccresinden k\u00fc\u00e7\u00fck olmal\u0131 <\/em>\/\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin sonuna (alt\u0131na) hizalar.<\/p>\n
.grid-container {\n        align-items: end;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ortas\u0131na hizalar.<\/p>\n
.grid-container {\n        align-items: center;\n    }<\/code><\/pre>\n
*   stretch<\/code> (Varsay\u0131lan):<\/strong> \u00d6\u011feyi h\u00fccresinin t\u00fcm dikey alan\u0131n\u0131 kaplayacak \u015fekilde gerer. Bu, \u00f6\u011feye belirli bir height<\/code> de\u011feri verilmedi\u011fi s\u00fcrece varsay\u0131lan davran\u0131\u015ft\u0131r.<\/p>\n
.grid-container {\n        align-items: stretch;\n    }\n    .grid-item {\n        \/ height belirtilmezse stretch uygulan\u0131r <\/em>\/\n    }<\/code><\/pre>\n
\u00d6\u011feler \u00dczerinde Bireysel Hizalama: justify-self ve align-self<\/h3>\n
justify-self<\/code> ve align-self<\/code> \u00f6zellikleri, tek tek grid \u00f6\u011felerine uygulan\u0131r ve o \u00f6\u011fenin kendi h\u00fccresi i\u00e7indeki hizalamas\u0131n\u0131 kontrol eder. Bu \u00f6zellikler, grid kapsay\u0131c\u0131s\u0131nda tan\u0131mlanan justify-items<\/code> ve align-items<\/code> varsay\u0131lanlar\u0131n\u0131 ge\u00e7ersiz k\u0131lmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
justify-self (Yatay Hizalama)<\/h4>\n
justify-self<\/code> \u00f6zelli\u011fi, belirli bir grid \u00f6\u011fesinin kendi h\u00fccresi i\u00e7inde yatay eksende nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler.<\/p>\n
*   start<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ba\u015flang\u0131c\u0131na (soluna) hizalar.<\/p>\n
.grid-item-1 {\n        justify-self: start;\n        width: 80px;\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin sonuna (sa\u011f\u0131na) hizalar.<\/p>\n
.grid-item-2 {\n        justify-self: end;\n        width: 80px;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ortas\u0131na hizalar.<\/p>\n
.grid-item-3 {\n        justify-self: center;\n        width: 80px;\n    }<\/code><\/pre>\n
*   stretch<\/code> (Varsay\u0131lan):<\/strong> \u00d6\u011feyi h\u00fccresinin t\u00fcm yatay alan\u0131n\u0131 kaplayacak \u015fekilde gerer.<\/p>\n
.grid-item-4 {\n        justify-self: stretch;\n        \/ width belirtilmezse stretch uygulan\u0131r <\/em>\/\n    }<\/code><\/pre>\n
align-self (Dikey Hizalama)<\/h4>\n
align-self<\/code> \u00f6zelli\u011fi, belirli bir grid \u00f6\u011fesinin kendi h\u00fccresi i\u00e7inde dikey eksende nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler.<\/p>\n
*   start<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ba\u015flang\u0131c\u0131na (\u00fcst\u00fcne) hizalar.<\/p>\n
.grid-item-1 {\n        align-self: start;\n        height: 60px;\n    }<\/code><\/pre>\n
*   end<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin sonuna (alt\u0131na) hizalar.<\/p>\n
.grid-item-2 {\n        align-self: end;\n        height: 60px;\n    }<\/code><\/pre>\n
*   center<\/code>:<\/strong> \u00d6\u011feyi h\u00fccresinin ortas\u0131na hizalar.<\/p>\n
.grid-item-3 {\n        align-self: center;\n        height: 60px;\n    }<\/code><\/pre>\n
*   stretch<\/code> (Varsay\u0131lan):<\/strong> \u00d6\u011feyi h\u00fccresinin t\u00fcm dikey alan\u0131n\u0131 kaplayacak \u015fekilde gerer.<\/p>\n
.grid-item-4 {\n        align-self: stretch;\n        \/ height belirtilmezse stretch uygulan\u0131r <\/em>\/\n    }<\/code><\/pre>\n
Kullan\u0131m Senaryolar\u0131:<\/strong> justify-self<\/code> ve align-self<\/code> genellikle, genel grid d\u00fczeninde belirli bir \u00f6\u011fenin di\u011ferlerinden farkl\u0131 bir hizalamaya sahip olmas\u0131 gerekti\u011finde kullan\u0131l\u0131r. \u00d6rne\u011fin, bir galeri d\u00fczeninde t\u00fcm resimlerin ortalanmas\u0131n\u0131 isterken, bir ba\u015fl\u0131k resminin sol \u00fcst k\u00f6\u015fede durmas\u0131n\u0131 isteyebilirsiniz.<\/p>\n
K\u0131sayol \u00d6zellikleri: place-content, place-items ve place-self<\/h3>\n
CSS Grid, hizalama \u00f6zelliklerini daha k\u0131sa ve okunabilir bir \u015fekilde yazmak i\u00e7in k\u0131sayol \u00f6zellikleri sunar.<\/p>\n
place-content<\/h4>\n
place-content<\/code> \u00f6zelli\u011fi, align-content<\/code> ve justify-content<\/code> \u00f6zelliklerini tek bir deklarasyonda birle\u015ftirir.<\/p>\n
*   Tek De\u011fer:<\/strong> E\u011fer tek bir de\u011fer sa\u011flan\u0131rsa, bu de\u011fer hem align-content<\/code> hem de justify-content<\/code> i\u00e7in kullan\u0131l\u0131r.<\/p>\n
.grid-container {\n        place-content: center; \/ align-content: center; justify-content: center; ile ayn\u0131 <\/em>\/\n    }<\/code><\/pre>\n
*   \u0130ki De\u011fer:<\/strong> \u0130lk de\u011fer align-content<\/code> i\u00e7in, ikinci de\u011fer justify-content<\/code> i\u00e7indir.<\/p>\n
.grid-container {\n        place-content: start end; \/ align-content: start; justify-content: end; ile ayn\u0131 <\/em>\/\n    }<\/code><\/pre>\n
place-items<\/h4>\n
place-items<\/code> \u00f6zelli\u011fi, align-items<\/code> ve justify-items<\/code> \u00f6zelliklerini tek bir deklarasyonda birle\u015ftirir.<\/p>\n
*   Tek De\u011fer:<\/strong> E\u011fer tek bir de\u011fer sa\u011flan\u0131rsa, bu de\u011fer hem align-items<\/code> hem de justify-items<\/code> i\u00e7in kullan\u0131l\u0131r.<\/p>\n
.grid-container {\n        place-items: center; \/ align-items: center; justify-items: center; ile ayn\u0131 <\/em>\/\n    }\n    }<\/code><\/pre>\n
*   \u0130ki De\u011fer:<\/strong> \u0130lk de\u011fer align-items<\/code> i\u00e7in, ikinci de\u011fer justify-items<\/code> i\u00e7indir.<\/p>\n
.grid-container {\n        place-items: start end; \/ align-items: start; justify-items: end; ile ayn\u0131 <\/em>\/\n    }<\/code><\/pre>\n
place-self<\/h4>\n
place-self<\/code> \u00f6zelli\u011fi, align-self<\/code> ve justify-self<\/code> \u00f6zelliklerini tek bir deklarasyonda birle\u015ftirir. Bu \u00f6zellik, tek tek grid \u00f6\u011felerine uygulan\u0131r.<\/p>\n
*   Tek De\u011fer:<\/strong> E\u011fer tek bir de\u011fer sa\u011flan\u0131rsa, bu de\u011fer hem align-self<\/code> hem de justify-self<\/code> i\u00e7in kullan\u0131l\u0131r.<\/p>\n
.grid-item {\n        place-self: center; \/ align-self: center; justify-self: center; ile ayn\u0131 <\/em>\/\n    }<\/code><\/pre>\n
*   \u0130ki De\u011fer:<\/strong> \u0130lk de\u011fer align-self<\/code> i\u00e7in, ikinci de\u011fer justify-self<\/code> i\u00e7indir.<\/p>\n
.grid-item {\n        place-self: start end; \/ align-self: start; justify-self: end; ile ayn\u0131 <\/em>\/\n    }<\/code><\/pre>\n
K\u0131sayol \u00f6zelliklerinin kullan\u0131lmas\u0131, CSS kodunuzu daha kompakt ve okunabilir hale getirebilir, \u00f6zellikle birden fazla hizalama \u00f6zelli\u011fini ayn\u0131 anda ayarlaman\u0131z gerekti\u011finde.<\/p>\n
Grid Alanlar\u0131 ve Hizalama \u0130li\u015fkisi<\/h3>\n
Bir grid \u00f6\u011fesi, grid-column-start<\/code>, grid-column-end<\/code>, grid-row-start<\/code>, grid-row-end<\/code> veya k\u0131sayol \u00f6zellikleriyle birden fazla grid h\u00fccresini kapsayacak \u015fekilde yerle\u015ftirilebilir. Bu durumda, \u00f6\u011fenin hizalamas\u0131, kapsad\u0131\u011f\u0131 t\u00fcm grid alan\u0131n\u0131n i\u00e7inde ger\u00e7ekle\u015fir. \u00d6rne\u011fin, bir \u00f6\u011fe 2×2’lik bir grid alan\u0131n\u0131 kapl\u0131yorsa, justify-self: center;<\/code> veya align-self: center;<\/code> bu 2×2’lik alan\u0131n ortas\u0131na hizalayacakt\u0131r, tek bir h\u00fccrenin de\u011fil.<\/p>\n
Bu, Grid’in esnekli\u011finin bir ba\u015fka g\u00f6stergesidir. B\u00fcy\u00fck bir bile\u015fenin (\u00f6rne\u011fin bir kart\u0131n) grid i\u00e7inde belirli bir alana yay\u0131lmas\u0131n\u0131 sa\u011flayabilir ve ard\u0131ndan bu bile\u015fenin i\u00e7indeki i\u00e7eri\u011fi kendi i\u00e7inde (belki de Flexbox kullanarak) veya bile\u015fenin kendisini kapsad\u0131\u011f\u0131 grid alan\u0131 i\u00e7inde hizalayabilirsiniz.<\/p>\n
Pratik Uygulama ve \u0130pu\u00e7lar\u0131<\/h3>\n
1.  Hangi \u00d6zelli\u011fi Ne Zaman Kullanmal\u0131?<\/strong>
\n    *   justify-content<\/code> \/ align-content<\/code>: Grid izlerinin (sat\u0131r ve s\u00fctunlar\u0131n) grid kapsay\u0131c\u0131s\u0131 i\u00e7inde toplu olarak nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 kontrol etmek istedi\u011finizde. Unutmay\u0131n, bu yaln\u0131zca kapsay\u0131c\u0131da bo\u015f alan varsa i\u015fe yarar.
\n    *   justify-items<\/code> \/ align-items<\/code>: T\u00fcm grid \u00f6\u011felerinin kendi h\u00fccreleri i\u00e7inde varsay\u0131lan olarak nas\u0131l hizalanaca\u011f\u0131n\u0131 belirlemek istedi\u011finizde.
\n    *   justify-self<\/code> \/ align-self<\/code>: Tek bir grid \u00f6\u011fesinin hizalamas\u0131n\u0131, kapsay\u0131c\u0131daki varsay\u0131lan ayarlar\u0131 ge\u00e7ersiz k\u0131larak \u00f6zel olarak ayarlamak istedi\u011finizde.<\/p>\n
2.  Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131n\u0131 Kullan\u0131n:<\/strong> Modern taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131 (\u00f6zellikle Firefox ve Chrome), CSS Grid d\u00fczenlerini g\u00f6rselle\u015ftirmek i\u00e7in m\u00fckemmel \u00f6zelliklere sahiptir. Grid \u00e7izgilerini, alanlar\u0131n\u0131 ve \u00f6\u011felerin hizalamas\u0131n\u0131 kolayca g\u00f6rebilir, b\u00f6ylece hizalama sorunlar\u0131n\u0131 daha h\u0131zl\u0131 tespit edip \u00e7\u00f6zebilirsiniz.<\/p>\n
3.  Grid ve Flexbox’\u0131 Birle\u015ftirin:<\/strong> CSS Grid, iki boyutlu d\u00fczenler i\u00e7in harikad\u0131r, ancak tek boyutlu (sat\u0131r veya s\u00fctun) hizalama ve da\u011f\u0131t\u0131m i\u00e7in Flexbox hala \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr. Bir grid \u00f6\u011fesinin i\u00e7indeki i\u00e7eri\u011fi hizalamak veya da\u011f\u0131tmak i\u00e7in o grid \u00f6\u011fesini bir Flex kapsay\u0131c\u0131s\u0131 yapmak (yani display: flex;<\/code> uygulamak) \u00e7ok yayg\u0131n ve etkili bir y\u00f6ntemdir. Bu “i\u00e7 i\u00e7e ge\u00e7mi\u015f” yakla\u015f\u0131m, size nihai kontrol\u00fc sa\u011flar.<\/p>\n
4.  Duyarl\u0131 Tasar\u0131m:<\/strong> Hizalama \u00f6zellikleri, duyarl\u0131 tasar\u0131mlarda da kritik rol oynar. Medya sorgular\u0131 kullanarak farkl\u0131 ekran boyutlar\u0131nda justify-content<\/code>, align-items<\/code> veya place-self<\/code> de\u011ferlerini de\u011fi\u015ftirerek \u00f6\u011felerin farkl\u0131 \u015fekillerde hizalanmas\u0131n\u0131 sa\u011flayabilirsiniz. \u00d6rne\u011fin, mobil g\u00f6r\u00fcn\u00fcmde \u00f6\u011feleri ortalarken, masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fcnde sola hizalayabilirsiniz.<\/p>\n
5.  Varsay\u0131lan Davran\u0131\u015flar\u0131 Anlay\u0131n:<\/strong> \u00c7o\u011fu hizalama \u00f6zelli\u011fi i\u00e7in varsay\u0131lan de\u011fer stretch<\/code> veya start<\/code>‘t\u0131r. Bu varsay\u0131lanlar\u0131 bilmek, beklenmedik davran\u0131\u015flar\u0131 anlaman\u0131za ve gereksiz kod yazmaktan ka\u00e7\u0131nman\u0131za yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir grid \u00f6\u011fesine belirli bir geni\u015flik veya y\u00fckseklik vermezseniz, varsay\u0131lan olarak stretch<\/code> davran\u0131\u015f\u0131 nedeniyle h\u00fccresini dolduracakt\u0131r.<\/p>\n
Sonu\u00e7<\/h3>\n
CSS Grid Layout’un hizalama \u00f6zellikleri, modern web tasar\u0131m\u0131nda esneklik ve kontrol sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. justify-content<\/code> ve align-content<\/code> ile grid izlerinin genel da\u011f\u0131t\u0131m\u0131n\u0131 y\u00f6netirken, justify-items<\/code> ve align-items<\/code> ile t\u00fcm \u00f6\u011felerin varsay\u0131lan hizalamas\u0131n\u0131 ayarlayabiliriz. justify-self<\/code> ve align-self<\/code> ise belirli \u00f6\u011feler i\u00e7in bu varsay\u0131lanlar\u0131 ge\u00e7ersiz k\u0131larak ince ayar yapmam\u0131z\u0131 sa\u011flar. K\u0131sayol \u00f6zellikleri olan place-content<\/code>, place-items<\/code> ve place-self<\/code> ise kodumuzu daha temiz ve verimli hale getirir.<\/p>\n
Bu \u00f6zelliklerin her birinin ne zaman ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlamak, karma\u015f\u0131k ve duyarl\u0131 web d\u00fczenleri olu\u015fturma becerilerinizi \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirecektir. CSS Grid’in sundu\u011fu bu g\u00fc\u00e7l\u00fc hizalama ara\u00e7lar\u0131n\u0131 ustaca kullanarak, kullan\u0131c\u0131 dostu ve estetik a\u00e7\u0131dan \u00e7ekici aray\u00fczler tasarlayabilirsiniz. Bol pratik yaparak bu \u00f6zelliklere hakim olmak, web geli\u015ftirme yolculu\u011funuzda size b\u00fcy\u00fck avantajlar sa\u011flayacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz\nCSS Grid Layout, modern web tasar\u0131m\u0131nda karma\u015f\u0131k ve duyarl\u0131 d\u00fcze","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-34636","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz - 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\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz\" \/>\n<meta property=\"og:description\" content=\"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz CSS Grid Layout, modern web tasar\u0131m\u0131nda karma\u015f\u0131k ve duyarl\u0131 d\u00fcze\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-19T23:40:34+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=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz\",\"datePublished\":\"2025-11-19T23:40:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\"},\"wordCount\":2112,\"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\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\",\"name\":\"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-19T23:40:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz\"}]},{\"@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":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz - 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\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz","og_description":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz CSS Grid Layout, modern web tasar\u0131m\u0131nda karma\u015f\u0131k ve duyarl\u0131 d\u00fcze","og_url":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-19T23:40:34+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz","datePublished":"2025-11-19T23:40:34+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/"},"wordCount":2112,"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\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/","url":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/","name":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-19T23:40:34+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-grid-ozellikleriyle-icerik-ve-ogeleri-hizalama-detayli-bir-kilavuz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Grid \u00d6zellikleriyle \u0130\u00e7erik ve \u00d6\u011feleri Hizalama: Detayl\u0131 Bir K\u0131lavuz"}]},{"@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\/34636","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=34636"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34636\/revisions"}],"predecessor-version":[{"id":34637,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34636\/revisions\/34637"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}