0
# Grid System
1

2
PrimeFlex provides a 12-column responsive grid system built on flexbox. The grid system includes containers, columns, responsive breakpoints, and utilities for creating flexible layouts.
3

4
## Grid Container
5

6
```scss { .api }
7
.grid {
8
  display: flex;
9
  flex-wrap: wrap;
10
  margin-right: -0.5rem;
11
  margin-left: -0.5rem;
12
  margin-top: -0.5rem;
13
}
14

15
.grid-nogutter {
16
  margin: 0;
17
}
18
```
19

20
The `.grid` class creates a flex container with negative margins to account for column gutters. Use `.grid-nogutter` to remove gutters entirely.
21

22
## Basic Grid Columns
23

24
```scss { .api }
25
.col {
26
  flex: 1 1 0%;
27
  flex-basis: 0;
28
  padding: 0.5rem;
29
}
30

31
.col-fixed {
32
  flex: 0 0 auto;
33
  padding: 0.5rem;
34
}
35
```
36

37
## Sized Grid Columns
38

39
```scss { .api }
40
.col-1 { flex: 0 0 auto; width: 8.3333%; padding: 0.5rem; }
41
.col-2 { flex: 0 0 auto; width: 16.6667%; padding: 0.5rem; }
42
.col-3 { flex: 0 0 auto; width: 25%; padding: 0.5rem; }
43
.col-4 { flex: 0 0 auto; width: 33.3333%; padding: 0.5rem; }
44
.col-5 { flex: 0 0 auto; width: 41.6667%; padding: 0.5rem; }
45
.col-6 { flex: 0 0 auto; width: 50%; padding: 0.5rem; }
46
.col-7 { flex: 0 0 auto; width: 58.3333%; padding: 0.5rem; }
47
.col-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.5rem; }
48
.col-9 { flex: 0 0 auto; width: 75%; padding: 0.5rem; }
49
.col-10 { flex: 0 0 auto; width: 83.3333%; padding: 0.5rem; }
50
.col-11 { flex: 0 0 auto; width: 91.6667%; padding: 0.5rem; }
51
.col-12 { flex: 0 0 auto; width: 100%; padding: 0.5rem; }
52
```
53

54
## Column Offsets
55

56
```scss { .api }
57
.col-offset-0 { margin-left: 0; }
58
.col-offset-1 { margin-left: 8.3333%; }
59
.col-offset-2 { margin-left: 16.6667%; }
60
.col-offset-3 { margin-left: 25%; }
61
.col-offset-4 { margin-left: 33.3333%; }
62
.col-offset-5 { margin-left: 41.6667%; }
63
.col-offset-6 { margin-left: 50%; }
64
.col-offset-7 { margin-left: 58.3333%; }
65
.col-offset-8 { margin-left: 66.6667%; }
66
.col-offset-9 { margin-left: 75%; }
67
.col-offset-10 { margin-left: 83.3333%; }
68
.col-offset-11 { margin-left: 91.6667%; }
69
.col-offset-12 { margin-left: 100%; }
70
```
71

72
## Responsive Grid Classes
73

74
All grid classes support responsive breakpoints with the following syntax:
75

76
```scss { .api }
77
// Small screens (≥576px)
78
.sm\\:col { /* equivalent to .col at sm breakpoint */ }
79
.sm\\:col-1 { /* equivalent to .col-1 at sm breakpoint */ }
80
.sm\\:col-2 { /* equivalent to .col-2 at sm breakpoint */ }
81
// ... all column classes with sm: prefix
82

83
// Medium screens (≥768px)
84
.md\\:col { /* equivalent to .col at md breakpoint */ }
85
.md\\:col-1 { /* equivalent to .col-1 at md breakpoint */ }
86
// ... all column classes with md: prefix
87

88
// Large screens (≥992px)
89
.lg\\:col { /* equivalent to .col at lg breakpoint */ }
90
.lg\\:col-1 { /* equivalent to .col-1 at lg breakpoint */ }
91
// ... all column classes with lg: prefix
92

93
// Extra large screens (≥1200px)
94
.xl\\:col { /* equivalent to .col at xl breakpoint */ }
95
.xl\\:col-1 { /* equivalent to .col-1 at xl breakpoint */ }
96
// ... all column classes with xl: prefix
97
```
98

99
## Usage Examples
100

101
### Equal Width Columns
102

103
```html
104
<div class="grid">
105
  <div class="col">
106
    <div class="p-3 bg-primary text-white">Auto width</div>
107
  </div>
108
  <div class="col">
109
    <div class="p-3 surface-section">Auto width</div>
110
  </div>
111
  <div class="col">
112
    <div class="p-3 bg-primary text-white">Auto width</div>
113
  </div>
114
</div>
115
```
116

117
### Fixed Width Columns
118

119
```html
120
<div class="grid">
121
  <div class="col-4">
122
    <div class="p-3 bg-primary text-white">33.33% width</div>
123
  </div>
124
  <div class="col-8">
125
    <div class="p-3 surface-section">66.67% width</div>
126
  </div>
127
</div>
128
```
129

130
### Responsive Layout
131

132
```html
133
<div class="grid">
134
  <div class="col-12 md:col-6 lg:col-4">
135
    <div class="p-3 bg-primary text-white">
136
      Full width on mobile, half on tablet, third on desktop
137
    </div>
138
  </div>
139
  <div class="col-12 md:col-6 lg:col-4">
140
    <div class="p-3 surface-section">
141
      Responsive column
142
    </div>
143
  </div>
144
  <div class="col-12 md:col-12 lg:col-4">
145
    <div class="p-3 bg-primary text-white">
146
      Full width on mobile and tablet, third on desktop
147
    </div>
148
  </div>
149
</div>
150
```
151

152
### Column Offsets
153

154
```html
155
<div class="grid">
156
  <div class="col-4 col-offset-4">
157
    <div class="p-3 bg-primary text-white text-center">
158
      Centered column with offset
159
    </div>
160
  </div>
161
</div>
162
```
163

164
### No Gutters
165

166
```html
167
<div class="grid grid-nogutter">
168
  <div class="col-6">
169
    <div class="p-3 bg-primary text-white">No gutter</div>
170
  </div>
171
  <div class="col-6">
172
    <div class="p-3 surface-section">No gutter</div>
173
  </div>
174
</div>
175
```
176

177
## Breakpoint System
178

179
- **Default**: All screen sizes (mobile-first)
180
- **sm**: ≥576px (small tablets)
181
- **md**: ≥768px (tablets)
182
- **lg**: ≥992px (small desktops)
183
- **xl**: ≥1200px (large desktops)
184

185
The responsive system uses a mobile-first approach, meaning utilities apply from the specified breakpoint and up unless overridden by a larger breakpoint.