[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-hizli-html-ve-css-mini-ornekleri-basit-grid-ve-layout":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},34615,"Hızlı HTML ve CSS Mini Örnekleri: Basit Grid ve Layout","Bu makale, HTML ve CSS kullanarak hızlıca uygulanabilecek basit grid ve layout örnekleri sunar; temel grid tanımları, grid-template-areas ile düzen, auto-fit/minmax kullanarak responsive grid ve uygulama kontrol listeleri içerir.","\u003Ch2>Hızlı Başlangıç: CSS Grid ile Basit Layout'lar\u003C/h2>\n\u003Cp>CSS Grid, iki boyutlu düzenler oluşturmak için tasarlanmış güçlü bir araçtır ve modern tarayıcılar tarafından geniş ölçüde desteklenmektedir. Temel fikir; bir container'ı \u003Cstrong>grid container\u003C/strong> hâline getirip içine yerleştirdiğiniz öğeleri (grid items) satır ve sütun bazında konumlandırmaktır. Bu makalede üç kısa örnek üzerinden ilerleyeceğiz: basit 3 sütunlu grid, header/sidebar/content/footer düzeni (grid-template-areas) ve responsive bir grid örneği.\u003C/p>\n\u003Cp>Detaylı rehber ve referanslar için MDN Web Docs’un Grid kılavuzlarına bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/Guides/Grid_layout\">MDN — CSS Grid Layout Guide\u003C/a> ve sık kullanılan layout örnekleri için \u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts\">MDN — Common grid layouts\u003C/a>. Ayrıca temel örnekler için W3Schools’un ilgili sayfası öğretici olabilir: \u003Ca href=\"https://www.w3schools.com/htmlcss/htmlcss_layout_grid.asp\">W3Schools — Grid Layout\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch3>Örnek 1 — Basit 3 Sütunlu Grid\u003C/h3>\n\u003Cp>Hızlı bir 3 sütunlu düzen kurmak için container'a \u003Cstrong>display: grid;\u003C/strong> verip sütunları \u003Cstrong>grid-template-columns\u003C/strong> ile tanımlamak yeterlidir. Aşağıda HTML ve CSS örneği yer alıyor.\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>HTML\u003C/th>\u003Cth>CSS\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\u003Cp><div class=\"grid\">\u003Cbr>  <div>1</div>\u003Cbr>  <div>2</div>\u003Cbr>  <div>3</div>\u003Cbr>  <div>4</div>\u003Cbr>  <div>5</div>\u003Cbr>  <div>6</div>\u003Cbr></div>\u003C/p>\u003C/td>\n      \u003Ctd>\u003Cp>.grid {\u003Cbr>  display: grid;\u003Cbr>  grid-template-columns: repeat(3, 1fr);\u003Cbr>  gap: 16px;\u003Cbr>}\u003Cbr>.grid > div {\u003Cbr>  background: #f2f2f2;\u003Cbr>  padding: 16px;\u003Cbr>  text-align: center;\u003Cbr>}\u003C/p>\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Cp>Açıklama:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>display: grid;\u003C/strong> ile container grid olur.\u003C/li>\n  \u003Cli>\u003Cstrong>grid-template-columns: repeat(3, 1fr);\u003C/strong> üç eşit sütun oluşturur; \u003Cem>fr\u003C/em> (fraction) birimler alanın paylaştırılması için kullanılır.\u003C/li>\n  \u003Cli>\u003Cstrong>gap\u003C/strong> satır ve sütun aralığını belirler.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>Örnek 2 — Header / Sidebar / Main / Footer Düzeni (grid-template-areas)\u003C/h3>\n\u003Cp>Grid template areas, düzenin görsel bir haritasını yazılı olarak tanımlamanıza izin verir. Kompleks düzenleri daha okunaklı kılar. Aşağıda iki sütunlu bir yapı örneği yer alıyor: sol sidebar, sağ content; üstte header, altta footer.\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>HTML\u003C/th>\u003Cth>CSS\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\u003Cp><div class=\"layout\">\u003Cbr>  <header>Başlık</header>\u003Cbr>  <aside>Sidebar</aside>\u003Cbr>  <main>Ana içerik</main>\u003Cbr>  <footer>Altbilgi</footer>\u003Cbr></div>\u003C/p>\u003C/td>\n      \u003Ctd>\u003Cp>.layout {\u003Cbr>  display: grid;\u003Cbr>  grid-template-areas:\u003Cbr>    \"header header\"\u003Cbr>    \"sidebar main\"\u003Cbr>    \"footer footer\";\u003Cbr>  grid-template-columns: 250px 1fr;\u003Cbr>  gap: 16px;\u003Cbr>}\u003Cbr>header { grid-area: header; }\u003Cbr>aside { grid-area: sidebar; }\u003Cbr>main { grid-area: main; }\u003Cbr>footer { grid-area: footer; }\u003C/p>\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Cp>Notlar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>grid-template-areas\u003C/strong> ile yerleşimi satır bazında adlandırırsınız; her öğeye \u003Cstrong>grid-area\u003C/strong> ile ad atanır.\u003C/li>\n  \u003Cli>Bu yaklaşım, karmaşık maketleri daha sürdürülebilir hâle getirir ve tasarım değişiklikleri kolaylaşır.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>Örnek 3 — Responsive Grid: auto-fit ve minmax\u003C/h3>\n\u003Cp>Responsive (duyarlı) bir grid oluşturmak için \u003Cstrong>repeat(auto-fit, minmax(...))\u003C/strong> yaygın ve güçlü bir desendir. Sütun sayısı ekran genişliğine göre otomatik ayarlanır.\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>HTML\u003C/th>\u003Cth>CSS\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\u003Cp><div class=\"grid-responsive\">\u003Cbr>  <div>Kart 1</div>\u003Cbr>  <div>Kart 2</div>\u003Cbr>  <div>Kart 3</div>\u003Cbr>  <div>Kart 4</div>\u003Cbr>  <div>Kart 5</div>\u003Cbr></div>\u003C/p>\u003C/td>\n      \u003Ctd>\u003Cp>.grid-responsive {\u003Cbr>  display: grid;\u003Cbr>  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\u003Cbr>  gap: 16px;\u003Cbr>}\u003C/p>\n\u003Cp>@media (max-width: 600px) {\u003Cbr>  .grid-responsive { grid-template-columns: 1fr; }\u003Cbr>}\u003C/p>\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Cp>Açıklama:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>auto-fit\u003C/strong> ile mevcut alana sığan kadar sütun oluşturulur; \u003Cstrong>minmax(200px, 1fr)\u003C/strong> ile sütun minimum 200px, maksimum ise kalan alanın payına göre büyür.\u003C/li>\n  \u003Cli>Ek olarak basit bir media query ile (ör. 600px altı) tek sütunlu bir görünüm zorlanabilir; bu, küçük ekranlarda okunabilirliği artırır.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch4>Uygulamada Hızlı İpuçları ve En İyi Uygulamalar\u003C/h4>\n\u003Cul>\n  \u003Cli>Önce maketi (wireframe) düşünün: grid-template-areas, görsel olarak eşleşme sağlar.\u003C/li>\n  \u003Cli>Küçük bileşenleri \u003Cstrong>grid item\u003C/strong> olarak düşünün; gerektiğinde her öğeye kendi grid davranışı atanabilir.\u003C/li>\n  \u003Cli>Gap kullanımı daha okunaklı ve bakımı kolay düzenler sağlar; margin ile aşırı karışıklığa yol açmamak için gap tercih edilebilir.\u003C/li>\n  \u003Cli>\u003Cstrong>fr\u003C/strong> birimini kullanarak esnek sütunlar tanımlayın; sabit genişlik gerektiğinde px veya minmax kombinasyonu tercih edin.\u003C/li>\n  \u003Cli>Responsive davranış için auto-fit/auto-fill + minmax, esnek ve az bakım gerektiren bir yaklaşımdır.\u003C/li>\n\u003C/ul>\n\u003Ch4>Test ve Tarayıcı Desteği\u003C/h4>\n\u003Cp>CSS Grid, modern tarayıcılarda geniş ölçüde desteklenir; detaylı destek ve özellik karşılaştırmaları için MDN’in Grid kılavuzlarına başvurabilirsiniz. Tasarımlarınızı farklı tarayıcılarda ve cihaz boyutlarında test etmek her zaman iyi bir pratiktir; gerekirse daha eski tarayıcılar için basit bir fallback (ör. flexbox veya blok düzen) sağlayabilirsiniz.\u003C/p>\n\u003Chr>\n\u003Ch4>Adım Adım Uygulama Kontrol Listesi\u003C/h4>\n\u003Col>\n  \u003Cli>Wireframe: Sayfanın bölümlerini (header, sidebar, main, footer) belirleyin.\u003C/li>\n  \u003Cli>Grid container oluşturun: container'a \u003Cstrong>display: grid;\u003C/strong> verin.\u003C/li>\n  \u003Cli>Sütunları tanımlayın: \u003Cstrong>grid-template-columns\u003C/strong> veya \u003Cstrong>repeat(auto-fit, minmax(...))\u003C/strong> kullanın.\u003C/li>\n  \u003Cli>Gerektiğinde alanları adlandırın: \u003Cstrong>grid-template-areas\u003C/strong> ile okunabilirlik sağlayın.\u003C/li>\n  \u003Cli>Responsive testler: Farklı ekran genişliklerinde davranışı kontrol edin ve gerekirse media query ekleyin.\u003C/li>\n  \u003Cli>Accessibility & içerik: Grid düzeni içerik akışını (document flow) değiştirebilir; DOM sırasını ve ekran okuyucu deneyimini test edin.\u003C/li>\n\u003C/ol>\n\u003Chr>\n\u003Ch3>Sonuç\u003C/h3>\n\u003Cp>CSS Grid, karmaşık veya basit layout ihtiyaçları için güçlü ve esnek bir yaklaşımdır. Bu mini örnekler, üç temel kullanım senaryosunu gösterir: sabit sütunlu grid, grid-template-areas ile bölümlenmiş layout ve auto-fit/minmax ile responsive grid. Daha fazla detay ve gelişmiş örnekler için MDN rehberleri iyi bir referans kaynağıdır.\u003C/p>\n\u003Cp>Kaynaklar ve daha fazla okuma:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/Guides/Grid_layout\">MDN — CSS Grid Layout Guide\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts\">MDN — Realizing common layouts using grids\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/htmlcss/htmlcss_layout_grid.asp\">W3Schools — HTML & CSS Grid Layout\u003C/a>\u003C/li>\n\u003C/ul>","HTML & CSS Mini Örnekleri — Basit Grid ve Responsive Layout","Kısa ve pratik HTML & CSS mini örnekleri ile temel grid ve layout kavramlarını öğrenin. Basit 3 sütunlu grid, grid-template-areas ve responsive auto-fit örnekli","HTML & CSS Mini Örnekleri, kolay kod örnekleri, web tasarımı için temel snippetler, responsive grid örnekleri, CSS Grid, layout örnekleri","hizli-html-ve-css-mini-ornekleri-basit-grid-ve-layout","2026-05-15T10:57:07.000Z",{"id":16,"title":17,"slug":18},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/aed2aa177fe55ae55cfcfc83ae97e0eb.jpg","/media/blog/aed2aa177fe55ae55cfcfc83ae97e0eb_thumb.jpg","/media/blog/aed2aa177fe55ae55cfcfc83ae97e0eb.webp","/media/blog/aed2aa177fe55ae55cfcfc83ae97e0eb_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,878,0,"5 dk okuma süresi","/blog/html-css-mini-ornekleri/hizli-html-ve-css-mini-ornekleri-basit-grid-ve-layout",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/aed2aa177fe55ae55cfcfc83ae97e0eb.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-ve-css-mini-ornekleri-basit-grid-ve-layout",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-ve-css-mini-ornekleri-basit-grid-ve-layout",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]