Torq/docs/grid.md

Grid Documentation

Features

• 12-column layout system
• Responsive breakpoints: sm (576px), md (768px), lg (992px), xl (1200px)
• Fluid and fixed-width containers
• Offsets for column positioning
• No-gutters option to remove spacing
• Based on Flexbox for modern layout capabilities

Basic Usage

Container

Wrap your content in a container:

<div class="container">
  <!-- Content here -->
</div>

For full-width container:

<div class="container-fluid">
  <!-- Content here -->
</div>

Rows and Columns

Structure your layout with rows and columns:

<div class="row">
  <div class="col">Equal width</div>
  <div class="col">Equal width</div>
  <div class="col">Equal width</div>
</div>

Specific Column Sizes

Specify column widths using the 12-column system:

<div class="row">
  <div class="col-4">4 columns</div>
  <div class="col-8">8 columns</div>
</div>

Responsive Columns

Columns change width at different breakpoints:

<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
    <!-- Full width on mobile, half on tablet, quarter on desktop -->
  </div>
</div>

Offset Columns

Push columns to the right:

<div class="row">
  <div class="col-6 offset-3">Centered column</div>
</div>

No Gutters

Remove spacing between columns:

<div class="row no-gutters">
  <div class="col-6">No spacing</div>
  <div class="col-6">No spacing</div>
</div>

Customization

Adjust the gutter size by modifying the CSS variable:

:root {
  --grid-gutter: 30px; /* Change from default 24px */
}

Available Classes

Container Classes

• .container - Responsive fixed-width container
• .container-fluid - Full-width container

Row Class

• .row - Flex container for columns

Column Classes

• .col - Equal width column
• .col-auto - Auto-sized column based on content
• .col-1 through .col-12 - Specific width columns
• .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* - Responsive width columns

Offset Classes

• .offset-1 through .offset-11 - Push columns right
• .offset-sm-*, .offset-md-*, .offset-lg-*, .offset-xl-* - Responsive offsets

Utility Classes

• .no-gutters - Remove spacing between columns