Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • December 13, 2020
  • Kategori:
  • CSS
  • Paylas:
CSS Grid Mantigi

Herkese yeniden merhabalar. Siteyi yeniden acinca bol bol paylasim yaparak canli tutmak ve yeni paylasimlarda bulunmak icin bir motivasyona sahip oluyor. Hele bir de pandemi nedenli bol vakte sahip olunca yazilabilecek cok konu cikiyor...

..du. Fakat islerimin tekrar normale donmeye baslamasiyla biraz daha yogun calismaya basladim. Bu yuzden bu yaziyi yazmaya baslayip yarim birakmistim. Simdi tamamlamak icin bir firsat buldum.

Yillar once CSS ile tasarim yayginlasmaya basladiginda Grid System (Izgara)'ler meydana cikmaya baslamisti. Onculerden biri de 960 Grid System - http://960.gs

Daha sonra ise bircok tasarimci benzerlerini uretmeye basladi. Su gunlerde en yaygin kullanima sahip sistemi olusturan ve gelisimini surduren Twitter'in gelistirdigi Bootstrap.

Ben de bu blogu yazarken hazir kullanmayi sevmedigim ve vaktim de oldugundan kendim gelistirmeyi uygun gordum. Biraz daha basit olan bu yapinin kodlarini ve detaylarini paylasmaya baslayalim.

Izgara sisteminin ana hatlarini, her siteyi yaparken kullandigim Meyerweb reset dosyasi ile birlestirdim. Ilk olarak reset.css dosyamizin detaylarini paylasalim;

/* Reset -by meyerweb */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.5; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after,q:before, q:after { content: '';content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; }

/* main elements */
.float-left { float:left; } .float-right { float:right; }
.container { margin:0px auto; } .row:after { content: "";clear: both;display: table; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } [class*="col-"] { float: left; } .responsive-hidden { display:block; }

/* responsive elements */
@media only screen and (max-width: 575.98px) { .container {width:100%; } [class*="col-"] { width:100%; } .responsive-hidden { display:none; } }
@media only screen and (min-width: 576px) and (max-width: 767.98px) { .container {width:100%; } [class*="col-"] { width:100%; } .responsive-hidden { display:none; } }
@media only screen and (min-width: 768px) and (max-width: 991.98px) { .container {width:720px; } }
@media only screen and (min-width: 992px) and (max-width: 1199.98px) { .container {width:960px; } }
@media only screen and (min-width: 1200px) { .container {width:1140px; } }

/* links */
a:link, a:visited, a:active { color: #007bff;text-decoration:none; } a:hover { color: #0056b3; }


main element dedigim bolumde izgara sisteminde kullanacagimiz her izgaranin boyutlarini ayarladik. 12 adet izgara oldugundan degerlerini yuzde (%) olarak belirledik ki icine girecegi katmanin boyuna gore sekillensin. Ornegin iki esit izgara istiyorsaniz 12/2=6 diye dusunup col-6 eklemeliyiz. Eger bir tane izgaramiz menu olarak kullanilacaksa col-2 + col-10 dusunulebilir.

Ornek sayfaya buradan ulasabilirsiniz.
Yorumlar