Grid

Компонент с двенадцатью слотами, дающий возможность создавать адаптивные сетки с простыми ритмами.

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

Передавайте в слот компонента Wrapper. Любая "пауза" ("смещение") в сетке, в любом случае, кратна 1fr, используйте пустой контейнер в слоте на этом месте <div slot="N"></div>. Для каждого типоразмера можно передать собственное значение grid-template-columns в виде "ритма из комбинации fr", и стандартного gap. Они проверяются на валидность следующим образом:

// Проверка валидности значений columns
_isSafeCssDimensionFr(value: string): boolean {
  return /^([1-9][0-9]*(fr|\b)(\s+|\b)){1,12}$/i.test(value);
}

// Валидно:

// 1fr 6fr 1fr 3fr 1fr
// 1fr 2fr 1fr 1fr
// 1fr
// 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr // до 12ти значений!!!

// Не валидно:

// 1fr 5 1fr 3fr 1fr
// 1fr fr 1fr 1fr
// dsf 3f 2fr
// 0fr 2fr
// 1fr1fr
// 300px 1fr
// 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr

// Проверка валидности значений gap
_isSafeCssDimensionPx(value: string): boolean {
  return /^((0|(\d+px))(\s+|\b)){1,2}$/i.test(value);
}

// Валидно:

// 16px 0
// 0
// 0px 0
// 16px 32px

// Не валидно:

// 16px 32px 16px
// 16 16px
// 16px16px

В примере ниже указаны значения которые идут по дефолту:

HTML, Vue

<ds-wrapper>
  <ds-grid
    slot="main"
    columns-widest="1fr 1fr 1fr"
    gap-widest="32px 32px"
    columns-wide="1fr 1fr 1fr"
    gap-wide="32px 32px"
    columns-middle="1fr 1fr 1fr"
    gap-middle="24px 24px"
    columns-narrow="1fr"
    gap-narrow="16px 16px"
  >
    <div slot="1">...</div>
    <div slot="4">...</div>
    <div slot="5">...</div>
  </ds-grid>
</ds-wrapper>

Angular

Внимание! В Ангуляр вам следует указзывать составные имена атрибутов в верблюжьей нотации (camelCase), а не в шашлычной (kebab-case):

<ds-grid
  [columnsWidest]="1fr 1fr 1fr 1fr"
  [gapWidest]="40px 40px"
  [columnsWide]="1fr 1fr 1fr 1fr"
  [gapWide]="40px 40px"
  [columnsMiddle]="1fr 1fr"
  [gapMiddle]="32px 32px"
  [columnsNarrow]="1fr"
  [gapNarrow]="24px 0"
>
  <div style="background: #00FF00; height: 200px;" slot="1"></div>  
  <div style="background: #00FF00; height: 200px;" slot="2"></div>  
  <div style="background: #00FF00; height: 200px;" slot="3"></div>  
</ds-grid>

В комбинации с утилитарными классами из раздела CSS: Утилитарные классы для адаптивной разметки можно творить любые адаптивные чудеса на ваших шаблонах:

React

<Wrapper>
  <Grid
    slot="main"
    className="visible--grid--not-gadgets"
    columns-widest="1fr 1fr 1fr"
    gap-widest="32px 32px"
    columns-wide="1fr 1fr 1fr"
    gap-wide="32px 32px"
  >
    <div class="hidden--block--wide" slot="1">...</div>
    <div class="hidden--block--wide" slot="4">...</div>
    <div class="hidden--block--wide" slot="7">...</div>

    <div class="hidden--block--widest" slot="7">...</div>
    <div class="hidden--block--widest" slot="4">...</div>
    <div class="hidden--block--widest" slot="1">...</div>
  </Grid>

  <Grid
    slot="main"
    className="visible--grid--gadgets"
    columns-middle="1fr"
    gap-middle="32px 0"
  >
    ...
  </Grid>
</Wrapper>

API

Props

Name	Type	Description	Default
columns-widest	String	Значение для правила grid-template-columns на типоразмере Widest	1fr 1fr 1fr
columns-wide	String	Значение для правила grid-template-columns на типоразмере Wide	1fr 1fr 1fr
columns-middle	String	Значение для правила grid-template-columns на типоразмере Middle	1fr 1fr 1fr
columns-narrow	String	Значение для правила grid-template-columns на типоразмере Narrow	1fr
gap-widest	String	Значение для правила gap на типоразмере Widest	32px 32px
gap-wide	String	Значение для правила gap на типоразмере Wide	32px 32px
gap-middle	String	Значение для правила gap на типоразмере Middle	24px 24px
gap-narrow	String	Значение для правила gap на типоразмере Narrow	16px 16px

Slots

Name	Description
1	Слот
2	Слот
3	Слот
4	Слот
5	Слот
6	Слот
7	Слот
8	Слот
9	Слот
10	Слот
11	Слот
12	Слот

Примеры проектов

React

Angular

Vue