CSS Grid Tasarım Modülü, web site tasarımlarında kullanılan Grid sistemini kolaylaştırmak amacıyla oluşturulan bir modüldür. Modern Web Tarayıcıları tarafından desteklenmektedir ve bizi float ve position gibi işlemleri kullanmaktan kurtarır.

Bu yazımda Grid Tasarım Modülüne şu konulardan bahsederek giriş yapacağım

  • Display Özelliği
  • Grid Sütün
  • Grid Satır
  • Grid Boşlukları
  • Grid Çizgileri

Display Özelliği

Bir HTML Elementi, Grid sistemini kullanabilmesi için display özelliğinin grid ve ya inline-grid olması gerekmektedir.

.class-name{

display:grid;

}

.class-name{

display: inline-grid;

}

class-name özelliğinin sahip elementin bütün alt elementleri(child elements) grid özelliğine sahip olacaktır.

Grid Sütun

Yukarıdaki fotoğrafda da görebileceğiniz gibi yukarıdan aşağıya doğru sıralanan elemanlara Grid Sütun adını vermekteyiz

Grid Satır

Yukarıdaki fotoğrafda da gördüğünüz gibi soldan sağa doğru sıralanan elemanlar ise satır olarak adlandırılır.

Grid Boşlukları

Grid boşlukları, fotoğrafda gördüğümüz siyah çizgilerin arasında ki boşluğu temsil eder yani tüm satır/sütunların arasında boşlukları temsil eder.

3 farklı kullanımını vardır

  • grid-column-gap
  • grid-row-gap
  • grid-gap

grid-column-gap

grid-column-gap, sütunlar arasındaki boşluğu ayarlamamızı sağlar.

.class-name{

display: grid;

grid-column-gap: 50px;

}

grid-row-gap

grid-row-gap, satırlar arasındaki boşluğu ayarlamamızı sağlar.

.class-name{

display:grid;

grid-row-gap: 50px;

}

grid-gap

grid-gap, yukarıdaki 2 özellik için 2 farklı satır yerine tek bir satırda ortak bir boyut ve ya farklı farklı boyutlandırmalar için kullanılması için hazırlanmıştır.

.class-name{

display:grid;

grid-gap: 50px;

}

Hem satırların hem sütunların arasındaki boşluğu 50px yapar.

.class-name{

display:grid;

grid-gap: 50px 100px;

Sütunlar arasında 50px boşluk, satırlar arasında 100px boşluk olmasını sağlar.

Grid Çizgileri

Sütunlar üzerindeki çizgilere Sütun Çizgileri(Column Lines)

Satır üzerindeki çizgilere Satır Çizgileri(Row Lines)

Grid çizgilerini bir alt elemanın ne kadar boyutu olması gerektiğini ayarlarken kullanıyoruz.

.item1{

grid-column-start:1;

grid-column-end:3;

}

item1 elementini 1. sütundan 3. sütuna kadar kaplanıcak alanı kaplamasını sağlar.

.item1{

grid-row-start:1;

grid-row-end:3;

}

item1 elementinin 1. satırdan 3. satıra kadar kaplanıcak alanı kaplamasını sağlar.

Grid Çizgilerini kullanarak bir elementin sayfada ne kadar yer kaplayacağını belirleyebileceğiz.

Bu yazımda Grid Tasarım Modülüne giriş yapmış olduk ileriki yazılarımda bu konu hakkında ilerlemeye devam edeceğim. Eğer bu yazımı beğendiyseniz ve diğer yazılarımı da incelemek istiyorsanız tıklayınız.