Ana içeriğe geç

Grid Sistemi

Grid Sistemi​

Row (Satır)​

Temel Grid Yapısı
<div class="nvs-row">
  <!-- Kolonlar buraya gelir -->
</div>

Row Özellikleri:

  • display: flex
  • flex-wrap: wrap
  • gap: 8px 0 (satırlar arası boşluk)

Columns (Kolonlar)​

Temel Kolon Sınıfları​

Temel Kolon Kullanımı
<div class="nvs-row">
  <div class="nvs-col-4">4/12 genişlik</div>
  <div class="nvs-col-4">4/12 genişlik</div>
  <div class="nvs-col-4">4/12 genişlik</div>
</div>

Responsive Kolonlar​

Responsive Kolon Örneği
<div class="nvs-row">
  <div class="nvs-col-12 nvs-col-md-6 nvs-col-lg-4">
    <!-- Mobile: Tam genişlik -->
    <!-- Tablet: Yarı genişlik -->
    <!-- Desktop: 1/3 genişlik -->
  </div>
</div>
Kolon Özellikleri

Her kolonda varsayılan olarak padding: 0 4px ve box-sizing: border-box uygulanır.

Kullanılabilir Responsive Sınıflar:

  • nvs-col-{1-12} - Temel kolonlar
  • nvs-col-xs-{1-12} - Extra Small ve üzeri
  • nvs-col-sm-{1-12} - Small ve üzeri
  • nvs-col-md-{1-12} - Medium ve üzeri
  • nvs-col-lg-{1-12} - Large ve üzeri
  • nvs-col-xl-{1-12} - Extra Large ve üzeri
  • nvs-col-xxl-{1-12} - Extra Extra Large ve üzeri