Grid & Layout

Grid System

The NETWRIX grid system is a flexible, responsive layout system based on a 12-column grid that adapts seamlessly across different screen sizes. It provides the structural foundation for all page layouts.

Location: src/scss/framework/foundation/grid/

---

Grid Configuration

The grid system is built on three main components:

1. Container - Controls the maximum width and centering of content
2. Row - Creates a horizontal wrapper for columns
3. Columns - Defines the width and responsive behavior of content blocks

Core Variables:

src/scss/framework/_var/_vars.scss

$columns: 12;
$gutter-width: 32px;
$half-gutter-width: $gutter-width * 0.5; // 16px
$gutter-compensation: -1 * $half-gutter-width; // -16px

---

Understanding the Basic Structure

Here’s the fundamental pattern you’ll use throughout NETWRIX:

<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7">
    <div class="f--container">
        <div class="f--row">
            <div class="f--col-12">
                <!-- Your content goes here -->
            </div>
        </div>
    </div>
</section>

Breaking it down:

1. <section> - The outer wrapper (optional, depends on semantic needs)
2. .f--container - Centers content and sets max-width
3. .f--row - Creates the flex container for columns
4. .f--col-12 - The column (full width in this case)

---

Container

The container is responsible for centering your content and setting maximum widths.

Classes:

• .f--container - Standard container with max-width
• .f--container--fluid - Fluid container that spans wider

Standard Container

Location: src/scss/framework/foundation/grid/_container.scss

Configuration:

$g-container-max-width: 1900px;           // Maximum width on large screens
$g-container-width: calc(100% - (($measure*6) * 2)); // Dynamic padding
$g-container-width-mobile: 95%;           // Mobile width

HTML Example:

<div class="f--container">
  <div class="f--row">
    <div class="f--col-12">
      <p>This content is inside a standard container</p>
    </div>
  </div>
</div>

What it does:

• Centers content horizontally
• Sets a maximum width of 1900px
• Adds responsive padding on sides
• Ensures content doesn’t touch screen edges on mobile

Fluid Container

The fluid container allows content to span wider than the standard container.

HTML Example:

<div class="f--container f--container--fluid">
  <div class="f--row">
    <div class="f--col-12">
      <p>This content spans the full viewport width up to 2000px</p>
    </div>
  </div>
</div>

Configuration:

$g-container-fluid-max-width: 2000px;

When to use:

• Full-width hero sections
• Wide feature sections
• Background images that need more space
• Special layouts requiring extra width

---

Row

The row creates a flex container that holds columns. It handles column wrapping and spacing.

Location: src/scss/framework/foundation/grid/_row.scss

HTML Example:

<div class="f--container">
  <div class="f--row">
    <!-- Columns go here -->
  </div>
</div>

What it does:

• Creates a flex container (display: flex)
• Enables column wrapping (flex-wrap: wrap)
• Manages gutter spacing between columns
• Compensates for column padding with negative margins

Important: Always wrap your columns inside a .f--row

---

Columns

Columns define the width of your content blocks and their responsive behavior. The system uses a 12-column grid.

Location: src/scss/framework/foundation/grid/_columns.scss

Available Column Classes

Standard columns:

.f--col-2   →  2/12 columns  (16.666%)
.f--col-3   →  3/12 columns  (25%)
.f--col-4   →  4/12 columns  (33.333%)
.f--col-5   →  5/12 columns  (41.666%)
.f--col-6   →  6/12 columns  (50%)
.f--col-7   →  7/12 columns  (58.333%)
.f--col-8   →  8/12 columns  (66.666%)
.f--col-9   →  9/12 columns  (75%)
.f--col-10  → 10/12 columns  (83.333%)
.f--col-12  → 12/12 columns  (100%)

Basic Column Examples

HTML Examples:

<!-- Full width -->
<div class="f--row">
  <div class="f--col-12">
    <p>Full width content (100%)</p>
  </div>
</div>

<!-- Half width (2 columns) -->
<div class="f--row">
  <div class="f--col-6">
    <p>Left column (50%)</p>
  </div>
  <div class="f--col-6">
    <p>Right column (50%)</p>
  </div>
</div>

<!-- Three columns -->
<div class="f--row">
  <div class="f--col-4">
    <p>Column 1 (33.33%)</p>
  </div>
  <div class="f--col-4">
    <p>Column 2 (33.33%)</p>
  </div>
  <div class="f--col-4">
    <p>Column 3 (33.33%)</p>
  </div>
</div>

<!-- Asymmetric layout -->
<div class="f--row">
  <div class="f--col-8">
    <p>Main content (66.66%)</p>
  </div>
  <div class="f--col-4">
    <p>Sidebar (33.33%)</p>
  </div>
</div>

---

Breakpoints

The grid system includes responsive breakpoints that allow columns to change width at different screen sizes.

Available Breakpoints:

$all: 0;           // All screen sizes
$desktop: 1700px;  // Large desktops
$laptop: 1570px;   // Laptops
$tabletl: 1300px;  // Large tablets
$tabletm: 1024px;  // Medium tablets
$tablets: 810px;   // Small tablets
$mobile: 580px;    // Mobile devices

Breakpoints Reference Table:

Breakpoint	Width	Device Type	Column Classes
all	0px	All screens	.f--col-{n}
desktop	1700px	Large desktop	.f--col-desktop-{n}
laptop	1570px	Laptop	.f--col-laptop-{n}
tabletl	1300px	Large tablet	.f--col-tabletl-{n}
tabletm	1024px	Medium tablet	.f--col-tabletm-{n}
tablets	810px	Small tablet	.f--col-tablets-{n}
mobile	580px	Mobile	.f--col-mobile-{n}

Important

Breakpoints use max-width media queries, meaning the styles apply at that width and below.

---

Responsive Columns

Responsive columns adapt to different screen sizes by changing their width. This is essential for creating mobile-friendly layouts.

Mobile-First Pattern

HTML Example:

<!-- Desktop: 3 columns, Tablets: 2 columns, Mobile: 1 column -->
<div class="f--row">
  <div class="f--col-4 f--col-tablets-6 f--col-mobile-12">
    <p>Column 1</p>
  </div>
  <div class="f--col-4 f--col-tablets-6 f--col-mobile-12">
    <p>Column 2</p>
  </div>
  <div class="f--col-4 f--col-tablets-12 f--col-mobile-12">
    <p>Column 3</p>
  </div>
</div>

Breakdown:

• Desktop (default): 3 columns at 33.33% each (.f--col-4)
• Tablets (≤810px): 2 columns at 50% + 1 full width (.f--col-tablets-6 and .f--col-tablets-12)
• Mobile (≤580px): All stack to full width (.f--col-mobile-12)

Common Responsive Patterns

Pattern 1: Two-Column to Stacked

<!-- Desktop: 2 columns (50/50), Tablets: Stack -->
<div class="f--row">
  <div class="f--col-6 f--col-tablets-12">
    <h3>Left Content</h3>
    <p>This takes 50% on desktop, 100% on tablets</p>
  </div>
  <div class="f--col-6 f--col-tablets-12">
    <h3>Right Content</h3>
    <p>This takes 50% on desktop, 100% on tablets</p>
  </div>
</div>

Pattern 2: Sidebar Layout

<!-- Desktop: 70/30 layout, Tablets: Stack -->
<div class="f--row">
  <div class="f--col-8 f--col-tabletm-12">
    <h2>Main Content</h2>
    <p>Primary content area (66.66% on desktop)</p>
  </div>
  <div class="f--col-4 f--col-tabletm-12">
    <aside>
      <h3>Sidebar</h3>
      <p>Secondary content (33.33% on desktop)</p>
    </aside>
  </div>
</div>

Pattern 3: Complex Multi-Breakpoint

<!-- Desktop: 4 columns, Tablet Large: 3 columns, Tablet Small: 2 columns, Mobile: 1 column -->
<div class="f--row">
  <div class="f--col-3 f--col-tabletl-4 f--col-tablets-6 f--col-mobile-12">
    <p>Card 1</p>
  </div>
  <div class="f--col-3 f--col-tabletl-4 f--col-tablets-6 f--col-mobile-12">
    <p>Card 2</p>
  </div>
  <div class="f--col-3 f--col-tabletl-4 f--col-tablets-6 f--col-mobile-12">
    <p>Card 3</p>
  </div>
  <div class="f--col-3 f--col-tabletl-12 f--col-tablets-6 f--col-mobile-12">
    <p>Card 4</p>
  </div>
</div>

---

Column Offset

Offsets allow you to push columns to the right by adding empty space to the left.

Available Offsets:

.f--offset-0  → No offset
.f--offset-1  → Offset by 1 column (8.333%)
.f--offset-2  → Offset by 2 columns (16.666%)

Responsive Offsets:

.f--offset-desktop-{n}
.f--offset-tabletl-{n}
.f--offset-tabletm-{n}
.f--offset-tablets-{n}

HTML Examples:

<!-- Center an 8-column element with 2-column offset on each side -->
<div class="f--row">
  <div class="f--col-8 f--offset-2">
    <p>Centered content with offset</p>
  </div>
</div>

<!-- Responsive offset: offset on desktop, no offset on tablets -->
<div class="f--row">
  <div class="f--col-6 f--offset-1 f--col-tablets-12 f--offset-tablets-0">
    <p>Content with responsive offset</p>
  </div>
</div>

<!-- Asymmetric layout with offset -->
<div class="f--row">
  <div class="f--col-5">
    <p>Left content (no offset)</p>
  </div>
  <div class="f--col-5 f--offset-2">
    <p>Right content (pushed right with 2-column gap)</p>
  </div>
</div>

---

Column Ordering

Control the visual order of columns independent of their HTML order.

Available Orders:

.f--order-0  → First
.f--order-1  → Last

Responsive Orders:

.f--order-tabletm-{n}
.f--order-tablets-{n}

HTML Example:

<!-- Reverse column order on mobile -->
<div class="f--row">
  <div class="f--col-6 f--col-tablets-12 f--order-0 f--order-tablets-1">
    <p>This appears first on desktop, second on tablets</p>
  </div>
  <div class="f--col-6 f--col-tablets-12 f--order-1 f--order-tablets-0">
    <p>This appears second on desktop, first on tablets</p>
  </div>
</div>

Use case: Show an image on the right on desktop, but move it above text on mobile for better readability.

---

Gap System

The gap system provides consistent vertical spacing between rows of content within grid layouts.

Location: src/scss/framework/foundation/gap/

Gap Classes

Available gaps:

• .f--gap-a - Small gap
• .f--gap-b - Medium gap
• .f--gap-c - Large gap

Gap Definitions

Location: src/scss/framework/foundation/gap/_make-gap.scss

// Gap A - Small
@mixin make-gap-a {
    row-gap: $measure * 4;  // 32px
    @media all and ($viewport-type: $tablets) {
        row-gap: $measure * 3;  // 24px
    }
}

// Gap B - Medium
@mixin make-gap-b {
    row-gap: $measure * 5;  // 40px
    @media all and ($viewport-type: $tablets) {
        row-gap: $measure * 4;  // 32px
    }
}

// Gap C - Large
@mixin make-gap-c {
    row-gap: $measure * 10; // 80px
    @media all and ($viewport-type: $tablets) {
        row-gap: $measure * 8;  // 64px
    }
}

Gap Usage

Gaps are applied to .f--row elements to create consistent vertical spacing between wrapped columns.

HTML Examples:

<!-- Small gap between rows -->
<div class="f--row f--gap-a">
  <div class="f--col-6 f--col-tablets-12">Item 1</div>
  <div class="f--col-6 f--col-tablets-12">Item 2</div>
  <div class="f--col-6 f--col-tablets-12">Item 3</div>
  <div class="f--col-6 f--col-tablets-12">Item 4</div>
</div>

<!-- Medium gap for card grids -->
<div class="f--row f--gap-b">
  <div class="f--col-4 f--col-tablets-12">Card 1</div>
  <div class="f--col-4 f--col-tablets-12">Card 2</div>
  <div class="f--col-4 f--col-tablets-12">Card 3</div>
</div>

<!-- Large gap for section spacing -->
<div class="f--row f--gap-c">
  <div class="f--col-12">Section 1</div>
  <div class="f--col-12">Section 2</div>
</div>

When to use:

• Use .f--gap-a for tightly packed content (lists, small cards)
• Use .f--gap-b for standard card grids and feature sections
• Use .f--gap-c for major sections that need clear separation

---

Complete Grid Examples

Example 1: Hero Section with Grid

<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-7 f--col-tablets-12">
        <h1 class="f--font-a">Secure Your Enterprise</h1>
        <p class="f--font-e">
          Industry-leading security solutions for modern businesses.
        </p>
        <button class="btn">Get Started</button>
      </div>
      <div class="f--col-5 f--col-tablets-12">
        <img src="/images/hero.webp" alt="Hero Image" />
      </div>
    </div>
  </div>
</section>

Example 2: Feature Cards

<section class="u--pt-10 u--pb-10">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-12 u--mb-7">
        <h2 class="f--font-b">Our Features</h2>
      </div>
    </div>
    <div class="f--row f--gap-b">
      <div class="f--col-4 f--col-tabletm-6 f--col-tablets-12">
        <div class="card">
          <h3 class="f--font-c">Real-Time Monitoring</h3>
          <p class="f--font-f">Monitor your infrastructure 24/7</p>
        </div>
      </div>
      <div class="f--col-4 f--col-tabletm-6 f--col-tablets-12">
        <div class="card">
          <h3 class="f--font-c">Advanced Analytics</h3>
          <p class="f--font-f">Deep insights into security events</p>
        </div>
      </div>
      <div class="f--col-4 f--col-tabletm-12 f--col-tablets-12">
        <div class="card">
          <h3 class="f--font-c">Automated Response</h3>
          <p class="f--font-f">Instant threat mitigation</p>
        </div>
      </div>
    </div>
  </div>
</section>

Example 3: Centered Content with Offset

<section class="u--pt-10 u--pb-10">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-8 f--offset-2 f--col-tablets-12 f--offset-tablets-0">
        <h2 class="f--font-b">About Our Company</h2>
        <p class="f--font-f">
          Centered content block that spans 66.66% on desktop with equal
          spacing on both sides, and full width on tablets.
        </p>
      </div>
    </div>
  </div>
</section>

---

Grid System Best Practices

Do’s ✅

• ✅ Always use the container → row → column hierarchy
• ✅ Use responsive column classes for mobile optimization
• ✅ Reference Figma designs to determine column counts
• ✅ Combine with spacing utilities for complete layouts
• ✅ Test layouts across all breakpoints

Don’ts ❌

• ❌ Don’t nest containers (only one per section)
• ❌ Don’t skip the row wrapper
• ❌ Don’t use arbitrary widths instead of grid columns
• ❌ Don’t forget mobile breakpoints
• ❌ Don’t mix grid system with custom flex layouts unnecessarily

---

Common Mistakes

Mistake 1: Forgetting the Row

<!-- ❌ Wrong: Columns without row -->
<div class="f--container">
  <div class="f--col-6">Content</div>
</div>

<!-- ✅ Correct: Always wrap columns in a row -->
<div class="f--container">
  <div class="f--row">
    <div class="f--col-6">Content</div>
  </div>
</div>

Mistake 2: Not Planning for Mobile

<!-- ❌ Wrong: Only desktop columns -->
<div class="f--col-3">Card</div>

<!-- ✅ Correct: Responsive columns -->
<div class="f--col-3 f--col-tablets-6 f--col-mobile-12">Card</div>

---

Quick Reference

Complete Layout Template

<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7">
  <div class="f--container">
    <div class="f--row f--gap-b">
      <div class="f--col-12 u--mb-5">
        <h2 class="f--font-b">Section Title</h2>
      </div>
      <div class="f--col-6 f--col-tablets-12">
        <p class="f--font-f">Content block 1</p>
      </div>
      <div class="f--col-6 f--col-tablets-12">
        <p class="f--font-f">Content block 2</p>
      </div>
    </div>
  </div>
</section>

This template includes:

• Responsive section padding
• Container for width control
• Row with gap for vertical spacing
• Responsive columns that stack on mobile
• Typography and spacing utilities

---

Next Section

Continue to Variables & Utilities to learn about the variable system, Global Components configuration, and creating custom utilities.

---

Related Resources

• Chapter 2 Overview - Back to foundations introduction
• Spacing System - Previous section
• Variables & Utilities - Next section
• Figma: NETWRIX UI Design - Foundations
• Code: src/scss/framework/foundation/grid/ - Grid system
• Code: src/scss/framework/foundation/gap/ - Gap system