Skip to content

Commit 9e7c0c1

Browse files
Revert "[docs] Add more details about breakpoint widths (#21545)"
This reverts commit 743af74.
1 parent 743af74 commit 9e7c0c1

1 file changed

Lines changed: 3 additions & 8 deletions

File tree

  • docs/src/pages/components/grid

docs/src/pages/components/grid/grid.md

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ The grid system is implemented with the `Grid` component:
1919
- Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
2020
- Items have padding to create the spacing between individual items.
2121
- 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).
2322

2423
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.
2524

@@ -40,17 +39,13 @@ Fluid grids use columns that scale and resize content. A fluid grid’s layout c
4039

4140
### Basic grid
4241

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).
4643

4744
{{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}}
4845

49-
### Grid with multiple breakpoints
50-
51-
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
5247

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.
5449

5550
{{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}}
5651

0 commit comments

Comments
 (0)