# 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:

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

For full-width container:

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

### Rows and Columns

Structure your layout with rows and columns:

```html
<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:

```html
<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:

```html
<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:

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

### No Gutters

Remove spacing between columns:

```html
<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:

```css
: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