From 4374b16f6e871d26e7db478078fa72ee2c914d4f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 1 Aug 2022 12:13:12 +0700 Subject: [PATCH] update content --- docs/data/material/components/grid2/grid2.md | 39 +++++++++++-------- .../migration-grid-v2/migration-grid-v2.md | 4 ++ 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index bfea667dc4fd9c..c0a0a4c73fd490 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -14,6 +14,29 @@ materialDesign: https://material.io/design/layout/understanding-layout.html The `Grid` component works well for a layout with a known number of columns. The columns can be configured with multiple breakpoints to specify the column span of each child. +## What's changed + +We built the `Grid` component from scratch in order to: + +- Fix [known issues](https://github.com/mui/material-ui/pull/32746) introduced in Material UI v5. +- Simplify the logic with CSS variables, removing the unnecessary `item` prop and reducing CSS specificity. +- Introduce a proper fix for [preventing a scrollbar](#prevent-scrollbar) by switching between negative margin approaches. +- Set negative margins of equal size on all sides of the grid container by default. + +Since the new implementation is considered a breaking change, we introduced it as `Unstable_Grid2` to gather feedbacks from the community before making it stable in the next major release of Material UI. + +We encourage everyone to try the new version of the `Grid` by visiting the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/). + +:::info +From now on, the `Grid` v1 and `Grid` v2 refer to the import as: + +```js +import Grid from '@mui/material/Grid'; // Grid version 1 +import Grid2 from '@mui/material/Unstable_Grid2'; // Grid version 2 +``` + +::: + ## How it works The grid system is implemented with the `Grid` component: @@ -32,22 +55,6 @@ The `Grid` component is a _layout_ grid, not a _data_ grid. If you need a data grid, check out [the MUI X `DataGrid` component](/x/react-data-grid/). ::: -## What's changed - -We built `Grid` v2 from scratch in order to: - -- Fix [known issues](https://github.com/mui/material-ui/pull/32746) introduced in Material UI v5. -- Simplify the logic with CSS variables, removing the unnecessary `item` prop and reducing CSS specificity. -- Introduce a proper fix for [preventing a scrollbar](#prevent-scrollbar) by switching between negative margin approaches. -- Set negative margins of equal size on all sides of the grid container by default. - -Updating the `Grid` from v1 to v2 is a breaking change. -Visit the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) for more details. - -:::info -In the next major release of Material UI, Grid v2 will be stable and v1 will be deprecated. -::: - ## Fluid grids Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically. diff --git a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md index f7e57f2d51c895..400a9946008d2c 100644 --- a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md +++ b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md @@ -78,3 +78,7 @@ function Demo() { ); } ``` + +## Documentation page + +Check out [Grid v2 docs](/material-ui/react-grid2/#fluid-grids) for all the demos and code samples.