CSS Ağ Çerçeve Modülü

Header
Menu
Main
Right
Footer

Kişisel Deneyim

Ağ Düzeni

CSS Ağ Düzenleme Modülü (CSS Grid Layout Module), satır ve sütunlara sahip bir ağ tabanlı düzen sistemini sağlar, bu da web tasarımını daha kolay hale getirir ve yükleme ve konumlandırma kullanılmadan.

Tarayıcı Desteği

Tüm modern tarayıcılar ağ özelliklerini destekler.

57.0 16.0 52.0 10 44

Ağ Elemanları

Ağ düzeni, bir ebeveyn element ve bir veya daha fazla alt elementten oluşur.

Örnek

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Kişisel Deneyim

Display Özelliği

HTML elementinin display öznitelik değeri grid veya inline-grid olduğunda, bu ağ konteyneri haline gelir.

Örnek

.grid-container {
  display: grid;
}

Kişisel Deneyim

Örnek

.grid-container {
  display: inline-grid;
}

Kişisel Deneyim

Ağ konteynerinin tüm doğrudan alt öğeleri otomatik olarak ağ öğesi haline gelir.

Ağ Sütunları (Grid Columns)

Ağ öğelerinin dikey hattı, sütun olarak adlandırılır.

Ağ Satırları (Grid Rows)

Ağ öğelerinin yatay hattı, satır olarak adlandırılır.

Ağ Boşlukları (Grid Gaps)

Her sütun/satır arasındaki boşluk, aralık olarak adlandırılır.

Boşluk büyüklüğünü ayarlamak için aşağıdaki özelliklerden birini kullanabilirsiniz:

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

Örnek

grid-column-gap Bu özellik, sütunlar arasındaki boşluğu ayarlar:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Kişisel Deneyim

Örnek

grid-row-gap Bu özellik, satırlar arasındaki boşluğu ayarlar:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Kişisel Deneyim

Örnek

grid-gap Bu özellik, grid-row-gap ve grid-column-gap özelliklerinin kısaltılmış hali olarak kullanılır:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Kişisel Deneyim

Örnek

grid-gap Özellikler, satır arası ve sütun arası boşlukları bir değere ayarlamak için kullanılabilir:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Kişisel Deneyim

Ağ Hatları (Grid Lines)

Sütunlar arasındaki çizgiler sütun hatları (column lines) olarak adlandırılır.

Satırlar arasındaki çizgiler satır hatları (row lines) olarak adlandırılır.

Ağ konteynerinde ağ elemanı yerleştirirken satır numaralarını referans alın:

Örnek

Ağ elemanını sütun hattı 1'e yerleştir ve sütun hattı 3'te sonlandır:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Kişisel Deneyim

Örnek

Ağ elemanını satır hattı 1'e yerleştir ve satır hattı 3'te sonlandır:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Kişisel Deneyim