Skip to main content

Grid System

Grid System​

Row​

Basic Grid Structure
<div class="nvs-row">
  <!-- Columns go here -->
</div>

RRow Features:

  • display: flex
  • flex-wrap: wrap
  • gap: 8px 0 (space between rows)

Columns​

Basic Column Classes​

Basic Column Usage
<div class="nvs-row">
  <div class="nvs-col-4">4/12 width</div>
  <div class="nvs-col-4">4/12 width</div>
  <div class="nvs-col-4">4/12 width</div>
</div>

Responsive Columns​

Responsive Column Example
<div class="nvs-row">
  <div class="nvs-col-12 nvs-col-md-6 nvs-col-lg-4">
    <!-- Mobile: full width -->
    <!-- Tablet: half width -->
    <!-- Desktop: 1/3 width -->
  </div>
</div>
Column Features

By default, each column has padding: 0 4px and box-sizing: border-box.

Kullanılabilir Responsive Sınıflar:

  • nvs-col-{1-12} - Basic columns
  • nvs-col-xs-{1-12} - Extra Small and above
  • nvs-col-sm-{1-12} - Small and above
  • nvs-col-md-{1-12} - Medium and above
  • nvs-col-lg-{1-12} - Large and above
  • nvs-col-xl-{1-12} - Extra Large and above
  • nvs-col-xxl-{1-12} - Extra Extra Large and above