Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .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)
- // Сначала идут строки, а через / колонки!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement