.grid
                 /* --------- Основное ------------*/

	display: grid
	grid-template-columns: 1fr 1fr 1fr // 3 Колонки по 300px
	grid-template-rows: 80px 100px	// Высота cтоkбцов
	grid-auto-rows: 100px // Высота по дефолту
	// grid-auto-rows: 100px
	grid-row-gap: 20px // Расстояние между рядами
	grid-column-gap: 20px // Расстояние между столбцами
	grid-gap: 20px // объединение свойств

  grid-template-columns: repeat(3, 1fr) // Сокращённая запись (3 колонки,
                                        // по 1 фракции)

  grid-template-columns: repeat(2, 1fr 2fr) // - Чередование колонок
  grid-template-columns: 100px repeat(2, 1fr 2fr) // 1 колонка 100, следующие
                                // элементы репитятся, чередуются
   grid-template-columns: minmax(150px, 250px ) (1fr 1fr)
   // первая колонка будет адаптивной, до 150px ужиматься
     // а максимальная ширина у неё 250px
       // 2 и 3 колонки по 1fr соответсвенно
  grid-auto-rows: minmax(100px, auto)
  // auto - В зависимости от контента будет под него растягиваться

            /* --------- Порядок элементов ------------*/

  grid-auto-flow: column // Изменение порядка => В столбик
  grid-template-rows: 200px 200px 200px // Высота строк

             /* --------- Перенос элементов ------------*/
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr ))
  // Перенос строк, когда минимальное = 150, колонки перескакивют
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr ))
  // Растяжение на всю ширину

         /* --------- Позиция элементов на линии ------------*/
.grid div:nth-child(1)
  grid-column-start: 1 // Место начала ширины элемента
  grid-column-end: 4 // Место конца ширины элемента
  // можно указать -1, тогда элемент будет растягиваться на
    // ВСЮ ШИРИНУ
  grid-column: 1 / -1   // = Сокращённая запись = */
               /////////////////////////////////////////
.grid div:nth-child(2)
  grid-column: 1
  grid-row: 2

.grid div:nth-child(3)
  grid-column: 2 / 4
  grid-row: 2


         /* --------- Выравнивание элементов ------------*/
.grid
  justify-items: center // Блоки по центру все. stretch - по-умолчанию
  align-items: center // По центру соотвественно

                 /* --------- Управление элементами ------------*/
  align-self: center // Для самого блока
  justify-self: center // Для самого блока

             /* --------- Управление ОБЛАСТЯМИ ------------*/
.grid
  display: grid
  grid-gap: 20px
  grid-template-areas:
    "header"
    "aside"
    "footer"
 /* =   БЛОКИ БУДУТ ИДТИ ПО ПОРЯДКУ: header, aside, footer - В СТОЛБИК= */
header
  grid-area: header // Название области
aside
  grid-area: aside // Название области
footer
  grid-area: footer // Название области

@media (min-width: 640px)
  .grid
    grid-template-columns: 2fr 4fr
    grid-template-areas:
     "header header"
     "aside aside"
     "footer footer"

/* = ШАПКА РАСТЯНЕТСЯ НА 2 ФРАКЦИИ
    ASIDE И ARTICTE ЗАЙМУТ ПО 1 ФРАКЦИИ
    FOOTER ЗАЙМЁТ 2 ФРАКЦИИ

     ЕСЛИ ПОСТАВИТЬ . - ЭЛЕМЕНТ МОЖНО ПРОПУСТИТЬ:
        ". footer"  - например, футер 1 фракция

      ТАКЖЕ ЭТО БУДЕТ РАБОТАТЬ ПО ВЕРТИКАЛИ, Т.Е.
        ПО ВЕРТИКАЛИ МОЖНО ПЕРЕСТАВЛЯТЬ ЭЛЕМЕНТЫ

          = */

         /* --------- Сокаращения ------------*/
  grid-template: repeat(3, 200px) / repeat(4, 1fr)
  // Сначала идут строки, а через / колонки!