Grid

import { Grid, GridColumn } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Код itemViewconst 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>
  <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="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>

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

<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="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="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="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="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="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="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="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>

<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" 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="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" 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">
    <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" 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" 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>

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