id | title |
---|---|
grid |
Grid |
import { PropsTable, Description, StorybookLink } from '@site/src/components';
Набор компонентов для создания сетки.
Каждый брейкпоинт разрешения содержит собственное максимальное количество колонок:
Обозначение | Ширина от, пикс | Ширина до, пикс | Кол-во колонок |
---|---|---|---|
largeM | 1200 | - | 30 |
largeS | 960 | 1199 | 24 |
mediumM | 786 | 959 | 18 |
mediumS | 560 | 785 | 12 |
smallS | 0 | 559 | 6 |
Блок с отрицательными отступами для размещения колонок (Col
) по горизонтали.
Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием Col
.
Стилизованный компонент, обладающий всеми свойствами div
.
Размеры колонок указываются свойством size
, отступ — свойством offset
.
import React from 'react';
import { Container, Row, Col } from '@salutejs/plasma-web';
export function App() {
const Filler = ({children}) => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
padding: '0.5rem 1rem',
backgroundColor: '#f0f0f0',
}}
>
{children}
</div>
)
};
return (
<Container>
<Row>
<Col size={3}>
<Filler>3</Filler>
</Col>
<Col size={2}>
<Filler>2</Filler>
</Col>
<Col size={3}>
<Filler>3</Filler>
</Col>
<Col size={4}>
<Filler>4</Filler>
</Col>
<Col size={6}>
<Filler>6</Filler>
</Col>
</Row>
<Row>
<Col size={4} offset={1}>
<Filler>4 offset 1</Filler>
</Col>
<Col size={6} offset={2}>
<Filler>6 offset 2</Filler>
</Col>
</Row>
</Container>
);
}
Свойства size
и offset
могут быть адаптивными.
Для этого добавьте соответствующие свойства с нужными брейкпоинтами.
При этом, size
и offset
могут выступать как fallback-значения для остальных разрешений.
import React from 'react';
import { Container, Row, Col } from '@salutejs/plasma-web';
export function App() {
const Filler = ({children}) => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
padding: '0.5rem 1rem',
backgroundColor: '#f0f0f0',
}}
>
{children}
</div>
)
};
return (
<Container>
<Row>
<Col smallM={{ size: 1 }} mediumS={{ size: 2 }} mediumM={{ size: 3 }} largeM={{ size: 4 }}>
<Filler>1</Filler>
</Col>
<Col size={2} largeM={{ size: 4 }}>
<Filler>2</Filler>
</Col>
</Row>
<Row>
<Col size={4} smallM={{ offset: 1 }} mediumS={{ offset: 2 }} mediumM={{ offset: 3 }} largeM={{ offset: 4 }}>
<Filler>4 offset 1</Filler>
</Col>
<Col size={6} offset={2} largeM={{ offset: 4 }}>
<Filler>6 offset 2</Filler>
</Col>
</Row>
</Container>
);
}