Сетка
Набор горизонтальных и вертикальных линий, создающих шаблон, по которому мы можем выстроить элементы дизайна.
@import 'node_modules/jcore-ui/lib/scss/components/grid.scss';
Правила использования.
Контейнер сетки указывается через .j-grid класс, колонки через .j-grid-item
Колонка 1
Колонка 2
Колонка 3
Колонка 4
Адаптиваня сетка.
Для адаптивной сетки для item указываются data аттрибуты - data-elg, data-lg, data-md, data-sm, data-xs и т.д.
Колонка 1
Колонка 2
Колонка 3
Колонка 4
Горизонтальное и вертикальное выравнивание.
.j-grid
flex-direction - [data-dir='row|row-reverse|column|column-reverse']
justify-content - [data-jc='start|end|center|space-between|space-around']
align-items - [data-dir='start|end|center|baseline|stretch']
align-content - [data-dir='start|end|center|space-between|space-around|stretch']
.j-grid-item
align-self - [data-as='start|end|center|baseline|stretch']
Колонка 1
Колонка 2
Колонка 3
Колонка 4