119 lines
2.2 KiB
Markdown
119 lines
2.2 KiB
Markdown
# 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
|