CSS Grid Sistemi Yapımı

CSS Grid SistemiYapacağımız css grid sistemi responsive yani mobil cihazlara uyumlu şekilde yapacağız. Responsive grid sistemlerini az çok bilenler bu konudaki en iyilerden birinin Bootstrap olduğunu bilir. Bende Bootstrap’ın kullandığı class yapısını örnek olarak kullanacağım. (Bootstrap kullanmadığım bütün projeler de bu yazıdaki yapıyı kullanırım.)

İlk olarak başlamadan önce Less içinde değişken kullanımı konusuna yabancı iseniz burayı okumanızı tavsiye ederim.

İkinci olarak Less içinde döngüler (Loops) konusuna yabancı iseniz bir önceki yazım Less döngü kullanımı okumanızı tavsiye ederim.

Bu yazıyı yazdıktan sonra çektiğim video anlamanıza yardımcı olacaktır.

Less Kullanarak CSS Grid Sistemi Yapımı

Yapacağımız grid sistemi için ilk olarak grid sayımızı bir değişkene atayalım. Ben 12 li grid sistemi hazırlamak istiyorum.

Sonrasında responsive yani mobil uyumlu olacağı için 4 tane kırılma noktası belirliyorum. Bu değerler ne işimize yarayacak diyebilirsiniz. Kısaca şöyle açıklayayım, web sitenize ziyaretçi geldiğinde kullandığı cihazın ekran boyutuna göre belirlediğimiz kırılma noktalarından hangi aralığa uyarsa o aralıkta olan css kodları çalışacak ve böylece siteniz tam mobil uyumlu çalışacak.

Şimdide gelelim gridlerimizi oluşturacak Less Döngüsünü yazmaya

Yukarıdaki less kodunu açıklamak gerekirse;

  1. Satır
    • “.grid” => döngümüz adı.
    • “@breakpoint” => değişkeni vereceğimiz class adını alıcak.
    • “@columns” => ise grid sayımız.
    • “@index” => bu değeri grid değeri kadar saydıracağız.
  2. Satır
    • “.col” => burada css secicileri başlar .col seçicinin genel adı olacak ve bütün sütunlarda yer alacak
    • “@{breakpoint}” => bu değeri döngüyü çalıştırırken biz belirleyeceğiz örnek xs, lg, md vb.
    • “@{index}” => index değeri sütun değerimiz otomatik artacak.
  3. Satır
    • Bu satırda gridlerimize genişlik değeri vereceğiz bunu otomatik belirlemek için basit bir matematik denklemine ihtiyacımız var. “@index * 100% / @columns” bu denklem index sayarken sıradaki sayıyı 100 ile çarpıp grid sayısına böl örnek vermek gerekirse 6 sütün için şu işlemi yapacak 6×100/12=50 grid sayımız 12 li 6’ıncı grid sayfamızı ortadan ikiye ayırır yani width: 50%
  4. Satır
    • Sütünları sola yasla
  5. Satır
    • Bu satırda döngümüz her çalıştığında @index değerimizin 1 artmasını istiyoruz.

CSS Grid Sistemi less ile hazırlamak bu kadar basit. Şimdi artık gridlerimizi oluşturmaya geldi sıra bu işlem css bilenler için son derece basittir.

İşte less ile css grid sistemi yapmak bu kadar basit yakında zaman bulabilirsem bu makale için videolu anlatım da çekeceğim.

Son olarak kodların çalışır hali için Less2css.org

Kaynak dosyayı indirmek isterseniz Css Grid Sistemi.

“CSS Grid Sistemi Yapımı” için 3 yorum

  1. Merhaba ;

    Bootstrap da content kısmına 820px sidebar için 340px vermek istiyorum ama bir türlü olmuyor responsive olayı bozuluyor.
    Normalde contenti col-md-9 veya col-md-8 olarak verip sidebarida col-md-3 — col-md-4 verince sıkıntı çıkmıyor ama sidebar bu sefer col-md-3 (280px) col-md-4 (376px)verdiğim için reklam yerleşimi yapılamıyor, elle değer verincede responsive de bozulma oluyor bu sefer de bunun mantığı nedir ?
    Umarım anlatabilmişimdir…

    Beni yapmak istediğim aşağıda ki gibidir

    içerik (width:820px)
    içerik (width:340px)

    ve bunların arasına 10px margin vermek.

    1. Sorunuza Facebook daki grup sayfasında ben dahil birçok arkadaş öneri getirdi sanırım. Buna rağmen hala çözüm bulmadıysanız http://codepen.io/ sitesine örnek kod eklerseniz üzerinde çözüm arayabiliriz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir