@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_grid.scss

@@ -0,0 +1,816 @@
+////
+/// Система сетки темы MOEXP
+/// CSS Grid с Flexbox fallback для старых браузеров
+/// @group grid
+/// @author MOEXP Team
+////
+
+// ============================================
+// GRID SYSTEM WITH FLEX FALLBACK (FIXED v3)
+// local\common\theme-moexp\src\scss\abstracts\_grid.scss
+// ============================================
+
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "spacing";
+@use "breakpoints";
+
+// ─────────────────────────────────────────
+// ПЕРЕМЕННЫЕ
+// ─────────────────────────────────────────
+
+/// Количество колонок в сетке по умолчанию
+/// @type Number
+/// @group grid-variables
+$grid-columns: 12 !default;
+
+/// Gap по умолчанию (1rem / 16px)
+/// @type Number
+/// @group grid-variables
+$grid-gap-default: spacing.$gap-md !default;
+
+// ─────────────────────────────────────────
+// ВСПОМОГАТЕЛЬНАЯ ФУНКЦИЯ
+// ─────────────────────────────────────────
+
+/// Вычисляет ширину элемента для flex fallback
+/// @param {Number} $columns - Количество колонок
+/// @param {Number} $gap - Gap между элементами
+/// @return {String} calc() значение ширины
+/// @example scss
+///   width: _flex-width(3, 1rem);
+///   // => calc(33.3333% - 1rem)
+/// @group grid-functions
+/// @access private
+@function _flex-width($columns, $gap) {
+  @if $columns == 1 {
+    @return 100%;
+  }
+  @return calc(#{math.percentage(math.div(1, $columns))} - #{$gap});
+}
+
+// ─────────────────────────────────────────
+// GRID ITEM
+// ─────────────────────────────────────────
+
+/// Базовые стили для элемента сетки
+/// Предотвращает overflow и проблемы с min-width
+/// @example scss
+///   .grid__item {
+///     @include grid-item;
+///   }
+/// @output box-sizing, min-width, min-height
+/// @group grid-item
+/// @access public
+@mixin grid-item {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+// ─────────────────────────────────────────
+// БАЗОВЫЙ GRID КОНТЕЙНЕР
+// ─────────────────────────────────────────
+
+/// Базовый grid контейнер с фиксированным количеством колонок
+/// Flexbox fallback для IE11 и старых браузеров
+/// @param {Number} $columns [3] - Количество колонок
+/// @param {Number} $gap [$grid-gap-default] - Gap между элементами
+/// @param {String} $align [stretch] - align-items значение
+/// @param {String} $selector ["> *"] - Селектор дочерних элементов
+/// @param {Boolean} $test [false] - Отключить @supports для тестирования fallback
+/// @require {function} _flex-width
+/// @example scss - 4 колонки
+///   .products {
+///     @include grid-container(4, spacing.$gap-lg);
+///   }
+/// @example scss - С кастомным селектором
+///   .cards {
+///     @include grid-container(3, 1rem, stretch, ".card");
+///   }
+/// @output Flexbox fallback + CSS Grid через @supports
+/// @group grid-container
+/// @access public
+@mixin grid-container($columns: 3, $gap: $grid-gap-default, $align: stretch, $selector: "> *", $test: false) {
+  $gap-half: math.div($gap, 2);
+
+  // FALLBACK: Flexbox
+  display: flex;
+  flex-wrap: wrap;
+  align-items: $align;
+  margin: -#{$gap-half};
+
+  #{$selector} {
+    box-sizing: border-box;
+    flex: 0 0 _flex-width($columns, $gap);
+    width: _flex-width($columns, $gap);
+    max-width: _flex-width($columns, $gap);
+    min-width: 0;
+    margin: $gap-half;
+  }
+
+  // MODERN: CSS Grid
+  @if $test != true {
+    @supports (display: grid) {
+      display: grid;
+      grid-template-columns: repeat($columns, 1fr);
+      gap: $gap;
+      margin: 0;
+
+      #{$selector} {
+        width: auto;
+        max-width: none;
+        margin: 0;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// GRID AUTO-FIT
+// ─────────────────────────────────────────
+
+/// Grid с auto-fit — колонки автоматически подстраиваются под ширину
+/// @param {Number} $min-width [280px] - Минимальная ширина колонки
+/// @param {Number} $gap [$grid-gap-default] - Gap между элементами
+/// @param {Number} $max-columns [4] - Максимум колонок (для fallback)
+/// @param {String} $selector ["> *"] - Селектор дочерних элементов
+/// @param {Boolean} $test [false] - Отключить @supports для тестирования
+/// @require {function} _flex-width
+/// @require {mixin} breakpoints.lg
+/// @example scss - Карточки минимум 300px
+///   .cards-grid {
+///     @include grid-auto-fit(300px, spacing.$gap-lg);
+///   }
+/// @example scss - Галерея с мелкими элементами
+///   .gallery {
+///     @include grid-auto-fit(150px, spacing.$gap-sm, 6);
+///   }
+/// @output Flex fallback + grid auto-fit через @supports
+/// @group grid-container
+/// @access public
+@mixin grid-auto-fit($min-width: 280px, $gap: $grid-gap-default, $max-columns: 4, $selector: "> *", $test: false) {
+  $gap-half: math.div($gap, 2);
+
+  // FALLBACK
+  display: flex;
+  flex-wrap: wrap;
+  margin: -#{$gap-half};
+
+  #{$selector} {
+    box-sizing: border-box;
+    flex: 1 1 $min-width;
+    min-width: $min-width;
+    max-width: 100%;
+    margin: $gap-half;
+
+    @if $max-columns {
+      @include breakpoints.lg {
+        max-width: _flex-width($max-columns, $gap);
+      }
+    }
+  }
+
+  // MODERN
+  @if $test != true {
+    @supports (display: grid) {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
+      gap: $gap;
+      margin: 0;
+
+      #{$selector} {
+        min-width: 0;
+        max-width: none;
+        margin: 0;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// РЕСПОНСИВНЫЙ GRID
+// ─────────────────────────────────────────
+
+/// Респонсивный grid с разным количеством колонок на брейкпоинтах
+/// @param {Map} $breakpoint-columns - Карта (breakpoint: columns)
+/// @param {Number} $gap [$grid-gap-default] - Gap между элементами
+/// @param {String} $selector ["> *"] - Селектор дочерних элементов
+/// @param {Boolean} $test [false] - Отключить @supports для тестирования
+/// @require {function} _flex-width
+/// @require {mixin} breakpoints.media
+/// @example scss - 1→2→3 колонки
+///   .services {
+///     @include grid-responsive((
+///       xs: 1,
+///       md: 2,
+///       lg: 3
+///     ));
+///   }
+/// @example scss - Сложная раскладка
+///   .products {
+///     @include grid-responsive((
+///       xs: 1,
+///       sm: 2,
+///       lg: 3,
+///       xl: 4,
+///       xxl: 5
+///     ), spacing.$gap-lg);
+///   }
+/// @output Flex fallback с медиа-запросами + CSS Grid через @supports
+/// @group grid-responsive
+/// @access public
+@mixin grid-responsive($breakpoint-columns, $gap: $grid-gap-default, $selector: "> *", $test: false) {
+  $gap-half: math.div($gap, 2);
+
+  // ═══════════════════════════════════════
+  // FALLBACK: Flexbox (весь блок)
+  // ═══════════════════════════════════════
+  display: flex;
+  flex-wrap: wrap;
+  margin: -#{$gap-half};
+
+  #{$selector} {
+    box-sizing: border-box;
+    min-width: 0;
+    margin: $gap-half;
+  }
+
+  // Flex: респонсивные колонки
+  @each $bp, $cols in $breakpoint-columns {
+    @if $bp == xs or $bp == base {
+      #{$selector} {
+        flex: 0 0 _flex-width($cols, $gap);
+        width: _flex-width($cols, $gap);
+        max-width: _flex-width($cols, $gap);
+      }
+    } @else {
+      @include breakpoints.media($bp) {
+        #{$selector} {
+          flex: 0 0 _flex-width($cols, $gap);
+          width: _flex-width($cols, $gap);
+          max-width: _flex-width($cols, $gap);
+        }
+      }
+    }
+  }
+
+  // ═══════════════════════════════════════
+  // MODERN: CSS Grid (внутри @supports!)
+  // ═══════════════════════════════════════
+  @if $test != true {
+    @supports (display: grid) {
+      display: grid;
+      gap: $gap;
+      margin: 0;
+
+      // Базовые стили элементов — сбрасываем flex!
+      #{$selector} {
+        width: auto;
+        max-width: none;
+        margin: 0;
+      }
+
+      // Grid: респонсивные колонки
+      @each $bp, $cols in $breakpoint-columns {
+        @if $bp == xs or $bp == base {
+          grid-template-columns: repeat($cols, 1fr);
+        } @else {
+          @include breakpoints.media($bp) {
+            grid-template-columns: repeat($cols, 1fr);
+
+            // КЛЮЧЕВОЙ МОМЕНТ: сбрасываем flex стили ВНУТРИ каждого медиа-запроса!
+            #{$selector} {
+              width: auto;
+              max-width: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// ГОТОВЫЕ ПРЕСЕТЫ
+// ─────────────────────────────────────────
+
+/// Пресет: 2 колонки (1→2)
+/// @param {Number} $gap [$grid-gap-default] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .two-columns {
+///     @include grid-2-cols;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-2-cols($gap: $grid-gap-default, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      md: 2,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: 3 колонки (1→2→3)
+/// @param {Number} $gap [$grid-gap-default] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .three-columns {
+///     @include grid-3-cols(spacing.$gap-lg);
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-3-cols($gap: $grid-gap-default, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      sm: 2,
+      lg: 3,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: 4 колонки (1→2→3→4)
+/// @param {Number} $gap [$grid-gap-default] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .four-columns {
+///     @include grid-4-cols;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-4-cols($gap: $grid-gap-default, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      sm: 2,
+      lg: 3,
+      xl: 4,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: сетка услуг (1→2→3)
+/// Увеличенный gap для карточек услуг
+/// @param {Number} $gap [spacing.$gap-lg] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .services__list {
+///     @include grid-services;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-services($gap: spacing.$gap-lg, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      md: 2,
+      xl: 3,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: сетка прогресса/статистики (1→3)
+/// @param {Number} $gap [spacing.$gap-lg] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .stats__list {
+///     @include grid-progress;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-progress($gap: spacing.$gap-lg, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      md: 3,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: сетка товаров (1→2→3→4)
+/// @param {Number} $gap [spacing.$gap-md] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .products__grid {
+///     @include grid-products;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-products($gap: spacing.$gap-md, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 1,
+      sm: 2,
+      lg: 3,
+      xxl: 4,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+/// Пресет: галерея (2→3→4→5)
+/// Минимальный gap, начинается с 2 колонок
+/// @param {Number} $gap [spacing.$gap-sm] - Gap
+/// @param {String} $selector ["> *"] - Селектор
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} grid-responsive
+/// @example scss
+///   .gallery__grid {
+///     @include grid-gallery;
+///   }
+/// @group grid-presets
+/// @access public
+@mixin grid-gallery($gap: spacing.$gap-sm, $selector: "> *", $test: false) {
+  @include grid-responsive(
+    (
+      xs: 2,
+      sm: 3,
+      lg: 4,
+      xl: 5,
+    ),
+    $gap,
+    $selector,
+    $test
+  );
+}
+
+// ─────────────────────────────────────────
+// GRID ITEM HELPERS
+// ─────────────────────────────────────────
+
+/// Растянуть элемент на N колонок
+/// @param {Number} $span - Количество колонок
+/// @example scss
+///   .featured-item {
+///     @include grid-span(2);
+///   }
+/// @output grid-column: span N;
+/// @group grid-item
+/// @access public
+@mixin grid-span($span) {
+  grid-column: span $span;
+}
+
+/// Растянуть элемент на всю ширину
+/// @example scss
+///   .full-width-item {
+///     @include grid-full;
+///   }
+/// @output grid-column: 1 / -1;
+/// @group grid-item
+/// @access public
+@mixin grid-full {
+  grid-column: 1 / -1;
+}
+
+/// Растянуть элемент на N строк
+/// @param {Number} $span - Количество строк
+/// @example scss
+///   .tall-item {
+///     @include grid-row-span(2);
+///   }
+/// @output grid-row: span N;
+/// @group grid-item
+/// @access public
+@mixin grid-row-span($span) {
+  grid-row: span $span;
+}
+
+// ─────────────────────────────────────────
+// GRID LIMIT ITEMS
+// ─────────────────────────────────────────
+
+/// Ограничивает количество видимых элементов на разных брейкпоинтах
+/// @param {Map} $limits - Карта (breakpoint: max-items)
+/// @param {String} $selector ["> *"] - Селектор
+/// @require {mixin} breakpoints.media
+/// @example scss - Показать 3 на lg, 4 на xl
+///   .features {
+///     @include grid-limit-items((
+///       lg: 3,
+///       xl: 4
+///     ));
+///   }
+/// @output :nth-child(n + N) { display: none } для каждого брейкпоинта
+/// @group grid-limit
+/// @access public
+@mixin grid-limit-items($limits, $selector: "> *") {
+  // Сортируем брейкпоинты и создаём диапазоны
+  $breakpoint-keys: map.keys($limits);
+  $length: list.length($breakpoint-keys);
+
+  @for $i from 1 through $length {
+    $bp: list.nth($breakpoint-keys, $i);
+    $limit: map.get($limits, $bp);
+    $next-bp: null;
+    @if $i < $length {
+      $next-bp: list.nth($breakpoint-keys, $i + 1);
+    }
+
+    @if $next-bp {
+      // Диапазон: от $bp до $next-bp
+      @include breakpoints.media($bp, min-max, $next-bp) {
+        #{$selector}:nth-child(n + #{$limit + 1}) {
+          display: none;
+        }
+      }
+    } @else {
+      // Последний брейкпоинт — от $bp и выше
+      @include breakpoints.media($bp) {
+        #{$selector}:nth-child(n + #{$limit + 1}) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+/// Скрыть элементы после N на конкретном брейкпоинте и выше
+/// @param {String} $breakpoint - Брейкпоинт (lg, xl, etc.)
+/// @param {Number} $show - Сколько показывать
+/// @param {String} $selector ["> *"] - Селектор
+/// @require {mixin} breakpoints.media
+/// @example scss - Показать только 4 на lg+
+///   .cards {
+///     @include grid-hide-after(lg, 4);
+///   }
+/// @output @media (min-width) { :nth-child(n+N) { display: none } }
+/// @group grid-limit
+/// @access public
+@mixin grid-hide-after($breakpoint, $show, $selector: "> *") {
+  @include breakpoints.media($breakpoint) {
+    #{$selector}:nth-child(n + #{$show + 1}) {
+      display: none;
+    }
+  }
+}
+
+/// Скрыть элементы после N только в диапазоне брейкпоинтов
+/// @param {String} $from - Начальный брейкпоинт
+/// @param {String} $to - Конечный брейкпоинт
+/// @param {Number} $show - Сколько показывать
+/// @param {String} $selector ["> *"] - Селектор
+/// @require {mixin} breakpoints.media
+/// @example scss - Показать 3 только между md и lg
+///   .cards {
+///     @include grid-hide-after-between(md, lg, 3);
+///   }
+/// @output @media (min-width) and (max-width) { ... }
+/// @group grid-limit
+/// @access public
+@mixin grid-hide-after-between($from, $to, $show, $selector: "> *") {
+  @include breakpoints.media($from, min-max, $to) {
+    #{$selector}:nth-child(n + #{$show + 1}) {
+      display: none;
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// GRID AREAS
+// ─────────────────────────────────────────
+
+/// Grid с именованными областями и простым flex fallback
+/// @param {List} $areas - Строка областей ("header header" "sidebar main")
+/// @param {List} $columns [null] - Колонки (1fr 2fr)
+/// @param {Number} $gap [$grid-gap-default] - Gap
+/// @param {Number} $cols-count [1] - Колонок для flex fallback
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @example scss
+///   .layout {
+///     @include grid-areas(
+///       "header header" "sidebar main" "footer footer",
+///       1fr 3fr,
+///       spacing.$gap-lg,
+///       2
+///     );
+///   }
+/// @output Flex fallback + grid-template-areas через @supports
+/// @group grid-areas
+/// @access public
+@mixin grid-areas($areas, $columns: null, $gap: $grid-gap-default, $cols-count: 1, $test: false) {
+  $gap-half: math.div($gap, 2);
+
+  // FALLBACK: простой Flex
+  display: flex;
+  flex-wrap: wrap;
+  margin: -#{$gap-half};
+
+  > * {
+    box-sizing: border-box;
+    margin: $gap-half;
+    flex: 0 0 calc(#{math.percentage(math.div(1, $cols-count))} - #{$gap});
+  }
+
+  // MODERN: CSS Grid
+  @if $test != true {
+    @supports (display: grid) {
+      display: grid;
+      gap: $gap;
+      margin: 0;
+      grid-template-areas: $areas;
+
+      @if $columns {
+        grid-template-columns: $columns;
+      }
+
+      > * {
+        margin: 0;
+      }
+    }
+  }
+}
+
+/// Присвоить элементу grid-area
+/// @param {String} $name - Имя области
+/// @example scss
+///   .sidebar {
+///     @include grid-area(sidebar);
+///   }
+/// @output grid-area: name (только в @supports)
+/// @group grid-areas
+/// @access public
+@mixin grid-area($name) {
+  @supports (display: grid) {
+    grid-area: $name;
+  }
+}
+
+// ─────────────────────────────────────────
+// DISPLAY UTILITIES
+// ─────────────────────────────────────────
+
+/// Display: contents — элемент "исчезает", дети становятся частью родительского grid/flex
+/// @param {String} $fallback [block] - display для старых браузеров
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @example scss
+///   .wrapper {
+///     @include display-contents;
+///   }
+/// @output display: block (fallback) + display: contents (modern)
+/// @group grid-display
+/// @access public
+@mixin display-contents($fallback: block, $test: false) {
+  // FALLBACK: обычный display
+  display: $fallback;
+
+  // MODERN: contents
+  @if $test != true {
+    @supports (display: contents) {
+      display: contents;
+    }
+  }
+}
+
+/// Display: contents только на определённом брейкпоинте и выше
+/// @param {String} $breakpoint - Брейкпоинт (lg, xl, etc.)
+/// @param {String} $fallback [block] - display для старых браузеров
+/// @param {Boolean} $test [false] - Тестовый режим
+/// @require {mixin} breakpoints.media
+/// @example scss
+///   .mobile-wrapper {
+///     @include display-contents-up(lg);
+///   }
+/// @output display: block + @media { display: contents }
+/// @group grid-display
+/// @access public
+@mixin display-contents-up($breakpoint, $fallback: block, $test: false) {
+  display: $fallback;
+
+  @if $test != true {
+    @include breakpoints.media($breakpoint) {
+      @supports (display: contents) {
+        display: contents;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// GRID EXPAND
+// ─────────────────────────────────────────
+
+/// Разворачивает обёртки в плоский grid
+/// Использует display: contents для "растворения" обёрток
+/// @param {List} $areas - Области ("address info docs contacts")
+/// @param {List} $columns - Колонки (repeat(4, 1fr))
+/// @param {Number} $gap [$grid-gap-default] - Gap
+/// @example scss
+///   .contacts-grid {
+///     @include grid-expand(
+///       "address info docs contacts",
+///       repeat(4, 1fr)
+///     );
+///   }
+/// @output grid layout только если contents поддерживается
+/// @group grid-expand
+/// @access public
+@mixin grid-expand($areas, $columns, $gap: $grid-gap-default) {
+  @supports (display: contents) {
+    display: grid;
+    grid-template-columns: $columns;
+    grid-template-areas: $areas;
+    gap: $gap;
+  }
+}
+
+/// Применить display: contents к обёртке
+/// Обёртка "исчезает", её дети становятся прямыми потомками grid
+/// @example scss
+///   .contact-group {
+///     @include grid-expand-wrapper;
+///   }
+/// @output display: contents (только если поддерживается)
+/// @group grid-expand
+/// @access public
+@mixin grid-expand-wrapper {
+  @supports (display: contents) {
+    display: contents;
+  }
+}
+
+/// Применить grid-area к элементу внутри "развёрнутой" обёртки
+/// @param {String} $name - Имя области
+/// @example scss
+///   .contact-address {
+///     @include grid-expand-area(address);
+///   }
+/// @output grid-area: name (только если contents поддерживается)
+/// @group grid-expand
+/// @access public
+@mixin grid-expand-area($name) {
+  @supports (display: contents) {
+    grid-area: $name;
+  }
+}
+
+// // Простой grid — пресет
+// .cards {
+//   @include grid-3-cols(spacing.$gap-lg);
+// }
+
+// // Кастомный респонсивный grid
+// .products {
+//   @include grid-responsive((
+//     xs: 1,
+//     sm: 2,
+//     lg: 3,
+//     xxl: 4
+//   ));
+// }
+
+// // Auto-fit — сам подстраивается
+// .features {
+//   @include grid-auto-fit(250px);
+// }
+
+// // Grid areas для сложных лейаутов
+// .page-layout {
+//   @include grid-areas(
+//     "header header" "sidebar main" "footer footer",
+//     200px 1fr
+//   );
+
+//   .header { @include grid-area(header); }
+//   .sidebar { @include grid-area(sidebar); }
+// }
+
+// // Ограничение элементов
+// .news {
+//   @include grid-3-cols;
+//   @include grid-limit-items((lg: 3, xl: 6));
+// }