You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ui/utilities/grid/docs.mdx
+84-64
Original file line number
Diff line number
Diff line change
@@ -207,7 +207,7 @@ You can visually reorder columns independently from their position in the markup
207
207
208
208
## Column Nesting
209
209
210
-
Nesting columns is simple and can add more flexibility in your designs. In a column, you can add a nested grid by creating another `slds-grid` container and as many `slds-col` elements inside of that container as you need..
210
+
Nesting columns is simple and can add more flexibility in your designs. In a column, you can add a nested grid by creating another `slds-grid` container and as many `slds-col` elements inside of that container as you need.
211
211
212
212
<Exampletitle="Grid Column Nesting">
213
213
<GridclassName="slds-wrap">
@@ -219,20 +219,57 @@ Nesting columns is simple and can add more flexibility in your designs. In a col
219
219
</Grid>
220
220
</Example>
221
221
222
-
## Page Containers
222
+
## Grid Flow
223
223
224
-
Optionally, you can contain your page content by adding the class `slds-container_width`to a top level element in your page structure.
224
+
Once an `slds-grid` has been set, you can change things like flow. By *default*, a grid flows left to right on the main horizontal axis. You can easily switch your grid to flow top to bottom on a vertical axis by adding `slds-grid_vertical` to the `slds-grid` container.
225
225
226
-
Containers come in 4 widths, __small__, __medium__, __large__ and __x-large__. They are rendered using `max-width`. This means your content will be a fluid width until it reaches the width the modifier has set on the container.
226
+
### Left to Right
227
227
228
-
Class|Width
229
-
---|---
230
-
`slds-container_small`|480px
231
-
`slds-container_medium`|768px
232
-
`slds-container_large`|1024px
233
-
`slds-container_x-large`|1280px
228
+
The default flow is left to right on the horizontal axis
234
229
235
-
Additionally, you can center the content of your page by adding `slds-container_center`.
230
+
<Exampletitle="Grid Default Left to Right">
231
+
<Gridcolumns="3" />
232
+
</Example>
233
+
234
+
### Top to Bottom
235
+
236
+
To switch the grid to flow top to bottom on the vertical axis, add `slds-grid_vertical` to the `slds-grid` container.
237
+
238
+
<Exampletitle="Grid Vertical Align">
239
+
<GridclassName="slds-grid_vertical">
240
+
<Column>1</Column>
241
+
<Column>2</Column>
242
+
<Column>3</Column>
243
+
</Grid>
244
+
</Example>
245
+
246
+
### Reversed
247
+
248
+
There may be times you find yourself in a situation to reverse the visual flow of your columns. You can do this both horizontally and vertically.
249
+
250
+
#### Right to Left
251
+
252
+
To reverse the horizontal flow, add the class `slds-grid_reverse` to the `slds-grid` container.
253
+
254
+
<Exampletitle="Grid Horizontal Reversed">
255
+
<GridclassName="slds-grid_reverse">
256
+
<Column>1</Column>
257
+
<Column>2</Column>
258
+
<Column>3</Column>
259
+
</Grid>
260
+
</Example>
261
+
262
+
#### Bottom to Top
263
+
264
+
To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
@@ -259,7 +296,7 @@ Below is an overview table outlining the default behavior for columns and how th
259
296
Note: To make sure columns wrap as they exceed a total column count of 12, responsive layouts require <codeclassName="doc">slds-wrap</code> to be added to the <codeclassName="doc">slds-grid</code> container.
260
297
</Blockquote>
261
298
262
-
### Mobile/Desktop Example
299
+
####Mobile/Desktop Example
263
300
264
301
Since we build on the concept of mobile first, let's set a layout for mobile and override for desktop directly in our HTML. We do this by setting a mobile, in this case default widths to our columns and override the layout when we meet the criteria of a desktop viewport size.
265
302
@@ -272,9 +309,9 @@ Since we build on the concept of mobile first, let's set a layout for mobile and
272
309
273
310
In the above example, we are setting a stacked layout for mobile/tablet devices and then when our viewport exceeds a width of 1024px we redraw our layout to be a nice two column where the primary content area takes up 8 columns and the secondary content area takes up 4 columns.
274
311
275
-
### Mobile/Tablet/Desktop Example
312
+
####Mobile/Tablet/Desktop Example
276
313
277
-
If our designs need a bit more flexibility, we can accomplish that by establishing different layouts for mobile, tablets and desktops.
314
+
If our designs need a bit more flexibility, we can accomplish that by establishing different layouts for mobile, tablet, and desktop.
278
315
279
316
<Exampletitle="Grid Responsive 2 col mobile tablet desktop">
280
317
<GridclassName="slds-wrap">
@@ -285,7 +322,7 @@ If our designs need a bit more flexibility, we can accomplish that by establishi
285
322
286
323
In this above example, we are setting our default stacked layout and when our browser exceeds a viewport width of 768px, we adjust the layout for each column to take up 50% or 6 columns of the slds-grid container. Then once we exceed a viewport width of 1024px, we again redraw a layout to be a nice 66% or 8 columns for the primary content area and 33% or 4 columns for the secondary content area.
287
324
288
-
###Responsive Layout - Column Reordering
325
+
#### Conditional Column Reordering
289
326
290
327
With flexbox it's easy to reorder your columns visually. Luckily with the SLDS grid system it's easy to reorder visually in a responsive manner! Following the same naming convention as sizing, we'll want to prefix `slds-order` with our breakpoint name and pass in an integer for where you want it visually. The lowest value is the first in order. If no order is defined, standard ordering is applied. This means that a column with no order class will render before `slds-order_1`.
291
328
@@ -298,11 +335,13 @@ With flexbox it's easy to reorder your columns visually. Luckily with the SLDS g
298
335
299
336
In the above example, we're setting our first column to be last in the order of 3. Then once your viewport exceeds a width of 1024px, we're changing the visual order of our first column back to 1. Now this seemed rather long winded to move 1 column. Below is an easy way of letting the column know you only want to reorder the first column if it's in a viewport smaller than 480px. This breaks the convention of mobile first and should be used sparingly.
300
337
301
-
## Horizontal Alignment
338
+
## Alignment
302
339
303
340
Since the grids are built on flexbox, they allow us to do some interesting things with alignment on both a horizontal axis and vertical axis. You can add an alignment utility to the `slds-grid` container.
304
341
305
-
### Content centered
342
+
### Horizontal Axis
343
+
344
+
#### Content centered
306
345
307
346
If you want your columns to grow from the the center of the horizontal axis, apply the class `slds-grid_align-center`.
308
347
@@ -314,7 +353,7 @@ If you want your columns to grow from the the center of the horizontal axis, app
314
353
</Grid>
315
354
</Example>
316
355
317
-
### Setting variable widths based on content
356
+
####Setting variable widths based on content
318
357
319
358
Another powerful technique is letting a column shrink to the width of the content inside of it, while explicitly setting widths to other columns. This is achieved by using the `slds-shrink-none` or `slds-grow-none` utility classes or simply removing the `slds-col` class from the column element.
320
359
@@ -326,7 +365,7 @@ Another powerful technique is letting a column shrink to the width of the conten
326
365
</Grid>
327
366
</Example>
328
367
329
-
### Content evenly spaced out
368
+
####Content evenly spaced out
330
369
331
370
To evenly distribute columns on the horizontal axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`.
332
371
@@ -338,7 +377,7 @@ To evenly distribute columns on the horizontal axis with an equal amount of whit
338
377
</Grid>
339
378
</Example>
340
379
341
-
### Content evenly spread out from edges
380
+
####Content evenly spread out from edges
342
381
343
382
To spread out your columns on the horizontal axis, with the first column starting at the start of your main axis and last item ending at the far end of your main axis, apply the class `slds-grid_align-spread`.
344
383
@@ -350,7 +389,7 @@ To spread out your columns on the horizontal axis, with the first column startin
350
389
</Grid>
351
390
</Example>
352
391
353
-
### Content right justified
392
+
####Content right justified
354
393
355
394
If you want your columns to grow from the end of the horizontal axis, apply the class `slds-grid_align-end`.
356
395
@@ -362,7 +401,7 @@ If you want your columns to grow from the end of the horizontal axis, apply the
362
401
</Grid>
363
402
</Example>
364
403
365
-
### Content alignment with bump
404
+
####Content alignment with bump
366
405
367
406
To "bump" a single or multiple grid items, apply the class `slds-col_bump-{direction}`, with `{direction}` being either left, right, top or bottom, to a grid item.
368
407
@@ -396,35 +435,13 @@ In the example below, applying the right bump class to item 5 bumps item 6 to th
396
435
</Grid>
397
436
</Example>
398
437
399
-
### Reversed
400
-
401
-
There may be times you find yourself in a situation to reverse the visual flow of your columns, you can do this both horizontally and vertically. To reverse the horizontal flow, add the class `slds-grid_reverse` to the `slds-grid` container. To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
402
-
403
-
<Exampletitle="Grid Horizontal Reversed">
404
-
<GridclassName="slds-grid_reverse">
405
-
<Column>1</Column>
406
-
<Column>2</Column>
407
-
<Column>3</Column>
408
-
</Grid>
409
-
</Example>
410
-
411
-
## Vertical Alignment
412
-
413
-
Once an `slds-grid` has been set, you can change things like flow. By default, a grid flows left to right on the main horizontal axis. You can easily switch your grid to flow top to bottom on a vertical axis by adding `slds-grid_vertical` to the `slds-grid` container.
438
+
### Vertical Axis
414
439
415
-
<Exampletitle="Grid Vertical Align">
416
-
<GridclassName="slds-grid_vertical">
417
-
<Column>1</Column>
418
-
<Column>2</Column>
419
-
<Column>3</Column>
420
-
</Grid>
421
-
</Example>
422
-
423
-
<Blockquote>
424
-
Note, to vertically align elements on a cross-axis of a `slds-grid` container, the elements need available vertical white space. This is usually achieved by having a height applied to the `slds-grid` container.
To vertically align elements on a cross-axis of a `slds-grid` container, the elements need available vertical white space. This is usually achieved by having a height applied to the `slds-grid` container.
425
442
</Blockquote>
426
443
427
-
### Content top
444
+
####Content top
428
445
429
446
To align a single row or multi-line rows to the beginning of the cross axis, apply the class `slds-grid_vertical-align-start`.
430
447
@@ -436,7 +453,7 @@ To align a single row or multi-line rows to the beginning of the cross axis, app
436
453
</Grid>
437
454
</Example>
438
455
439
-
### Content centered
456
+
####Content centered
440
457
441
458
To vertically center align a single row or multi-line rows to the height of a `slds-grid` container, apply the class `slds-grid_vertical-align-center`. When `slds-grid_vertical-align-center` is used in conjunction with `slds-grid_align-center`, the outcome would horizontally and vertically center align your content in the center of the `slds-grid` container.
442
459
@@ -448,7 +465,7 @@ To vertically center align a single row or multi-line rows to the height of a `s
448
465
</Grid>
449
466
</Example>
450
467
451
-
### Content bottom
468
+
####Content bottom
452
469
453
470
To align a single row or multi-line rows to the end of the cross axis, apply the class `slds-grid_vertical-align-end`.
454
471
@@ -460,7 +477,7 @@ To align a single row or multi-line rows to the end of the cross axis, apply the
To specify the vertical placement of grid items on the cross axis, you can apply `slds-align-top`, `slds-align-middle`, and `slds-align-bottom` to a `slds-col` element.
488
493
@@ -493,3 +498,18 @@ To specify the vertical placement of grid items on the cross axis, you can apply
493
498
<ColumnclassName="slds-align-bottom">3</Column>
494
499
</Grid>
495
500
</Example>
501
+
502
+
## Page Containers
503
+
504
+
Optionally, you can contain your page content by adding the class `slds-container_width` to a top level element in your page structure.
505
+
506
+
Containers come in 4 widths, __small__, __medium__, __large__ and __x-large__. They are rendered using `max-width`. This means your content will be a fluid width until it reaches the width the modifier has set on the container.
507
+
508
+
Class|Width
509
+
---|---
510
+
`slds-container_small`|480px
511
+
`slds-container_medium`|768px
512
+
`slds-container_large`|1024px
513
+
`slds-container_x-large`|1280px
514
+
515
+
Additionally, you can center the content of your page by adding `slds-container_center`.
0 commit comments