SHARE
TWEET

Untitled

a guest Sep 11th, 2019 102 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .grid
  2.                  /* --------- Основное ------------*/
  3.  
  4.     display: grid
  5.     grid-template-columns: 1fr 1fr 1fr // 3 Колонки по 300px
  6.     grid-template-rows: 80px 100px  // Высота cтоkбцов
  7.     grid-auto-rows: 100px // Высота по дефолту  
  8.     // grid-auto-rows: 100px
  9.     grid-row-gap: 20px // Расстояние между рядами
  10.     grid-column-gap: 20px // Расстояние между столбцами
  11.     grid-gap: 20px // объединение свойств
  12.  
  13.   grid-template-columns: repeat(3, 1fr) // Сокращённая запись (3 колонки,
  14.                                         // по 1 фракции)
  15.  
  16.   grid-template-columns: repeat(2, 1fr 2fr) // - Чередование колонок
  17.   grid-template-columns: 100px repeat(2, 1fr 2fr) // 1 колонка 100, следующие
  18.                                 // элементы репитятся, чередуются
  19.    grid-template-columns: minmax(150px, 250px ) (1fr 1fr)
  20.    // первая колонка будет адаптивной, до 150px ужиматься
  21.      // а максимальная ширина у неё 250px
  22.        // 2 и 3 колонки по 1fr соответсвенно
  23.   grid-auto-rows: minmax(100px, auto)
  24.   // auto - В зависимости от контента будет под него растягиваться
  25.    
  26.             /* --------- Порядок элементов ------------*/
  27.  
  28.   grid-auto-flow: column // Изменение порядка => В столбик
  29.   grid-template-rows: 200px 200px 200px // Высота строк
  30.  
  31.              /* --------- Перенос элементов ------------*/
  32.   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr ))
  33.   // Перенос строк, когда минимальное = 150, колонки перескакивют
  34.   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr ))
  35.   // Растяжение на всю ширину
  36.  
  37.          /* --------- Позиция элементов на линии ------------*/
  38. .grid div:nth-child(1)
  39.   grid-column-start: 1 // Место начала ширины элемента
  40.   grid-column-end: 4 // Место конца ширины элемента
  41.   // можно указать -1, тогда элемент будет растягиваться на
  42.     // ВСЮ ШИРИНУ                    
  43.   grid-column: 1 / -1   // = Сокращённая запись = */
  44.                /////////////////////////////////////////
  45. .grid div:nth-child(2)
  46.   grid-column: 1
  47.   grid-row: 2
  48.  
  49. .grid div:nth-child(3)
  50.   grid-column: 2 / 4
  51.   grid-row: 2
  52.  
  53.  
  54.          /* --------- Выравнивание элементов ------------*/
  55. .grid
  56.   justify-items: center // Блоки по центру все. stretch - по-умолчанию
  57.   align-items: center // По центру соотвественно
  58.  
  59.                  /* --------- Управление элементами ------------*/
  60.   align-self: center // Для самого блока
  61.   justify-self: center // Для самого блока
  62.  
  63.              /* --------- Управление ОБЛАСТЯМИ ------------*/
  64. .grid
  65.   display: grid
  66.   grid-gap: 20px
  67.   grid-template-areas:
  68.     "header"
  69.     "aside"
  70.     "footer"
  71.  /* =   БЛОКИ БУДУТ ИДТИ ПО ПОРЯДКУ: header, aside, footer - В СТОЛБИК= */
  72. header
  73.   grid-area: header // Название области
  74. aside
  75.   grid-area: aside // Название области
  76. footer
  77.   grid-area: footer // Название области
  78.  
  79. @media (min-width: 640px)
  80.   .grid
  81.     grid-template-columns: 2fr 4fr
  82.     grid-template-areas:
  83.      "header header"
  84.      "aside aside"
  85.      "footer footer"
  86.  
  87. /* = ШАПКА РАСТЯНЕТСЯ НА 2 ФРАКЦИИ
  88.     ASIDE И ARTICTE ЗАЙМУТ ПО 1 ФРАКЦИИ
  89.     FOOTER ЗАЙМЁТ 2 ФРАКЦИИ
  90.  
  91.      ЕСЛИ ПОСТАВИТЬ . - ЭЛЕМЕНТ МОЖНО ПРОПУСТИТЬ:
  92.         ". footer"  - например, футер 1 фракция  
  93.  
  94.       ТАКЖЕ ЭТО БУДЕТ РАБОТАТЬ ПО ВЕРТИКАЛИ, Т.Е.
  95.         ПО ВЕРТИКАЛИ МОЖНО ПЕРЕСТАВЛЯТЬ ЭЛЕМЕНТЫ    
  96.          
  97.           = */
  98.        
  99.          /* --------- Сокаращения ------------*/
  100.   grid-template: repeat(3, 200px) / repeat(4, 1fr)
  101.   // Сначала идут строки, а через / колонки!
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top