{ "componentChunkName": "component---src-templates-doc-template-js", "path": "/tr/docs/grid", "result": {"data":{"current":{"fields":{"page":{"path":"/docs/grid","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"tr","title":"Izgara","markdown":"\nGralig flexbox tabanlı çok basit bir ızgara(grid) sistemi kullanır. `.row` kapsayıcısı içinde istediğiniz kadar `.col` kullanabilirsiniz, ancak aşağıdaki sütun boyutlarını kullanmanızı öneririz.\n\n_Aşağıdaki görünümler örnek olarak hazırlanmıştır ve normal kullanımda gözükmeyecektir._\n\n## Sütunlar\n\n
\n
\n
\n col\n
\n
\n
\n
\n col\n
\n
\n col\n
\n
\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n
\n\n```html\n
\n
\n
col
\n
\n
\n
col
\n
col
\n
\n
\n
col
\n
col
\n
col
\n
col
\n
col
\n
col
\n
\n
\n```\n\n## Sütun Boyutları\n\n
\n
\n
\n col-10\n
\n
\n
\n
\n col-16\n
\n
\n
\n
\n col-20\n
\n
\n
\n
\n col-25\n
\n
\n
\n
\n col-30\n
\n
\n
\n
\n col-33\n
\n
\n
\n
\n col-40\n
\n
\n
\n
\n col-50\n
\n
\n
\n
\n col-60\n
\n
\n
\n
\n col-67\n
\n
\n
\n
\n col-70\n
\n
\n
\n
\n col-75\n
\n
\n
\n
\n col-80\n
\n
\n
\n
\n col-84\n
\n
\n
\n
\n col-90\n
\n
\n
\n
\n col-100\n
\n
\n
\n\n```html\n
\n
\n
col-10
\n
\n
\n
col-16
\n
\n
\n
col-20
\n
\n
\n
col-25
\n
\n
\n
col-30
\n
\n
\n
col-33
\n
\n
\n
col-40
\n
\n
\n
col-50
\n
\n
\n
col-60
\n
\n
\n
col-67
\n
\n
\n
col-70
\n
\n
\n
col-75
\n
\n
\n
col-80
\n
\n
\n
col-84
\n
\n
\n
col-90
\n
\n
\n
col-100
\n
\n
\n```\n\n## Kaydırma Boşlukları\n\nSütunları soldan belirli boşluklarda kaydırmak için aşağıdaki gibi `.col-span-*` kullanabilirsiniz.\n\n
\n
\n
\n col-10col-span-90\n
\n
\n
\n
\n col-16col-span-84\n
\n
\n
\n
\n col-20col-span-80\n
\n
\n
\n
\n col-25col-span-75\n
\n
\n
\n
\n col-30col-span-70\n
\n
\n
\n
\n col-33col-span-67\n
\n
\n
\n
\n col-40col-span-60\n
\n
\n
\n
\n col-50col-span-50\n
\n
\n
\n
\n col-60col-span-40\n
\n
\n
\n
\n col-67col-span-33\n
\n
\n
\n
\n col-70col-span-30\n
\n
\n
\n
\n col-75col-span-25\n
\n
\n
\n
\n col-80col-span-20\n
\n
\n
\n
\n col-84col-span-16\n
\n
\n
\n
\n col-90\n col-span-10\n
\n
\n
\n\n```html\n
\n
\n
col-10
\n
\n
\n
col-16
\n
\n
\n
col-20
\n
\n
\n
col-25
\n
\n
\n
col-30
\n
\n
\n
col-33
\n
\n
\n
col-40
\n
\n
\n
col-50
\n
\n
\n
col-60
\n
\n
\n
col-67
\n
\n
\n
col-70
\n
\n
\n
col-75
\n
\n
\n
col-80
\n
\n
\n
col-84
\n
\n
\n
col-90
\n
\n
\n```\n\n## Sütunların Mobilde Kullanımı\n\nSütunlar normal kullanımda mobil kırılımına geldiğinde kapsayıcısının %100 genişliğini alır. `.row-mobile` kullanarak bunu engelleyebilir ve mobilde sütun genişliklerini koruyabilirsiniz.\n\n
\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n
\n\n```html\n\n\n
\n
\n
col
\n
col
\n
col
\n
\n
\n```","mdtype":"MDHTML","section":"grid"},{"lang":"en","title":"Grid","markdown":"\nGralig uses simple flexbox based grid system. You can use `.col` as many as you want inside wrapper `.row` but we recommend that you use the column sizes below.\n\n_This col or span views below are for example to see. They will not show up in normal usage._\n\n## Columns\n\n
\n
\n
\n col\n
\n
\n
\n
\n col\n
\n
\n col\n
\n
\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n
\n\n```html\n
\n
\n
col
\n
\n
\n
col
\n
col
\n
\n
\n
col
\n
col
\n
col
\n
col
\n
col
\n
col
\n
\n
\n```\n\n## Column Sizes\n\n
\n
\n
\n col-10\n
\n
\n
\n
\n col-16\n
\n
\n
\n
\n col-20\n
\n
\n
\n
\n col-25\n
\n
\n
\n
\n col-30\n
\n
\n
\n
\n col-33\n
\n
\n
\n
\n col-40\n
\n
\n
\n
\n col-50\n
\n
\n
\n
\n col-60\n
\n
\n
\n
\n col-67\n
\n
\n
\n
\n col-70\n
\n
\n
\n
\n col-75\n
\n
\n
\n
\n col-80\n
\n
\n
\n
\n col-84\n
\n
\n
\n
\n col-90\n
\n
\n
\n
\n col-100\n
\n
\n
\n\n```html\n
\n
\n
col-10
\n
\n
\n
col-16
\n
\n
\n
col-20
\n
\n
\n
col-25
\n
\n
\n
col-30
\n
\n
\n
col-33
\n
\n
\n
col-40
\n
\n
\n
col-50
\n
\n
\n
col-60
\n
\n
\n
col-67
\n
\n
\n
col-70
\n
\n
\n
col-75
\n
\n
\n
col-80
\n
\n
\n
col-84
\n
\n
\n
col-90
\n
\n
\n
col-100
\n
\n
\n```\n\n## Spans (Offsets)\n\nYou can use `.col-span-*` to shift columns from left to specific spaces as below.\n\n
\n
\n
\n col-10col-span-90\n
\n
\n
\n
\n col-16col-span-84\n
\n
\n
\n
\n col-20col-span-80\n
\n
\n
\n
\n col-25col-span-75\n
\n
\n
\n
\n col-30col-span-70\n
\n
\n
\n
\n col-33col-span-67\n
\n
\n
\n
\n col-40col-span-60\n
\n
\n
\n
\n col-50col-span-50\n
\n
\n
\n
\n col-60col-span-40\n
\n
\n
\n
\n col-67col-span-33\n
\n
\n
\n
\n col-70col-span-30\n
\n
\n
\n
\n col-75col-span-25\n
\n
\n
\n
\n col-80col-span-20\n
\n
\n
\n
\n col-84col-span-16\n
\n
\n
\n
\n col-90\n col-span-10\n
\n
\n
\n\n```html\n
\n
\n
col-10
\n
\n
\n
col-16
\n
\n
\n
col-20
\n
\n
\n
col-25
\n
\n
\n
col-30
\n
\n
\n
col-33
\n
\n
\n
col-40
\n
\n
\n
col-50
\n
\n
\n
col-60
\n
\n
\n
col-67
\n
\n
\n
col-70
\n
\n
\n
col-75
\n
\n
\n
col-80
\n
\n
\n
col-84
\n
\n
\n
col-90
\n
\n
\n```\n\n## Grid on Mobile\n\nWhen the columns come to mobile breakpoint in normal usage, it takes the 100% width of its container. You can prevent this by using `.row-mobile` and you can maintain column widths on mobile.\n\n
\n
\n
\n col\n
\n
\n col\n
\n
\n col\n
\n
\n
\n\n```html\n\n
\n
\n
col
\n
col
\n
col
\n
\n
\n```","mdtype":"MDHTML","section":"grid"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/grid/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/grid","redirect":false,"defaultLanguage":"en"}}}, "staticQueryHashes": ["63159454"]}