## \ migration from Grid
Basic usage
Grid:
```jsx
span 12
span 6
span 6
```
Layout:
```jsx
span 12 |
span 6 |
span 6 |
```
<AutoAdjustedRow /> replacement
Grid:
```jsx
() => {
const renderCard = () => (
)
return (
{renderCard()}
{renderCard()}
{renderCard()}
);
}
```
Layout:
```jsx
() => {
const renderCard = () => (
);
return (
{renderCard()}
{renderCard()}
{renderCard()}
|
);
}
```
StretchViewsVertically prop replacement
stretchViewsVetically prop behavior to make all columns the same height is no longer needed - \ works this way by default.
Grid:
```jsx
```
Layout:
```jsx
|
|
```
<Row /> replacement
Layout doesn’t have \|
component and it tries to fit columns into the least amount of rows. If we need multiple rows even if columns could fit into one row we have to use \ nesting.
Grid:
```jsx
```
Layout:
```jsx
|
|
|
|
|
|
```
Limit layout width with parent container
1. To limit \ width with parent container it must have display: block - if we use flex, flex item by default has flex-grow: 0, so Layout would take as little space as possible.
2. \ width would be the same as the parent container width if sum of all gaps width is less or equal to parent container width. Layout internally uses css grid which is 12 columns based layouting mechanism. It has 11 gaps. Layout default gap is 30px, so by default min width with 30px gap would be: 11 * 30px = 330px;
Grid:
```jsx
```
Layout:
```jsx
|
|
```
Replacement of default Grid width constraints
Grid \ component by default has width constraints (when used without fluid prop):
```css
{
min-width: 894px;
max-width: 1254px;
}
```
These constraints are realized using \ component, but if for some reason you don’t use \ component as a parent and you need to achieve the same result with \ you can wrap it with \ component set max-width here.
Grid:
```jsx
```
Layout:
```jsx
|
```