@eisgs/grid

Компонент Grid

Компонент Grid представляет собой контейнер с заданной максимальной шириной 1208px. Ширина одной колонки в Grid фиксированная и составляет 64px, ширина gutter'а - 40px.

Внутри Grid может находиться компонент Row, который, в свою очередь, может содержать компонент Column.

Количество занимаемых колонок компонентом Column задается в параметре span.

import { useTheme } from "@eisgs/theme-provider";

const { Row, Column } = Grid;

const { value: theme } = useTheme();

const columnStyles = `
  background-color: ${theme.greenMain};
  color: ${theme.white};
`;

<>
  <Grid >
    <Row>
      {Array(12).fill(1).map((_, index) => (
        <Column className="grid-template" styles={columnStyles} key={index}>
          64px
        </Column>
      ))}
    </Row>
  </Grid>

  <br/>

  <Grid>
    <Row>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
        desktopSpan={3}
        tabletSpan={9}
      >
        256px
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={2}
        tabletSpan={4}
      >
        128px
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={2}
      >
        128px
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
      >
        256px
      </Column>
    </Row>
  </Grid>
</>

Отступы колонок

У каждой колонки Column в параметре offset можно указать размер отступа. Единицей измерения выступают колонки. Например, указав offset={1}, отступ Column, к которой было применено это правило, составит одну колонку, т.е.64px.

import { useTheme } from "@eisgs/theme-provider";

const { Row, Column } = Grid;

const { value: theme } = useTheme();

const columnStyles = `
  background-color: ${theme.greenMain};
  color: ${theme.white};
`;

<>
  <Grid>
    <Row>
      <Column
        className="grid-template" styles={columnStyles}
        offset={1}
        span={4}
      >
        span-4 offset-1
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        offset={2}
        span={4}
      >
        span-4 offset-2
      </Column>
    </Row>
  </Grid>
  
  <br />

  <Grid>
    <Row>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
        offset={4}
      >
        span-4 offset-4
      </Column>
    </Row>
  </Grid>
  
  <br />

  <Grid>
    <Row>
      <Column
        className="grid-template" styles={columnStyles}
        span={2}
      >
        span-2
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={1}
        offset={2}
      >
        span-1 offset-2
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={2}
      >
        span-2
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={1}
      >
        span-1
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={2}
        offset={2}
      >
        span-2 offset-2
      </Column>
    </Row>
  </Grid>
</>

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

Для установки вертикального выравнивания можно передать в Row параметр align.

Также можно задать Column индвидуальное вертикальное выравнивание в параметре alignSelf.

import { useTheme } from "@eisgs/theme-provider";

const { Row, Column } = Grid;

const { value: theme } = useTheme();

const columnStyles = `
  background-color: ${theme.greenMain};
  color: ${theme.white};
`;
const rowStyles = `
  outline-color: ${theme.greenMain};
`;
    
<>
  <Grid>
    <Row
      align="end"
      className="h200 dashed-outline"
      styles={rowStyles}
    >
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
      <Column
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
    </Row>
  </Grid>
  
  <br />

  <Grid>
    <Row className="h200 dashed-outline" styles={rowStyles}>
      <Column
        alignSelf="end"
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
      <Column
        alignSelf="stretch"
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
      <Column
        alignSelf="start"
        className="grid-template" styles={columnStyles}
        span={4}
      >
        span-4
      </Column>
    </Row>
  </Grid>
</>

view (ИЖС)

Доступные значения desktop, table, mobile.

Ширина колонки указывается в параметре span, а отступ в параметре offset. Для каждого view можно указать собственное span/offset с помощью параметра с соответствующим префиксом (desktopSpan и desktopOffset для view="desktop" и тд.)

import { useState, useRef, useLayoutEffect } from "react";
import { Radio } from "@eisgs/radio";
import { Typography } from "@eisgs/typography";
import { useTheme } from "@eisgs/theme-provider";
import { IGS_GRID } from '@constants/styles';

const { Row, Column } = Grid;
const containerId = 'grid-container';

const views = ['default', 'desktop', 'tablet', 'mobile'];
const options = views.map((view) => ({code: view, id: view, description: view}));

const [view, setView] = useState(options[0].code);
const [padding, setPadding] = useState();
const { value: theme } = useTheme();
const rowRef = useRef();

const currentView = IGS_GRID[view.toUpperCase()];

const gridStyles = `
  height: 300px;
  margin-right: auto;
  margin-left: auto;
  background-color: ${theme.yellow};
`;

const rowStyles = `
  position: relative;
  height: 100%;
  justify-content: center;
  
  &:before {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${theme.white};
    ${view === 'default' ? `
      content: 'auto';
      width: fit-content;
      transform: translateX(100%);
    ` : `
      content: '${parseInt(padding)}';
      width: ${padding};
    `}
  }
  
  &:after {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${theme.white};
    ${view === 'default' ? `
      content: 'auto';
      width: fit-content;
      transform: translateX(-100%);
    ` : `
      content: '${parseInt(padding)}';
      width: ${padding};
    `}
  }
`;

const columnStyles = `
  position: relative;
  background-color: ${theme.blue};
  color: ${theme.white};
  
  &:not(:first-of-type)::before {
    content: '${currentView.GAP}';
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: ${currentView.GAP}px;
    height: 100%;
    transform: translateX(-100%);
  }
`;

useLayoutEffect(() => {
  const row = document.querySelector(`#${containerId} .eisgs-grid-row`);
  
  setPadding(window.getComputedStyle(row).getPropertyValue('padding-right'));
}, [view]);

<>
  <Radio options={options} onChange={setView} value={view} />
  <div id={containerId}>
    <Typography type="p1" weight="bold">MAX-WIDTH: {currentView.MAX_WIDTH}</Typography>
    <Grid view={view} styles={gridStyles}>
      <Row styles={rowStyles}>
        {Array(currentView.MAX_COLUMNS).fill(1).map((_, index) => (
          <Column 
            key={index}
            styles={columnStyles}
            className="grid-template"
          >
            {currentView.COLUMN_WIDTH}
          </Column>
        ))}
      </Row>
    </Grid>
  </div>
</>