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: docs/src/pages/components/grid/grid.md
+3-8Lines changed: 3 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,6 @@ The grid system is implemented with the `Grid` component:
19
19
- Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
20
20
- Items have padding to create the spacing between individual items.
21
21
- There are five grid breakpoints: xs, sm, md, lg, and xl.
22
-
- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint contraints](/customization/breakpoints/#default-breakpoints).
23
22
24
23
If you are **new to or unfamiliar with flexbox**, we encourage you to read this [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) guide.
25
24
@@ -40,17 +39,13 @@ Fluid grids use columns that scale and resize content. A fluid grid’s layout c
40
39
41
40
### Basic grid
42
41
43
-
Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
44
-
45
-
A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as you can read later in this page). For example, `xs={12}` sizes a component to occupy the whole viewport width regardless of its size.
42
+
The column widths apply at all breakpoints (i.e. `xs` and up).
Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
46
+
### Grid with breakpoints
52
47
53
-
For example, `xs={12} sm={6}` sizes a component to occupy half of the viewport width (6 columns) when viewport width is [600 or more pixels](/customization/breakpoints/#default-breakpoints). For smaller viewports, the component fills all 12 available columns.
48
+
Some columns have multiple widths defined, causing the layout to change at the defined breakpoint.
0 commit comments