Figma

Grid

import { Grid, GridColumn } from '@megafon/ui-core';
Код itemView
const itemView = {
    backgroundColor: '#00B956',
    color: '#fff',
    textAlign: 'center',
    padding: '5px 10px',
};

Базовое использование

<Grid>
  <GridColumn>
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn>
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

Вертикальные и горизонтальные отступы между колонками

Средние

<Grid guttersLeft="medium" guttersBottom="medium">
      <GridColumn all="5"><div style={itemView}>Тарифы</div></GridColumn>
      <GridColumn all="2"><div style={itemView}>Интернет</div></GridColumn>
      <GridColumn all="2"><div style={itemView}>Услуги</div></GridColumn>
      <GridColumn all="3"><div style={itemView}>Опции</div></GridColumn>
      <GridColumn all="12"><div style={itemView}>Личный кабинет</div></GridColumn>
  </Grid>

Большие

<Grid guttersLeft="large" guttersBottom="large">
  <GridColumn all="5">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="12">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Горизонтальное выравнивание

'between'

Равномерное распределение всех элементов по горизонтали. Боковые элементы прижаты к краям контейнера.

<Grid guttersLeft="large" guttersBottom="large" hAlign="between">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

'around'

Равномерное распределение всех элементов по горизонтали. Пустое пространство по краям равно половине пространства между двумя соседними элементами.

<Grid guttersLeft="large" guttersBottom="large" hAlign="around">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По центру

<Grid guttersLeft="large" guttersBottom="large" hAlign="center">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По левому краю

<Grid guttersLeft="large" guttersBottom="large" hAlign="left">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

По правому краю

<Grid guttersLeft="large" guttersBottom="large" hAlign="right">
  <GridColumn all="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
</Grid>

Вертикальное выравнивание

По верхнему краю

<Grid guttersLeft="medium" hAlign="between" vAlign="top">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По нижнему краю

<Grid guttersLeft="medium" hAlign="between" vAlign="bottom">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По центру

<Grid guttersLeft="medium" hAlign="between" vAlign="center">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

По базовой линии элементов

<Grid guttersLeft="medium" hAlign="between" vAlign="baseline">
  <GridColumn all="4">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Интернет <br />
          <br />
      </div>
  </GridColumn>
  <GridColumn all="4">
      <div style={itemView}>
          Услуги <br />
          <br />
          <br />
      </div>
  </GridColumn>
</Grid>

Отключение нескольких строк

Колонки не переносятся на новые строки при достижении максимального размера (12), а сжимаются с сохранением процентного соотношения.

<Grid guttersLeft="medium" multiRow={false}>
  <GridColumn all="12">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="5">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="2">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Разная ширина колонок на разных разрешениях

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="6" tablet="4" mobile="2">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="5" wide="7" tablet="9" mobile="11">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="4" tablet="3" desktop="4">
      <div style={itemView}>Услуги</div>
  </GridColumn>
  <GridColumn all="3" wide="12">
      <div style={itemView}>Опции</div>
  </GridColumn>
  <GridColumn all="3">
      <div style={itemView}>Личный кабинет</div>
  </GridColumn>
</Grid>

Изменение порядка колонок

Применяется при изменении размеров окна.

На мобильном разрешении

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" mobile="6">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderMobile="3">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderMobile="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

На планшетном разрешении

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderTablet="3">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderTablet="2">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

На разных разрешениях

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" mobile="6" orderWide="3">
      <div style={itemView}>Тарифы</div>
  </GridColumn>
  <GridColumn all="8" mobile="12" orderTablet="3" orderWide="2">
      <div style={itemView}>Интернет</div>
  </GridColumn>
  <GridColumn all="2" mobile="6" orderTablet="2" orderWide="1">
      <div style={itemView}>Услуги</div>
  </GridColumn>
</Grid>

Смещение колонок

Левое

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" leftOffsetAll="3"><div style={itemView}>Тарифы</div></GridColumn>
  <GridColumn all="5" leftOffsetAll="1"><div style={itemView}>Интернет</div></GridColumn>
  <GridColumn all="3" leftOffsetAll="2"><div style={itemView}>Услуги</div></GridColumn>
  <GridColumn all="4" leftOffsetAll="1"><div style={itemView}>Опции</div></GridColumn>
  <GridColumn all="4" leftOffsetAll="1"><div style={itemView}>Личный кабинет</div></GridColumn>
  <GridColumn all="3" leftOffsetAll="1"><div style={itemView}>Связь</div></GridColumn>
</Grid>

Правое

<Grid guttersLeft="medium" guttersBottom="medium">
  <GridColumn all="2" rightOffsetAll="3"><div style={itemView}>Тарифы</div></GridColumn>
  <GridColumn all="5" rightOffsetAll="1"><div style={itemView}>Интернет</div></GridColumn>
  <GridColumn all="3" rightOffsetAll="2"><div style={itemView}>Услуги</div></GridColumn>
  <GridColumn all="4" rightOffsetAll="1"><div style={itemView}>Опции</div></GridColumn>
  <GridColumn all="4" rightOffsetAll="1"><div style={itemView}>Личный кабинет</div></GridColumn>
  <GridColumn all="3" rightOffsetAll="1"><div style={itemView}>Связь</div></GridColumn>
</Grid>