0
# Layout System
1

2
Responsive grid system and layout components for structuring page content with flexible, mobile-first design principles.
3

4
## Capabilities
5

6
### Grid System
7

8
Flexbox-based responsive grid system with 16-column layout and responsive breakpoints.
9

10
```css { .api }
11
.ui.grid                      /* Grid container */
12
.ui.column                    /* Grid column */
13
.ui.row                       /* Grid row */
14

15
/* Column count classes */
16
.ui[class*="one column"].grid         /* 1-column grid */
17
.ui[class*="two column"].grid         /* 2-column grid */
18
.ui[class*="three column"].grid       /* 3-column grid */
19
.ui[class*="four column"].grid        /* 4-column grid */
20
.ui[class*="five column"].grid        /* 5-column grid */
21
.ui[class*="six column"].grid         /* 6-column grid */
22
.ui[class*="seven column"].grid       /* 7-column grid */
23
.ui[class*="eight column"].grid       /* 8-column grid */
24
.ui[class*="nine column"].grid        /* 9-column grid */
25
.ui[class*="ten column"].grid         /* 10-column grid */
26
.ui[class*="eleven column"].grid      /* 11-column grid */
27
.ui[class*="twelve column"].grid      /* 12-column grid */
28
.ui[class*="thirteen column"].grid    /* 13-column grid */
29
.ui[class*="fourteen column"].grid    /* 14-column grid */
30
.ui[class*="fifteen column"].grid     /* 15-column grid */
31
.ui[class*="sixteen column"].grid     /* 16-column grid */
32

33
/* Individual column widths */
34
.ui.one.wide.column           /* 1/16 width column */
35
.ui.two.wide.column           /* 2/16 width column */
36
.ui.three.wide.column         /* 3/16 width column */
37
.ui.four.wide.column          /* 4/16 width column */
38
.ui.five.wide.column          /* 5/16 width column */
39
.ui.six.wide.column           /* 6/16 width column */
40
.ui.seven.wide.column         /* 7/16 width column */
41
.ui.eight.wide.column         /* 8/16 width column */
42
.ui.nine.wide.column          /* 9/16 width column */
43
.ui.ten.wide.column           /* 10/16 width column */
44
.ui.eleven.wide.column        /* 11/16 width column */
45
.ui.twelve.wide.column        /* 12/16 width column */
46
.ui.thirteen.wide.column      /* 13/16 width column */
47
.ui.fourteen.wide.column      /* 14/16 width column */
48
.ui.fifteen.wide.column       /* 15/16 width column */
49
.ui.sixteen.wide.column       /* 16/16 width column */
50
```
51

52
**Usage Examples:**
53

54
```html
55
<!-- Basic grid layout -->
56
<div class="ui grid">
57
  <div class="four wide column">Sidebar</div>
58
  <div class="twelve wide column">Main content</div>
59
</div>
60

61
<!-- Equal width columns -->
62
<div class="ui three column grid">
63
  <div class="column">Column 1</div>
64
  <div class="column">Column 2</div>
65
  <div class="column">Column 3</div>
66
</div>
67

68
<!-- Explicit rows -->
69
<div class="ui grid">
70
  <div class="row">
71
    <div class="eight wide column">First row, left</div>
72
    <div class="eight wide column">First row, right</div>
73
  </div>
74
  <div class="row">
75
    <div class="sixteen wide column">Second row, full width</div>
76
  </div>
77
</div>
78
```
79

80
### Responsive Grid
81

82
Grid system with responsive breakpoint classes for different screen sizes.
83

84
```css { .api }
85
/* Mobile (767px and below) */
86
.ui.mobile.only.grid          /* Show only on mobile */
87
.ui.mobile.hidden.grid        /* Hide on mobile */
88
.ui[class*="mobile only"].column    /* Mobile-only column */
89

90
/* Tablet (768px - 991px) */
91
.ui.tablet.only.grid          /* Show only on tablet */
92
.ui.tablet.hidden.grid        /* Hide on tablet */
93
.ui[class*="tablet only"].column    /* Tablet-only column */
94

95
/* Computer (992px - 1199px) */
96
.ui.computer.only.grid        /* Show only on computer */
97
.ui.computer.hidden.grid      /* Hide on computer */
98
.ui[class*="computer only"].column  /* Computer-only column */
99

100
/* Large screen (1200px - 1919px) */
101
.ui.large.screen.only.grid    /* Show only on large screens */
102
.ui.large.screen.hidden.grid  /* Hide on large screens */
103

104
/* Widescreen (1920px and above) */
105
.ui.widescreen.only.grid      /* Show only on widescreen */
106
.ui.widescreen.hidden.grid    /* Hide on widescreen */
107

108
/* Responsive column widths */
109
.ui[class*="mobile one wide"].column      /* 1-wide on mobile */
110
.ui[class*="tablet two wide"].column      /* 2-wide on tablet */
111
.ui[class*="computer three wide"].column  /* 3-wide on computer */
112
```
113

114
**Usage Examples:**
115

116
```html
117
<!-- Responsive layout -->
118
<div class="ui grid">
119
  <div class="mobile sixteen wide tablet eight wide computer four wide column">
120
    Responsive sidebar
121
  </div>
122
  <div class="mobile sixteen wide tablet eight wide computer twelve wide column">
123
    Responsive main content
124
  </div>
125
</div>
126

127
<!-- Responsive visibility -->
128
<div class="ui grid">
129
  <div class="computer only four wide column">Desktop sidebar</div>
130
  <div class="mobile tablet hidden twelve wide column">Desktop main</div>
131
  <div class="mobile tablet only sixteen wide column">Mobile/Tablet layout</div>
132
</div>
133
```
134

135
### Container
136

137
Responsive containers for centering and constraining content width.
138

139
```css { .api }
140
.ui.container                 /* Standard responsive container */
141
.ui.text.container            /* Narrow container optimized for text */
142
.ui.fluid.container           /* Full-width container */
143
```
144

145
**Usage Examples:**
146

147
```html
148
<!-- Standard container -->
149
<div class="ui container">
150
  <h1 class="ui header">Page Title</h1>
151
  <p>This content is centered and has responsive max-widths.</p>
152
</div>
153

154
<!-- Text container for readable line lengths -->
155
<div class="ui text container">
156
  <h1 class="ui header">Article Title</h1>
157
  <p>This content is optimized for reading with appropriate line lengths.</p>
158
</div>
159

160
<!-- Fluid container -->
161
<div class="ui fluid container">
162
  <p>This content spans the full width of its parent.</p>
163
</div>
164
```
165

166
### Segment
167

168
Content sections for grouping and organizing page content with consistent spacing.
169

170
```css { .api }
171
.ui.segment                   /* Basic content segment */
172
.ui.vertical.segment          /* Vertical segment spacing */
173
.ui.horizontal.segment        /* Horizontal segment spacing */
174
.ui.padded.segment            /* Extra padding */
175

176
/* Segment variations */
177
.ui.raised.segment            /* Raised appearance with shadow */
178
.ui.stacked.segment           /* Stacked appearance */
179
.ui.piled.segment             /* Piled appearance */
180
.ui.circular.segment          /* Circular segment */
181

182
/* Attached segments */
183
.ui.top.attached.segment      /* Attach to top */
184
.ui.attached.segment          /* Attach to top and bottom */
185
.ui.bottom.attached.segment   /* Attach to bottom */
186

187
/* Loading and disabled states */
188
.ui.loading.segment           /* Loading state with dimmer */
189
.ui.disabled.segment          /* Disabled appearance */
190
```
191

192
**Usage Examples:**
193

194
```html
195
<!-- Basic segments -->
196
<div class="ui segment">
197
  <h3 class="ui header">Basic Segment</h3>
198
  <p>This is a basic segment with standard padding and borders.</p>
199
</div>
200

201
<!-- Raised segment -->
202
<div class="ui raised segment">
203
  <h3 class="ui header">Raised Segment</h3>
204
  <p>This segment has a shadow effect to appear raised.</p>
205
</div>
206

207
<!-- Attached segments -->
208
<div class="ui top attached header">
209
  <h3>Attached Header</h3>
210
</div>
211
<div class="ui attached segment">
212
  <p>This segment is attached to the header above.</p>
213
</div>
214
<div class="ui bottom attached segment">
215
  <p>This segment completes the attached group.</p>
216
</div>
217

218
<!-- Loading segment -->
219
<div class="ui loading segment">
220
  <p>This content is being loaded...</p>
221
</div>
222
```
223

224
### Divider
225

226
Content dividers for separating sections and organizing layout flow.
227

228
```css { .api }
229
.ui.divider                   /* Standard horizontal divider */
230
.ui.vertical.divider          /* Vertical divider */
231
.ui.horizontal.divider        /* Explicit horizontal divider */
232

233
/* Divider variations */
234
.ui.inverted.divider          /* Inverted color divider */
235
.ui.fitted.divider            /* No margins divider */
236
.ui.hidden.divider            /* Invisible spacing divider */
237
.ui.section.divider           /* Section divider with more spacing */
238
.ui.clearing.divider          /* Clears floated content */
239
```
240

241
**Usage Examples:**
242

243
```html
244
<!-- Basic divider -->
245
<div class="ui segment">
246
  <p>Content above divider</p>
247
  <div class="ui divider"></div>
248
  <p>Content below divider</p>
249
</div>
250

251
<!-- Section divider with text -->
252
<div class="ui horizontal divider">
253
  OR
254
</div>
255

256
<!-- Vertical divider in grid -->
257
<div class="ui grid">
258
  <div class="seven wide column">Left content</div>
259
  <div class="ui vertical divider">OR</div>
260
  <div class="seven wide column">Right content</div>
261
</div>
262

263
<!-- Hidden divider for spacing -->
264
<p>First paragraph</p>
265
<div class="ui hidden divider"></div>
266
<p>Second paragraph with extra spacing</p>
267
```
268

269
## Grid System Breakpoints
270

271
Responsive breakpoints used throughout the grid system:
272

273
```css { .api }
274
/* Mobile: 767px and below */
275
@media only screen and (max-width: 767px) { }
276

277
/* Tablet: 768px - 991px */
278
@media only screen and (min-width: 768px) and (max-width: 991px) { }
279

280
/* Computer: 992px - 1199px */
281
@media only screen and (min-width: 992px) and (max-width: 1199px) { }
282

283
/* Large Screen: 1200px - 1919px */
284
@media only screen and (min-width: 1200px) and (max-width: 1919px) { }
285

286
/* Widescreen: 1920px and above */
287
@media only screen and (min-width: 1920px) { }
288
```
289

290
These breakpoints are consistently used across all responsive grid classes and visibility utilities.